将 Ajax.BeginForm 与 ASP.NET MVC 3 Razor 一起使用
Posted
技术标签:
【中文标题】将 Ajax.BeginForm 与 ASP.NET MVC 3 Razor 一起使用【英文标题】:Using Ajax.BeginForm with ASP.NET MVC 3 Razor 【发布时间】:2011-07-21 13:41:28 【问题描述】:是否有在 Asp.net MVC 3 中使用 Ajax.BeginForm
的教程或代码示例,其中存在不显眼的验证和 Ajax?
对于 MVC 3,这是一个难以捉摸的话题,我似乎无法让我的表单正常工作。它将执行 Ajax 提交,但忽略验证错误。
【问题讨论】:
【参考方案1】:例子:
型号:
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进一步增强。
【讨论】:
我同意将 jQUery 用于 Ajax。我认为绝大多数 Asp.net MVC Ajax 应用程序宁愿使用 jQuery 而不是内置的 Ajax 扩展。 我正在使用类似以下的内容,结果似乎会转到它自己的页面,而不仅仅是替换 div 结果。你知道为什么吗? 是的,我也同意将纯jQuery 用于ajax,使用MVC ajax 扩展意味着您无需学习其他规则和语法,最终使用jQuery。所以即使我需要写更多,但最好以正确的方式写,另外你可以获得更多的控制和灵活性。 @darin-dimitrov:当我尝试您的后一个示例时,我必须在 ajax() 调用中添加数据:$('form').serialize()。否则,不会传递任何表单数据,并且我的模型在服务器端无效。想知道我是否忽略了什么? @DarinDimitrov 如果 BLL 出现错误并且您需要将模型发送回视图并显示错误消息怎么办,因为强化层对数据提供了更深入的验证并发现了问题。仅仅依靠客户端验证是不够的。你不能返回 View(model);现在因为整个视图都呈现在结果 div 中......解决方法是什么?【参考方案2】:Ajax 表单使用 Javascript 异步工作。因此,需要加载脚本文件以执行。尽管这是一个小的性能折衷,但执行不会回发。
我们需要了解 Html 和 Ajax 表单行为的区别。
阿贾克斯:
不会重定向表单,即使您执行 RedirectAction()。
将异步执行保存、更新和任何修改操作。
HTML:
将重定向表单。
将同步和异步执行操作(需要一些额外的代码和注意事项)。
在下面的链接中展示了与 POC 的差异。 Link
【讨论】:
【参考方案3】:我最终得到了 Darin 的解决方案,但首先犯了一些错误,导致出现类似于 David(在 Darin 的解决方案下方的 cmets 中)的问题,结果被发布到新页面。
因为在方法返回后我必须对表单做一些事情,所以我将它存储起来以备后用:
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.
);
【讨论】:
那是因为你设置了表单变量jQuery
对象,表单作为选择器。 form[0]
将具有这些属性。最好在任何 jQuery
变量前加上 $
前缀,以便更轻松地识别它们。【参考方案4】:
例子
//在模型中
public class MyModel
[Required]
public string Name get; set;
//在部分视图中 //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 可以应用验证。
【讨论】:
【参考方案5】:我认为所有的答案都漏掉了一个关键点:
如果您使用 Ajax 表单以便它需要更新自身(而不是表单之外的另一个 div),那么您需要将包含的 div OUTSIDE 放在表单中。例如:
<div id="target">
@using (Ajax.BeginForm("MyAction", "MyController",
new AjaxOptions
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "target"
))
<!-- whatever -->
</div>
否则你会像@David一样结束,结果显示在新页面中。
【讨论】:
David 的问题几乎总是由于不包含包含不显眼的 ajax 代码的 jqueryval 包引起的。对您发布的这种方法要非常小心,否则您会收到一个帖子,然后您的表单会因为您刚刚替换它而被冲洗掉。然后,您需要“MyAction”视图来管理其表单并重新指定其中的所有 ajax 选项。 在我的应用程序目标 div 中显示带有母版页的整个表单,请帮助我 对我来说,我没有在任何地方将UnobtrusiveJavaScriptEnabled
设置为 true【参考方案6】:
如果没有执行数据验证,或者内容总是在新窗口中返回,请确保这 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>
【讨论】:
我没有在解决方案中找到它们。我必须从 Nuget 包管理器安装它们【参考方案7】:Darin Dimitrov 的解决方案对我有用,但有一个例外。当我提交带有(故意)验证错误的部分视图时,我最终在对话框中返回了重复的表单:
为了解决这个问题,我必须将 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"
【参考方案8】:
在添加 Ajax.BeginForm 之前。 按照提到的顺序将以下脚本添加到您的项目中,
-
jquery-1.7.1.min.js
jquery.unobtrusive-ajax.min.js
只有这两个就足够执行Ajax操作了。
【讨论】:
以上是关于将 Ajax.BeginForm 与 ASP.NET MVC 3 Razor 一起使用的主要内容,如果未能解决你的问题,请参考以下文章
ASP.NET MVC 3 - Ajax.BeginForm 与 jQuery 表单插件
form表单和ajax表单提交(Html.BeginForm()Ajax.BeginForm())的差别
通过 ActionLink 提交 Ajax.BeginForm