将 Ajax.BeginForm 与 A​​SP.NET MVC 3 Razor 一起使用

Posted 2023-02-19

【中文标题】将 Ajax.BeginForm 与 A​​SP.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操作了。