asp.net-mvc 在 ASP.NET MVC 3 Razor 中使用 Ajax.BeginForm
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5410055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Ajax.BeginForm with ASP.NET MVC 3 Razor
提问by JBeckton
Is there a tutorial or code example of using Ajax.BeginFormwithin Asp.net MVC 3 where unobtrusive validation and Ajax exist?
是否有Ajax.BeginForm在不显眼的验证和 Ajax 存在的 Asp.net MVC 3 中使用的教程或代码示例？
This is an elusive topic for MVC 3, and I cannot seem to get my form to work properly. It will do an Ajax submit but ignores the validation errors.
这是 MVC 3 难以捉摸的话题，我似乎无法让我的表单正常工作。它将执行 Ajax 提交但忽略验证错误。
回答by Darin Dimitrov
Example:
例子：
Model:
模型：
public class MyViewModel
{
[Required]
public string Foo { get; set; }
}
Controller:
控制器：
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new MyViewModel());
}
[HttpPost]
public ActionResult Index(MyViewModel model)
{
return Content("Thanks", "text/html");
}
}
View:
看法：
@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" />
}
and here's a better (in my perspective) example:
这是一个更好的（在我看来）示例：
View:
看法：
@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:
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;
});
});
which can be further enhanced with the jQuery form plugin.
可以通过jQuery 表单插件进一步增强。
回答by Dror
I think that all the answers missed a crucial point:
我认为所有的答案都忽略了一个关键点：
If you use the Ajax form so that it needs to update itself (and NOT another div outside of the form) then you need to put the containing div OUTSIDEof the form. For example:
如果您使用Ajax的形式，使得它需要更新本身（而不是形式的另一个DIV之外），那么你需要把包含div OUTSIDE形式。例如：
<div id="target">
@using (Ajax.BeginForm("MyAction", "MyController",
new AjaxOptions
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "target"
}))
{
<!-- whatever -->
}
</div>
Otherwise you will end like @David where the result is displayed in a new page.
否则，您将像@David 一样结束，结果将显示在新页面中。
回答by Jason
I got Darin's solution working eventually but made a few mistakes first which resulted in a problem similar to David (in the comments below Darin's solution) where the result was posting to a new page.
我最终让 Darin 的解决方案起作用，但首先犯了一些错误，导致出现类似于 David（在 Darin 解决方案下方的评论中）的问题，结果发布到新页面。
Because I had to do something with the form after the method returned, I stored it for later use:
因为方法返回后我不得不对表单做一些事情，所以我将它存储起来以备后用：
var form = $(this);
However, this variable did not have the "action" or "method" properties which are used in the ajax call.
但是，此变量没有在 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();
});
Instead you need to use the "this" variable:
相反，您需要使用“this”变量：
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (html) {
// Do something with the returned html.
}
});
回答by steveareeno
Darin Dimitrov's solution worked for me with one exception. When I submitted the partial view with (intentional) validation errors, I ended up with duplicate forms being returned in the dialog:
Darin Dimitrov 的解决方案对我有用，但有一个例外。当我提交带有（有意的）验证错误的部分视图时，我最终在对话框中返回了重复的表单：
To fix this I had to wrap the Html.BeginForm in a div:
为了解决这个问题，我必须将 Html.BeginForm 包装在一个 div 中：
<div id="myForm">
@using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
{
//form contents
}
</div>
When the form was submitted, I cleared the div in the success function and output the validated form:
当表单提交时，我清除了成功函数中的 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;
});
});
回答by cheny
If no data validation excuted, or the content is always returned in a new window, make sure these 3 lines are at the top of the view:
如果没有执行数据验证，或者内容总是在新窗口中返回，请确保这 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>
回答by Shivkumar
Example
例子
//In Model
//在模型中
public class MyModel
{
[Required]
public string Name{ get; set; }
}
//In PartailView //PartailView.cshtml
//在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>
In Index.cshtml view
在 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>
}
In Controller
在控制器中
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();
}
}
you must be pass ViewName and Model to RenderPartialViewToString method. it will return you view with validation which are you applied in model and append the content in "targetId" div in Index.cshtml. I this way by catching RenderHtml of partial view you can apply validation.
您必须将 ViewName 和 Model 传递给 RenderPartialViewToString 方法。它将返回您在模型中应用的带有验证的视图，并将内容附加到 Index.cshtml 的“targetId”div 中。我通过这种方式捕获部分视图的 RenderHtml，您可以应用验证。
回答by user1080810
Ajax forms work asynchronously using Javascript. So it is required, to load the script files for execution. Even though it's a small performance compromise, the execution happens without postback.
Ajax 表单使用 Javascript 异步工作。所以需要加载脚本文件来执行。即使这是一个小的性能妥协，执行也不会回发。
We need to understand the difference between the behaviours of both Html and Ajax forms.
我们需要了解 Html 和 Ajax 形式的行为之间的区别。
Ajax:
阿贾克斯：
Won't redirect the form, even you do a RedirectAction().
Will perform save, update and any modification operations asynchronously.
不会重定向表单，即使您执行 RedirectAction()。
将异步执行保存、更新和任何修改操作。
Html:
网址：
Will redirect the form.
Will perform operations both Synchronously and Asynchronously (With some extra code and care).
将重定向表单。
将同步和异步执行操作（需要一些额外的代码和注意）。
Demonstrated the differences with a POC in below link. Link
在下面的链接中演示了与 POC 的差异。 关联
回答by Balaji Dinakaran
Prior to adding the Ajax.BeginForm. Add below scripts to your project in the order mentioned,
在添加 Ajax.BeginForm 之前。按照提到的顺序将以下脚本添加到您的项目中，
- jquery-1.7.1.min.js
- jquery.unobtrusive-ajax.min.js
- jquery-1.7.1.min.js
- jquery.unobtrusive-ajax.min.js
Only these two are enough for performing Ajax operation.
仅这两个就足以执行 Ajax 操作。
