[英]MVC4 Ajax.BeginForm not replacing UpdateTargetId
關於Ajax.BeginForm的問題有很多關於使用返回局部視圖正確更新目標元素的問題:
mvc4 ajax更新同一頁面
ASP.NET MVC 4 - Ajax.BeginForm和html5
MVC 4(剃須刀) - 控制器返回部分視圖,但整個頁面正在更新
MVC 4 Ajax沒有更新頁面中的PartialView
但是,所有這些都可以通過手動寫出jQuery ajax或包含丟失的javascript文件來解決。
@using (Ajax.BeginForm("PostcardDetails", new AjaxOptions()
{
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "details"
}))
{
<div id="PostcardSearchResults">
@{Html.RenderAction("PostcardSearchResults", Model);}
</div>
}
<div id="details">
</div>
相關控制器代碼:
[AcceptVerbs(HttpVerbs.Post | HttpVerbs.Get)]
public ActionResult PostcardSearchResults(PostcardSearchFilter filter)
{
PostcardSearchResults model = new PostcardSearchResults(filter);
return PartialView("_PostcardSearchResults", model);
}
在我的布局中,我引用了這些jQuery文件。 此外,我已經驗證頁面正在輸出正確的路徑,並且它找到了正確的文件。 我試過切換unobtrusive-ajax.min.js
和validate.min.js
的順序,但沒有成功。
<script type="text/javascript" src="@Url.Content("~/Scripts/globalize.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.10.0.custom.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
此外,在我的網站的根web.config和我的View文件夾中的web.config中,我包括:
<add key="webpages:Version" value="2.0.0.0"/>
<add key="PreserveLoginUrl" value="true"/>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
我不知道還有什么地方可以看。 沒有拋出javascript錯誤,控制器被正確命中,返回PartialViewResult。 HTML中的Form元素填充了所有正確的data-
屬性。
沒有與jquery.unobtrusive-ajax.min和JQuery 1.9因為jQuery 1.9不支持直播()方法的任何一個問題, 更 。 所以你應該使用JQuery migrate插件,並引用JQuery migrate js。
確保將unobtrusive-ajax.js包含在您放置了ajax表單的頁面中。
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
我遇到了這個問題,我剛從NuGet安裝了最新的不顯眼的軟件包並解決了這個問題
PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax
需要JQ 1.8+
我遇到了類似的問題 - 我已將所有腳本捆綁並正確加載,並且所有代碼都已正確實現。 我檢查了包管理器以查看是否需要更新任何腳本以及jQuery和jquery.unobtrusive-ajax。 jQuery從1.9升到1.9.1。 當我重建我的解決方案時,目標DIV已成功更新。 嘗試並更新解決方案中的所有JS,它可能會起作用。
以下內容需要在任何使用ajax的頁面上。
@section Script {
@Scripts.Render("~/bundles/jqueryval")
}
我不知道是否有其他人會碰到這個,但就我而言,它似乎只是沒有更新。 我正在構建一個簡單的編輯表單,您可以從下拉列表中選擇要編輯的項目,單擊按鈕,AJAX會為所選項目加載編輯表單。
它是第一次工作,但在更改我在下拉列表中的選擇,然后單擊按鈕后,沒有任何表單值發生更改,即使我驗證了我的服務器端代碼正在將新項目加載到視圖模型中。 所以看來替換不起作用。 在單步執行jquery.unobtrisive-ajax.js之后,我發現它正在替換我的目標元素的內容,只是使用了已經擁有的相同視圖標記,這與傳遞給視圖的模型不匹配!
就在我意識到的時候,正是ModelState
讓我ModelState
。 我第二次點擊加載按鈕,它提交了我的下拉選擇,但也提交了我填寫的編輯表單。 編輯表單中的所有值都添加到ModelState
(如您所料)。 然后,我的控制器代碼將所提交的視圖模型(從編輯表單值創建的模型綁定器)替換為所選下拉值的視圖模型,並將其傳遞給局部視圖。 但是,局部視圖使用了一堆Html.[X]For
輔助方法。 這些忽略更新的視圖模型並直接從ModelState
提取它們的值。 例如:
@Html.DisplayFor(m => m.Name)
@Model.Name
將為Name顯示兩個不同的值; 前者顯示提交的名稱,后者顯示更新的名稱。 這是允許MVC在(服務器端)驗證錯誤之后記住用戶的表單條目的機制。 在這種情況下,因為這是一個部分頁面加載,我只是丟棄所有提交的值,我不需要任何ModelState值,所以我只是在返回我的更新視圖之前調用ModelState.Clear()查看模型。
public ActionResult GetItemEditForm(EditItemsViewModel editItemsVM)
{
if (editItemsVM.SelectedItemID != null)
{
//Load the selected item
ItemsModelManager.GetEditItemsVM(editItemsVM);
//Clear the submitted form values
ModelState.Clear();
}
return PartialView("_ItemsEditor", editItemsVM);
}
哇,這里有很多答案。 我的問題是由於一個自舉面板。 它正在創建一個“嵌套”面板。 我刪除了面板標記,只使用了一個普通的舊div,它起作用了。 我認為UpdateTargetId必須是AJAX表單的直接父級。
這是說明問題的html。
<div class="panel panel-default" id="notes-form">
<div class="panel-body">
@using (Ajax.BeginForm("EditNote", new { id = Model.Id }, new AjaxOptions { UpdateTargetId = "notes-form" }, htmlAttributes: new { @class = "form-horizontal" }))
{
}
</div>
</div>
對於那些需要更多解釋的人....
在包管理器控制台PM> Install-Package jQuery.Migrate中鍵入此內容
在您的部分視圖中引用此內容:
script src =“〜/ Scripts / jquery.unobtrusive-ajax.js”>
大家快樂編碼。
用戶xr280xr的答案包括
ModelState.Clear();
為我工作。 我正在使用的應用程序是在較舊的jQ(1.7.x)上,因此遷移在我們的情況下不起作用。 清除控制器中的模型狀態完全符合我們期望的BeginForm。
檢查主頁或您的頁面的腳本參考有關jquery.unobtrusive-ajax.js,如果沒有添加有關此js的參考:jquery.unobtrusive-ajax.js
live()方法在jQuery 1.7版中已棄用,在1.9版中已刪除。 請改用on()方法。有關詳細信息,請參閱: http : //www.w3schools.com/jquery/event_live.asp
首先,從NuGet Manager安裝' Microsoft.JQuery.Unobtrusive.Ajax ',然后在包含“ jquery- {version} .js ”之后在“ BundleConfig”中包含“ 〜/ Scripts / jquery.unobtrusive ”; 看起來與此類似:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.unobtrusive*));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.