razor partial view and ajax not refreshing - ajax

Question

it's my very first post here so please be tolerant,
I'm struggling with #Ajax.Something calls, it's almost working correctly.
I get the proper result but not in the proper view i loose the content the url also changes.
View :
<p>Ajax result :</p>
<div id="Result">
#{
Html.RenderAction("_result");
}
</div>
#Ajax.ActionLink("Update", "_result", new AjaxOptions
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "Result",
HttpMethod = "GET"
})
<p>normal vue : #DateTime.Now.ToLongTimeString()</p>
<h2>#Html.Encode(ViewData["Message"]) </h2>
<p>
Page Rendered: #DateTime.Now.ToLongTimeString()
</p>
<span id="status">No Status</span>
<br />
#Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" })
<br /><br />
#using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) {
#Html.TextBox("textBox1","Enter text")
<input type="submit" value="Submit" /><br />
<span id="textEntered">Nothing Entered</span>
}
Partial vue _result :
<p> Ajax call worked</p>
<p>partial vue : #DateTime.Now.ToLongTimeString()</p>
Controller :
public ActionResult SimpleAjax()
{
return View();
}
public ActionResult _result()
{
return PartialView();
}
public string GetStatus()
{
return "Status OK at " + DateTime.Now.ToLongTimeString();
}
public string UpdateForm(string textBox1)
{
if (textBox1 != "Enter text")
{
return "You entered: \"" + textBox1.ToString() + "\" at " +
DateTime.Now.ToLongTimeString();
}
return String.Empty;
}
Screenshots :
main vue loaded :
Vue SimpleAjax
after clicking on "update :
_result
So in some ways i do call the right view and display it, but i actually don't render it as an update, as expected.
I'm still novice in Razor, and developpement in general, but i like to understand when it doesn't work so i can fix it. I tried the easiest way to test these ajax calls, with different approaches.. and nothing seems to work for me at the moment.
I'm pretty sure it's juste me being dumb not seeing the evidence right before me.
So if anyone has any idea about how to fix it i'm trying to make an auto completion drop down list, with of course ajax call included, and i'm stuck here not able the achieve the easiest call ever.

Answer 1

Please, make sure you have installed and included in bundle jQuery Unobtrusive. (nuget package here: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Validation/). Also, make sure you've enabled client validation and unobtrusive javascript
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

Answer 2

I've replicated your app making the following modifications:
1) I've installed Microsoft.jQuery.Unobtrusive.Ajax and Microsoft.jQuery.Unobtrusive.Validation. In packages.config:
<package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.2.3" targetFramework="net461" />
<package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.2.3" targetFramework="net461" />
2) in _Layout.cshtml (make sure to include the js resources only once. also, make sure to have jqueryval befor jquery-unobtrusive):
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jquery-unobtrusive")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
3) In Bundle.Config I've added a bundle for the unobtrusive package:
bundles.Add(new ScriptBundle("~/bundles/jquery-unobtrusive")
.Include("~/Scripts/jquery.unobtrusive-ajax.js")
.Include("~/Scripts/jquery.validate.unobtrusive.js"));
4) in _result.cshtml I've added:
#{ Layout = null; }
It works without other modifications