MVC 4 Ajax.beginform提交 - 導致完全回發

Question

MVC4互聯網項目

我使用Ajax.BeginForm做驗證回發和回發整個頁面，而不僅僅是UpdateTargetID。我查看過其他文章，並沒有找到答案。我爲測試構建了一個新的MVC4 Internet項目（VS 2012已更新爲'ASP.NET和Web Tools 2012.2'）。

這裏是我的代碼

控制器

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> 

最初的觀點是：

送審後：送件後身體

的源代碼：

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

任何人都可以看到什麼是錯我的代碼？

謝謝。

Answer 1

UpdateTargetID的內容必須位於局部視圖中，並且需要從Controller Post Action調用局部視圖。 Darin通過電子郵件回覆我（謝謝Darin）。您需要使用部分視圖。我試着更新他的答案兩次，主持人沒有做到或提供瞭解釋，爲什麼我發佈自己的答案爲他人帶來好處。

_MyForm查看：

@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操作：

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

Answer 2

一對夫婦的事情，想到這可能會導致此行爲：

1. 在你的問題，你已經證明你的捆綁註冊，但你實際上包括他們在您的視圖或佈局？請確保您的視圖或佈局已首次列入jquery.js然後jquery.unobtrusive-ajax.js（按順序）：

   @Scripts.Render("~/bundles/jquery") 
   @Scripts.Render("~/bundles/jqueryval") 
   

2. 的jquery.unobtrusive-ajax.js腳本不使用jQuery 1.9和更高版本兼容，因爲它依賴於.live()這一直removed in jQuery 1.9。所以，如果由於某種原因，你已經升級你的jQuery版本到1.9或更高版本，將無法正常工作。你應該降級。

3. 在您的onSuccess回調中，如果控制器操作返回JSON，則您將重定向到url。你有沒有證實，情況並非如此？因爲當一個重定向發生使用window.location.href這是非常正常的，你得到一個完整的頁面重載，而不是局部更新

在所有情況下使用JavaScript調試工具，看看究竟發生了什麼。如果您使用的是Firefox，那麼您可以使用FireBug。如果您使用Google Chrome，則可以使用Chrome開發人員工具欄。查看控制檯，瞭解可能存在的JavaScript錯誤。查看網絡選項卡，查看是否所有JavaScript都已成功加載，並且您沒有404錯誤。學習如何使用工具來調試您的JavaScript代碼。您會驚訝地發現您的代碼中可能存在的潛在問題，這些工具將爲您提供多少信息。

Answer 3

使用：<script src="../Scripts/jquery.unobtrusive-ajax.js"></script>

這個js是什麼使阿哈x工作。

Answer 4

至少，你需要這兩個包括：

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryval") 

如果仍然沒有幫助，請在web.config中，並確保不顯眼的啓用：

<add key="UnobtrusiveJavaScriptEnabled" value="true" /> 

如果仍然沒有效果，確保不顯眼的js文件與當前的jQuery版本，無論jQuery的版本使用的是，它可以在以下網址找到兼容：

http://www.nuget.org/packages?q=unobtrusive

Answer 5

其他幾個要注意的事項。

1. jquery.unobtrusive-ajax.js現在支持JQuery 1.9。我已經安裝了jquery.unobtrusive-ajax.js版本3.0.0，它正在與jQuery 1.9

2.確保所有的div每日新聞正確關閉，包括其中包含Ajax.BeginForm和視圖主視圖。此外，如果你有@ Html.Raw（）在主視圖或包含Ajax.BeginForm謹慎對待，太多的視圖內。

張貼在這裏保存頭一天劃傷。

Answer 6

請確保你有你的包的配置包括此

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery.unobtrusive*", 
        "~/Scripts/jquery-{version}.js")); 

bundles.Add（新ScriptBundle（ 「〜/包/ jqueryval」）。包括（ 「〜/腳本/ jquery.validate *」） ）;