Question

是否有在Asp.net MVC 3中使用Ajax.BeginForm的教程或代码示例，其中存在不引人注意的验证和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 form plugin进一步增强。

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

达林迪米特洛夫的解决方案对我有用，只有一个例外。当我提交带有（故意）验证错误的局部视图时，我最终在对话框中返回了重复的表单：

enter image description here

要解决此问题，我必须将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;
    });
});

Answer 5

如果没有执行任何数据验证，或者内容总是在新窗口中返回，请确保这三行位于视图的顶部：

<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 6

Ajax表单使用Javascript异步工作。因此，需要加载脚本文件以供执行。即使这是一个小的性能折衷，执行也没有回发。

我们需要了解Html和Ajax表单行为之间的区别。

的Ajax：

即使您执行RedirectAction（），也不会重定向表单。
将异步执行保存，更新和任何修改操作。

HTML：

将重定向表单。
将同步和异步执行操作（使用一些额外的代码和小心）。

在下面的链接中显示了与POC的差异。 Link

Answer 7

实施例

//在模型中

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你可以应用验证。

Answer 8

在添加Ajax.BeginForm之前。按照提及的顺序将以下脚本添加到项目中

的jquery-1.7.1.min.js
jquery.unobtrusive-ajax.min.js

只有这两个足以执行Ajax操作。

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

8 个答案: