在ASP.NET MVC 3 Razor中使用Ajax.BeginForm
是否有一个教程或代码示例在Asp.net MVC 3中使用Ajax.BeginForm ，其中不显眼的验证和Ajax存在？
对于MVC 3来说，这是一个难以捉摸的话题，我似乎无法让我的表单正常工作。 它将执行Ajax提交，但会忽略验证错误。
例：
模型：
public class MyViewModel
{
[Required]
public string Foo { get; set; }
}
控制器：
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("Thanks", "text/html");
}
}
视图：
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result" }))
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}
这里有一个更好的（以我的观点来看）例子：
视图：
@model AppName.Models.MyViewModel
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/index.js")" type="text/javascript"></script>
<div id="result"></div>
@using (Html.BeginForm())
{
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
<input type="submit" value="OK" />
}
index.js ：
$(function () {
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#result').html(result);
}
});
}
return false;
});
});
这可以通过jQuery表单插件进一步增强。
我认为所有的答案都错过了一个关键点：
如果您使用Ajax表单，以便它需要自行更新（而不是表单外的另一个div），那么您需要将包含的div放在表单的外部 。 例如：
<div id="target">
@using (Ajax.BeginForm("MyAction", "MyController",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "target"
}))
{
<!-- whatever -->
}
</div>
否则，您将以@David结尾，其结果显示在新页面中。
我最终得到了Darin的解决方案，但首先犯了一些错误，导致类似David的问题（在Darin的解决方案中的评论中），结果发布到新页面。
因为在返回方法之后我必须对表单做些事情，所以我将它存储起来供以后使用：
var form = $(this);
但是，这个变量没有在ajax调用中使用的“action”或“method”属性。
$(document).on("submit", "form", function (event) {
var form = $(this);
if (form.valid()) {
$.ajax({
url: form.action, // Not available to 'form' variable
type: form.method, // Not available to 'form' variable
data: form.serialize(),
success: function (html) {
// Do something with the returned html.
}
});
}
event.preventDefault();
});
相反，您需要使用“this”变量：
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (html) {
// Do something with the returned html.
}
});