我正在使用Razor创建一个新项目asp.net mvc3,并希望将LogOn转换为ajax请求。
的HTML
@using (Ajax.BeginForm("LogOn", "Account", new AjaxOptions { HttpMethod="post", OnSuccess="LoginSubmitted"})) { }
控制者
if (Request.IsAjaxRequest()) { return Json(new { ResultMessage = "Username or password provided is incorrect"}); } else { ModelState.AddModelError("", "The user name or password provided is incorrect."); }
其他所有内容保持不变。
首先,用Fiddler查看http响应,我注意到没有x-requested-with标头。所以我加
<input type="hidden" name="X-Requested-With" value="XMLHttpRequest" />
这似乎可行,但是现在我收到的是一个Json对象,该对象没有被解析,而是Google Chrome通过发送回一个application / json文档将Json渲染到屏幕上。所有脚本均已就绪。
我也这样做了:
@using (Ajax.BeginForm("Submit", "home", new AjaxOptions { HttpMethod = "Post", OnSuccess="LoginSubmitted"})) { } @section head { <script type="text/javascript"> function LoginSubmitted(res) { alert(res.Message); } </script> } public ActionResult Submit(string id) { if (Request.IsAjaxRequest()) { return Json(new { Message = "Logged In" } ); } else { return View(); } }
以我自己的创作形式,使用标准助手可以很好地工作。
发生了什么?
这是因为默认情况下,ASP.NET MVC 3使用jQuery和不引人注目的AJAX而不是MicrosoftAjax *库。这意味着在编写时,Ajax.BeginForm您需要在页面中包括适当的脚本:
Ajax.BeginForm
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
并在您的web.config中确保您启用了兼容的JavaScript:
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
现在,您可以放心地丢弃MicrosoftAjax*页面上的所有脚本引用(如果有的话),它们将不再使用。
MicrosoftAjax*
有人这样说,我从未使用过任何Ajax.*帮助者。我总是喜欢控制。所以我会写:
Ajax.*
@using (Html.BeginForm("LogOn", "Account")) { }
然后使用jquery表单插件 AJAXify此表单:
$(function() { $('form').ajaxForm(function(result) { alert('form successfully submitted'); }); });