I have been googling/SO:ing this issue for a while and many seem to be sharing this, but I haven't found any successful solution to my problem.
Using MVC3 and Razor.
Master page contains:
<script src="@Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>
AjaxTest.cshtml contains:
<div id="AjaxTestDiv">content</div>
@Ajax.ActionLink("Update", "AjaxTester", new AjaxOptions { UpdateTargetId = "AjaxTestDiv" })
AjaxTester action method:
public string AjaxTester() { if (Request.IsAjaxRequest()) { return DateTime.Now.ToString(); } else { return "FAIL"; } }
I always get the "FAIL" returned, to a blank page, not in the targeted div.
Edit: Also note that if I remove the if (Request.IsAjaxRequest()), I still don't get back anything to the targeted div, but instead a blank page.
Edit2: Looking at the HTML generated, this is my link:
<a data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace"
data-ajax-update="#AjaxTestDiv" href="/Area/AjaxTester">Update</a>
Have tried switching the method to GET, to no avail.
By default ASP.NET MVC 3 uses unobtrusive jquery with all the Ajax.*
helpers. So start by getting rid off all MicrosoftAjax scripts (this useless c**p) and put the following instead:
<script src="@Url.Content("~/Scripts/jquery-1.5.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
and then simply activate unobtrusive AJAX in your web.config (if not already done):
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
Now jquery is going to unobtrusively AJAXify all the links containing those HTML 5 data-*
attributes.
Or even better IMHO:
In your view simply:
@Html.ActionLink("Update", "AjaxTester", new { id = "mylink" })
and in a separate javascript file AJAXify this anchor:
$(function() {
$('#mylink').click(function() {
$('#AjaxTestDiv').load(this.href);
return false;
});
});
Another IE-specific issue that can keep ActionLink from functioning correctly is covered here: ASP.NET MVC - Prevent Cache on Ajax.ActionLinks
Basically, IE sometimes caches Ajax GET requests, so setting the AjaxOption's HttpMethod to POST is a less fragile way to construct an ActionLink:
@Ajax.ActionLink(
item.Name + " (Ajax link test)",
"MyActionName",
routeValues: new { id = item.Id },
ajaxOptions: new AjaxOptions()
{
UpdateTargetId = "divToUpdate",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST"
})
For those still facing this issue:
You should have below files in your project somewhere:
If not, below is the nuget package, either download this from nuget manager in your visual studio project or package manager console: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Validation/3.2.11/
Give reference of above added file after the jquery.min.js latest version in either your respective view or layout file:
If not, below is the nuget package, either download this from nuget manager in your visual studio project or package manager console: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Validation/3.2.11/
This advice sent me on the wrong track. After several painfull debugging tries I found that this is a wronk package.
Correct link: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/3.2.6
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.