MVC 4 Ajax.beginform提交 - 导致完全回发 [英] MVC 4 Ajax.beginform submit - causes full postback

问题描述

MVC4互联网项目

我使用Ajax.BeginForm做回发时使用验证，这回发整个页面，而不仅仅是UpdateTargetID。我看了上的其他职务，并没有找到答案。我已经建立了一个新的MVC4互联网项目只是用于测试（VS 2012已经更新了ASP.NET和Web工具2012.2'）

I'm using Ajax.BeginForm to do a Postback with validation and it posts back the entire page rather than just the UpdateTargetID. I've looked at other posts on SO and haven't found the answer. I've built a new MVC4 Internet project just for testing (VS 2012 has been updated with 'ASP.NET and Web Tools 2012.2').

下面是我的code

控制器

public ActionResult Index() 
{
  var vM = _db.Students.FirstOrDefault(); return View(vM);
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(Student vM)
{
  if (ModelState.IsValid)
  { //code if Model valid
    return Json(new { url = Url.Action("About", "Controller") });
  }
  ModelState.AddModelError(string.Empty, "AJAX Post");
  return PartialView("Index", vM);
}

查看

@model AJAX_Test.Models.Student
@{ ViewBag.Title = "Student"; }
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">  var onSuccess = function (result)
{
  if (result.url) { window.location.href = result.url; } 
}
  // when server returns JSON object containing an url property redirect the browser    </script>
<h1>@ViewBag.Title</h1>
<div id="IDXForm">
@using (Ajax.BeginForm("Index", new AjaxOptions() { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess", HttpMethod = "Post" }))
{   
  @Html.AntiForgeryToken() @Html.ValidationSummary(true) 
  <span>@Html.EditorFor(m => m.FirstName) @Model.EnrollmentDate.ToShortDateString()</span> <input type="submit" value="Submit" />                   
}
</div>

最初的看法是：

The initial view is:

提交文件后：

After Submittal:

来源$ C ​​$ C身体提交后：

Source code for body after submittal:

        <div id="body">

            <section class="content-wrapper main-content clear-fix">

<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">  var onSuccess = function (result) { if (result.url) { window.location.href = result.url; } }
  // when server returns JSON object containing an url property redirect the browser </script>
<h1>Student</h1>
<div id="IDXForm">
<form action="/" data-ajax="true" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-success="onSuccess" data-ajax-update="#IDXForm" id="form0" method="post"><input name="__RequestVerificationToken" type="hidden" value="vkCszJu-fKT6zUr5ys2StOTPF6a9pZdj5k1MyaAZKo8MPweS53dUuni0C9B17NjL_GVydHa7-jI1H0F9HrYEdKxeCWq9mCeER3ebaZYLxIs1" /><span><input class="text-box single-line" id="FirstName" name="FirstName" type="text" value="Carson" /> 9/1/2005</span> <input type="submit" value="Submit" />                                                                                                     
</form></div>

有人能看到什么是错我的code？

Can anyone see what is wrong with my code?

感谢您。

推荐答案

在UpdateTargetID的内容必须是一个局部视图和局部视图需要从控制器POST操作调用。达林回答我通过电子邮件（谢谢你，达林）。您需要使用一个parital视图。我试过两次更新自己的答案，主持人还没有做，或提供为什么那么我张贴我自己的答案为他人受益的解释。

The contents of the UpdateTargetID must be in a partial view and that partial view needs to be called from the Controller Post Action. Darin answered me through e-mail (thank you Darin). You need to use a parital view. I've tried to update his answer twice and the moderators have not done it or provided an explanation why so I'm posting my own answer for others benefit.

_MyForm查看：

_MyForm View:

@model AJAX_Test.Models.Student

@using (Ajax.BeginForm("Index", new AjaxOptions { UpdateTargetId = "IDXForm", OnSuccess = "onSuccess" }))
{   
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 
    <span>
        @Html.EditorFor(m => m.FirstName)              @Model.EnrollmentDate.ToShortDateString()
    </span> 
    <input type="submit" value="Submit" />                                                                                                     
}

主视图：

<div id="IDXForm">
    @Html.Partial("_MyForm")
</div>

控制器POST操作：

Controller Post Action:

  ModelState.AddModelError(string.Empty, "AJAX Post");
  return PartialView("_MyForm", vM);

这篇关于MVC 4 Ajax.beginform提交 - 导致完全回发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！