将 Ajax.BeginForm 与 ASP.NET MVC 3 Razor 一起使用
是否有在 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 form plugin 进一步增强。
我认为所有的答案都错过了一个关键点：
如果您使用 Ajax 表单以便它需要更新自身（而不是表单之外的另一个 div），那么您需要将包含的 div 放在表单的外面。例如：
<div id="target">
@using (Ajax.BeginForm("MyAction", "MyController",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "target"
}))
{
<!-- whatever -->
}
</div>
否则，您将像@David 一样结束，结果将显示在新页面中。
UnobtrusiveJavaScriptEnabled 设置为 true
我最终得到了 Darin 的解决方案，但首先犯了一些错误，导致出现类似于 David 的问题（在 Darin 的解决方案下方的评论中），结果被发布到新页面。
因为我必须在方法返回后对表单做一些事情，所以我将它存储起来以备后用：
var form = $(this);
但是，此变量没有 ajax 调用中使用的“动作”或“方法”属性。
$(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.
}
});
jQuery 对象，其中表单作为选择器。 form[0] 将具有属性。为任何 jQuery 变量添加前缀 $ 也是一种很好的做法，以便更轻松地识别它们。
Darin Dimitrov 的解决方案对我有用，但有一个例外。当我提交带有（有意的）验证错误的部分视图时，我最终在对话框中返回了重复的表单：
https://i.stack.imgur.com/2Tddt.png
为了解决这个问题，我必须将 Html.BeginForm 包装在一个 div 中：
<div id="myForm">
@using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
{
//form contents
}
</div>
表单提交后，我清除了success函数中的div，输出了验证后的表单：
$('form').submit(function () {
if ($(this).valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
$('#myForm').html('');
$('#result').html(result);
}
});
}
return false;
});
});
Partial Views 在索引页面下方呈现创建函数。我可以在部分视图中获取所有验证消息。但是当 Create 成功时，索引会显示两次。我的索引视图中没有 Html.BeginForm。
UpdateTargetId = "myForm"
如果没有执行数据验证，或者内容总是在新窗口中返回，请确保这 3 行位于视图顶部：
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
例子
//在模型中
public class MyModel
{
[Required]
public string Name{ get; set; }
}
//在ParttailView中 //ParttailView.cshtml
@model MyModel
<div>
<div>
@Html.LabelFor(model=>model.Name)
</div>
<div>
@Html.EditorFor(model=>model.Name)
@Html.ValidationMessageFor(model => model.Name)
</div>
</div>
在 Index.cshtml 视图中
@model MyModel
<div id="targetId">
@{Html.RenderPartial("PartialView",Model)}
</div>
@using(Ajax.BeginForm("AddName", new AjaxOptions { UpdateTargetId = "targetId", HttpMethod = "Post" }))
{
<div>
<input type="submit" value="Add Unit" />
</div>
}
在控制器中
public ActionResult Index()
{
return View(new MyModel());
}
public string AddName(MyModel model)
{
string HtmlString = RenderPartialViewToString("PartailView",model);
return HtmlString;
}
protected string RenderPartialViewToString(string viewName, object model)
{
if (string.IsNullOrEmpty(viewName))
viewName = ControllerContext.RouteData.GetRequiredString("action");
ViewData.Model = model;
using (StringWriter sw = new StringWriter())
{
ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
return sw.GetStringBuilder().ToString();
}
}
您必须将 ViewName 和 Model 传递给 RenderPartialViewToString 方法。它将返回您在模型中应用的带有验证的视图，并将内容附加到 Index.cshtml 的“targetId”div 中。我这样通过捕获部分视图的 RenderHtml 可以应用验证。
Ajax 表单使用 Javascript 异步工作。因此，需要加载脚本文件以执行。尽管这是一个小的性能折衷，但执行不会回发。
我们需要了解 Html 和 Ajax 表单的行为之间的区别。
阿贾克斯：
即使您执行 RedirectAction()，也不会重定向表单。将异步执行保存、更新和任何修改操作。
html:
将重定向表单。将同步和异步执行操作（需要一些额外的代码和注意）。
在下面的链接中演示了与 POC 的差异。 Link
在添加 Ajax.BeginForm 之前。按照提到的顺序将以下脚本添加到您的项目中，
jquery-1.7.1.min.js jquery.unobtrusive-ajax.min.js
仅这两个就足以执行 Ajax 操作。
