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

是否有在Asp.net MVC 3中使用

Ajax.BeginForm

的教程或代码示例，其中存在不引人注目的验证和Ajax

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

示例：

型号：

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

视图：

---

这可以通过。

Ajax表单使用Javascript异步工作来进一步增强。因此，需要加载脚本文件以执行。尽管这是一个小的性能折衷，但执行时不会回发

我们需要理解Html和Ajax表单行为之间的差异

阿贾克斯：

即使执行重定向操作（），也不会重定向表单

将异步执行保存、更新和任何修改操作

Html:

将重定向表单

将同步和异步执行操作（需要一些额外的代码和注意）

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

---

我最终让达林的解决方案发挥了作用，但首先犯了一些错误，导致了一个类似于David的问题（在达林解决方案下面的评论中），结果被发布到了一个新页面

因为在方法返回后，我必须对表单执行一些操作，所以我将其存储起来以供以后使用：

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

范例

//模型中

public class MyModel
{  
   [Required]
    public string Name{ get; set; }
}

//部分地 //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>

---

必须将ViewName和Model传递给RenderPartialViewToString方法。它将返回您在模型中应用的带有验证的视图，并将内容附加到Index.cshtml中的“targetId”div中。通过捕获局部视图的RenderHtml，可以应用验证

我认为所有的答案都忽略了一个关键点：

如果您使用Ajax表单以便它需要更新自身（而不是表单之外的另一个div），那么您需要将包含的div放在表单的外部。例如：

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

@使用（Ajax.BeginForm（“MyAction”、“MyController”），
新选择
{
HttpMethod=“POST”，
InsertionMode=InsertionMode.Replace，
UpdateTargetId=“目标”
}))
{
}

---

否则，您将以@David结尾，结果将显示在新页面中。

如果未执行数据验证，或内容总是在新窗口中返回，请确保以下三行位于视图顶部：

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

---

Darin Dimitrov的解决方案对我有效，只有一个例外。当我提交带有（有意）验证错误的部分视图时，我最终在对话框中返回了重复的表单：

要解决此问题，我必须将Html.BeginForm包装在一个div中：

<div id="myForm">
    @using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
    {
        //form contents
    }
</div>

---

在添加Ajax.BeginForm之前。 按上述顺序将以下脚本添加到项目中

jquery-1.7.1.min.js

jquery.unobtrusive-ajax.min.js

---

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

我同意使用jQUery for Ajax。我认为绝大多数Asp.net MVC Ajax应用程序都使用jQuery而不是内置的Ajax扩展。你知道为什么吗？是的，我也同意使用纯jQuery for ajax，使用MVC ajax扩展意味着您需要学习其他规则和语法，以便最终使用jQuery。因此，即使是我也需要编写更多的内容，但最好是以正确的方式编写，再加上您可以获得更多的控制和灵活性。@darin dimitrov：当我尝试后一个示例时，我必须向ajax（）调用添加数据：$（'form'）.serialize（）。否则，不会传递任何表单数据，并且我的模型在服务器端无效。不知道我是否忽略了什么？@DarinDimitrov如果BLL出现错误，您需要将模型发送回视图并显示错误消息，因为硬化层对数据进行了更深入的验证并发现了问题，该怎么办。仅仅依靠客户端验证是不够的。不能返回视图（模型）；现在因为整个视图在结果div中渲染。。。解决方法是什么？这是因为表单变量已将其设置为

jQuery

对象，并使用表单作为选择器<代码>表单[0]将具有这些属性。在任何

jQuery

变量前面加上

$

前缀也是一种很好的做法，这样可以更容易地识别它们。David的问题几乎总是因为没有包含不引人注目的ajax代码的jqueryval包而引起的。对你发布的这个方法要非常小心，否则你会得到一个帖子，然后你的表单会被冲洗掉，因为你刚刚替换了它。然后，您需要“MyAction”视图来管理其表单并重新指定其中的所有ajax选项。在我的应用程序中，目标div显示整个表单和母版页，请帮助我，我没有将

UnobtrusiveJavaScriptEnabled

设置为true，我也遇到了相同的错误。我正在使用

局部视图

来呈现索引页下方的create函数。我可以在部分视图中获取所有验证消息。但是当

创建

成功时，索引将显示两次。我的索引视图中没有

Html.BeginForm

。请尝试使用

UpdateTargetId=“myForm”

instedi在解决方案中找不到它们。我必须从Nuget软件包管理器安装它们

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

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

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

<div id="myForm">
    @using (Html.BeginForm("CreateDialog", "SupportClass1", FormMethod.Post, new { @class = "form-horizontal" }))
    {
        //form contents
    }
</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;
    });
});