将Ajax.BeginForm与ASP.NET MVC 3 Razor一起使用
Answers:
例：
模型：
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表单插件进一步增强。
41
我同意将jQUery用于Ajax。我认为绝大多数Asp.net MVC Ajax应用程序宁愿使用jQuery，也不使用内置的Ajax扩展。
—
罗伯特·科里特尼克
我正在使用类似以下内容的方法，并且结果似乎将转到其自己的页面，而不仅仅是替换div结果。你知道为什么吗？
—
大卫，
是的，我也同意将纯jQuery用于Ajax，使用MVC ajax扩展意味着您需要不必要地学习其他规则和语法，最后才能使用jQuery。因此，即使我需要编写更多内容，但最好以正确的方式进行操作，另外您还可以获得更多的控制权和灵活性。
—
内斯特
@ darin-dimitrov：当我尝试后面的示例时，必须向ajax（）调用添加数据：$（'form'）。serialize（）。否则，将不传递任何表单数据，并且我的模型在服务器端无效。想知道是否有我忽略的事情？
—
布雷特
@DarinDimitrov如果BLL出现错误，您需要将模型发送回View并显示错误消息，这是因为强化层对数据进行了更深入的验证并发现了问题。仅仅依靠客户端验证是不够的。您不能返回View（model）; 现在，因为整个视图都在结果div中呈现出来...解决方法是什么？
—
CD Smith
我认为所有答案都错过了关键点：
如果您使用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选项。
—
Adam Tuliper-MSFT
在我的有针对性的div与母版页一起显示整个表单的情况下，请帮助我
—
Nitin ...
对我来说，我在
—
Kunal
UnobtrusiveJavaScriptEnabled任何地方都没有实现过真实
我最终让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.
}
});
这是因为您已将form变量设置为
—
詹姆斯·南
jQuery以form为选择器的对象。form[0]将具有属性。最好在jQuery变量前加上前缀，$以更轻松地识别它们。
Darin Dimitrov的解决方案为我工作，但有一个例外。当我提交带有（故意）验证错误的部分视图时，最终在对话框中返回了重复的表单：
要解决此问题，我必须将Html.BeginForm包装在div中：
<div id="myForm">
@using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
{
//form contents
}
</div>
提交表单后，我在成功函数中清除了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;
});
});
我也遇到同样的错误。我
—
维尼2015年
Partial Views用来在索引页面下呈现create函数。我可以在部分视图中获取所有验证消息。但是，Create成功完成后，索引将显示两次。Html.BeginForm我的索引视图中没有。
尝试
—
Kunal，
UpdateTargetId = "myForm"改用
如果没有进行数据验证，或者总是在新窗口中返回内容，请确保以下三行位于视图顶部：
<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软件包管理器中安装它们-FindOut_Quran
—
2016年
例
//在模型中
public class MyModel
{
[Required]
public string Name{ get; set; }
}//在PartailView中//PartailView.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.BeginForm之前。按照上述顺序将以下脚本添加到您的项目中，
- jquery-1.7.1.min.js
- jquery.unobtrusive-ajax.min.js
仅这两个就足以执行Ajax操作。