使用AJAX呈現視圖中的局部視圖

我想在提交表單時刷新視圖中的局部視圖。然而，每當我嘗試它只是將局部視圖渲染爲普通視圖。有人能告訴我我做錯了什麼嗎？使用AJAX呈現視圖中的局部視圖

控制器：

public ActionResult ChangeHeatName(string heatName, string updatedHeat) 
    { 
     string user = User.Identity.Name; 
     HomeModel H = new HomeModel(); 
     H.ChangeHeatName(heatName, updatedHeat, user); 
     ChemViewModel mySlagViewModel = new ChemViewModel(); 
     mySlagViewModel = H.QueryResults(heatName); 

     return PartialView("PartialChemAnalysis", mySlagViewModel); 
    }

局部視圖形式（包含在局部視圖，而不是主視圖）表示：其中局部視圖所呈現

@using (Ajax.BeginForm("ChangeHeatName", "Home", new AjaxOptions(){UpdateTargetId = "chemDiv" InsertionMode = InsertionMode.Replace})) 
{ 
    <section> 
     Heat Name:<input type="text" name="heatName" value="@Html.ValueFor(x => x.heatname)" style ="width:100px"/> 
     Change to:<input type="text" name="updatedHeat" value="" style="width: 100px" /> 
     <input type="submit" name="ChangeHeatName" value="Change" /> 
    </section> 
}

索引視圖：

@if(ViewBag.SearchKey == null) 
{ 
    <div class="content-wrapper"> 
     <hgroup class="title"> 
      <h1>@HttpContext.Current.User.Identity.Name</h1> 
      <h2>@ViewBag.Message</h2> 
     </hgroup> 
    </div> 
} 

@using (Html.BeginForm("Index", "Home", "POST")) 
{ 
<div class="searchField"> 
    <input type="text" class="search-query" name="heatSearch" placeholder="Search"> 
     <button class="btn btn-success" type="submit">Search</button> 
    <br /> 
    @if (ViewBag.AverageSuccessful == true) 
    { 
     <input type="text" name="AvgConfirmation" class="search-query" value="Average Submitted Successfully" width:"400px" placeholder="Search" /> 
    } 
</div> 
} 

@if(ViewBag.SearchKey != null) 
{ 
    <div> 
    <div id ="chemDiv"> 
    @Html.Action("PartialChemAnalysis", "Home", (string)ViewBag.SearchKey) 
    </div> 

    <div id ="slafDiv"> 
    @Html.Action("PartialSlagView", "Home", (string)ViewBag.SearchKey) 
    </div> 
    </div> 

}

通過SearchKey的索引控制器：

[HttpPost] 
    public ActionResult Index(string heatSearch) 
    { 
     ViewBag.SearchKey = heatSearch; 

     return View(); 
    }

來源

2013-04-12 Danger_Fox

表單將請求發送到部分視圖操作（'ChangeHeatName'）。所有此操作返回的都是局部視圖，這就是爲什麼您無法看到完整視圖。您應該將表單的GET格式發送到返回完整視圖的操作，並從該視圖調用部分視圖。 –

我也將添加InsertionMode.Replace作爲你的ajax選項的下一個參數。所以它會讀取：新的AjaxOptions {UpdateTargetId =「chemDiv」，InsertionMode = InsertionMode.Replace} –

@AndreCalil感謝您的建議。我試着調用渲染局部視圖的全視圖。所以我的返回語句看起來像 return View（「Index」，heatName）但它只是帶我回到那個視圖沒有部分視圖呈現。 –

發佈此內容是因爲它不是一個直觀的修復程序。顯然有與MVC 4和jQuery 1.9.1問題，所以要得到這個工作，我有我的參考改變的jQuery 1.7.1

來源

2013-04-12 17:29:02

我不確定我會看到這將如何解決您在上面發佈的代碼問題的根源。 –

當前你的ajax.beginform是在你的局部視圖中，這一切都很好，但是你的partialview不是在你的索引內部呈現的，所以你真的從不做ajax替換邏輯，你只是調用一個action方法並獲得整個頁面刷新部分視圖。

這是什麼工作。

@if(ViewBag.SearchKey != null) 
{ 
    <div> 
     <div id ="chemDiv"> 
      @Html.Partial("ChangeHeatName") 
     </div> 

     <div id ="slafDiv"> 
      @Html.Action("PartialSlagView", "Home", (string)ViewBag.SearchKey) 
     </div> 
    </div> 
}

現在，您的Ajax.Beginform呈現在索引視圖中，並且當單擊按鈕時它將刷新。

編輯：你需要做一些與@Html.Action("PartialChemAnalysis", "Home", (string)ViewBag.SearchKey)可能堅持它在你的局部視圖，因爲「chemDiv」中的所有內容現在將被更新後更換。

來源

2013-04-12 16:04:25

你不是在Ajax.BeginForm()指定POST。試試這個：

@using (Ajax.BeginForm("ChangeHeatName", "Home", FormMethod.Post, 
new AjaxOptions(){UpdateTargetId = "chemDiv" InsertionMode = InsertionMode.Replace})) 
{...}

此外，堅持一個斷點在你的控制器動作，並通過它一步，看看它實際上擊中return PartialView()或跳過它。

來源

2013-04-12 17:36:30 MattSull

使用AJAX呈現視圖中的局部視圖

回答

相關問題