簡體   English   中英

MVC4 Ajax.BeginForm沒有替換UpdateTargetId

[英]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.jsvalidate.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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM