将Ajax.BeginForm与ASP.NET MVC 3 Razor一起使用

Question

是否存在Ajax.BeginForm在Asp.net MVC 3中使用的教程或代码示例,其中存在不显眼的验证和Ajax？

对于MVC 3来说,这是一个难以捉摸的话题,我似乎无法让我的表单正常工作.它将执行Ajax提交但忽略验证错误.

Answer 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表单插件进一步增强.

Answer 2

我认为所有答案都错过了一个关键点:

如果您使用Ajax表单以便它需要自己更新(而不是表单之外的另一个div),那么您需要将表单的包含div OUTSIDE.例如:

 <div id="target">
 @using (Ajax.BeginForm("MyAction", "MyController",
            new AjaxOptions
            {
                HttpMethod = "POST",
                InsertionMode = InsertionMode.Replace,
                UpdateTargetId = "target"
            }))
 {
      <!-- whatever -->
 }
 </div>

否则,您将像@David一样结束,其中结果显示在新页面中.

Answer 3

我最终得到了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.
    }
});

Answer 4

如果未执行数据验证，或者内容始终在新窗口中返回，请确保以下 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>

Answer 5

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;
    });
});