從另一個局部視圖僅更新asp.net mvc中的局部視圖

Question

我有一個關於從包含第一個視圖的另一個局部視圖更新局部視圖的問題。

我有4個下拉列表是基於先前的選擇填充，那麼用戶可以提交他們的選擇和查詢數據庫和表格是基於他們的選擇填充。我應該注意到，我對asp.net mvc非常陌生，這對我來說仍然很困惑。

下面是我的代碼：

<form action="/Home/LoadRelease" method="post" style="text-align: center;"> 
    @*Headers*@ 
    <div id="BusinessAreaLabel" class="inline" style="width:14em;">Business Area</div> 
    <div id="GenericProjectLabel" class="inline" style="width:13em;">Generic Project</div> 
    <div id="ProjectLabel" class="inline" style="width:17em;">Project</div> 
    <div id="ReleaseLabel" class="inline" style="width:13em;">Release</div> 

    <br /> 

    @*Dropdowns*@ 
    <select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 13em;"> 
    @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels); 
    </select> 
    <select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 13em;"></select> 
    <select id="ProjectDropDown" name="Project" style="width: 17em;" onchange="javascript: FillReleases();"></select> 
    <select id="ReleaseDropDown" name="Release" style="width: 13em;"></select> 
    <input type="submit" id="GoButton" style="visibility:hidden;" value="Go" /> 

</form> 
<form id="ReleaseTableBody" style="text-align:center;"> 
    @Html.Partial("_TableBody", Model.OpenCloseViewModels) //I want to update this. 
</form> 
<br /> 

和家庭/ LoadRelease：

[HttpPost] 
    public ActionResult LoadRelease(string Project, string Release) 
    { 
     var ProjectID = _ProblemReportsDB.ProjectMaps 
      .Where(r => r.Project == Project) 
      .Select(r => r.ID).FirstOrDefault(); 

     ViewBag.Project = Project; 

     var Releases = from row in _ProblemReportsDB.PlannedOpenCloses 
         where (row.Project == ProjectID) 
         select row; 

     return PartialView("_TableBody", Releases.ToList()); 
    } 

上述載荷的局部視圖 「_TableBody」，但實際上引導到只包含_TableBody內容的頁面。

理想情況下，我將繼續顯示在頁面上，僅更新頁面的_TableBody部分。我想我明白爲什麼它目前失敗，我告訴它運行/ Home/LoadRelease行動，它返回它加載的_TableBody局部視圖。

我無法搞清楚如何使它只更新_TableBody局部視圖。

感謝您提供任何幫助。

編輯：

試圖Jasens方法我已經使用AJAX功能開始：仍然加載到另一頁，而不是更新的部分：

代碼：

@using (Html.BeginForm("LoadRelease", "Home", FormMethod.Post, new { id = "DropDownForm", style="" })) 
{ 
    @*Headers*@ 
    <div id="BusinessAreaLabel" class="inline" style="width:14em;">Business Area</div> 
    <div id="GenericProjectLabel" class="inline" style="width:13em;">Generic Project</div> 
    <div id="ProjectLabel" class="inline" style="width:17em;">Project</div> 
    <div id="ReleaseLabel" class="inline" style="width:13em;">Release</div> 

    <br /> 

    @*Dropdowns*@ 
    <select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 13em;"> 
     @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels); 
    </select> 
    <select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 13em;"></select> 
    <select id="ProjectDropDown" name="Project" style="width: 17em;" onchange="javascript: FillReleases();"></select> 
    <select id="ReleaseDropDown" name="Release" style="width: 13em;"></select> 
    <button type="submit" id="GoButton" style="visibility:hidden;">Go</button> 
} 
@*</form>*@ 

<form id="ReleaseTableBody" style="text-align:center;"> 
    @Html.Partial("_TableBody", Model.OpenCloseViewModels) 
</form> 
<br /> 

在指數： （_DropDownBody的父親）：

<script src="~/Scripts/jquery-1.10.2.js"> 
    $(document).ready(function() { 
     $("#DropDownForm").on("submit", function (event) { 
      event.preventDefault(); 

      var form = $(this); 
      var Project = $('#ProjectDropDown').val(); 
      var Release = $('#ReleaseDropDown').val(); 
      alert(Project); 
      $.ajax({ 
       url: form.attr("action"), 
       method: form.attr("method"), 
       data: form.serialize() 
      }) 
      .done(function (result) { 
       $("#ReleaseTableBody").html(result); 
      }); 
     }); 

    }); 
</script> 

使用A.布拉克埃爾博拉的方法也產生同樣的問題。我錯過了什麼嗎？

最終編輯： Jasen的答案奏效，並允許我在不重定向的情況下更新局部視圖。仍然有問題得到部分展示我的內容，但就問題而言 - 賈森的答案有效！

Answer 1

提交表單將導致導航。既然你想留在同一頁面上，你需要捕獲提交事件並使用AJAX來更新頁面。

主視圖

@using(Html.BeginForm("LoadRelease", "Home", FormMethod.Post, new { id = "DropDownForm", style = "" }) 
{ 
    <!-- your drop down inputs --> 
    <button type="submit">Go</button> 
} 
<form id="ReleaseTableBody" style="text-align:center;"> 
    @Html.Partial("_TableBody", Model.OpenCloseViewModels) //I want to update this. 
</form> 

然後在網頁腳本（不要忘記在這之前加載的jquery.js）。另外請注意，如果您嵌入部分視圖，則需要將此腳本「向上」移動到父項，因爲@section將不會以分號形式呈現。

<script src="jquery.js"></script> 
<script> 
$(document).ready(function() { 
    $("#DropDownForm").on("submit", function(e) { 
     // prevent default submission 
     e.preventDefault(); 

     // do AJAX post instead 
     var form = $(this); 
     $.ajax({ 
      url: form.attr("action"), 
      method: form.attr("method"), 
      data: form.serialize() 
     }) 
     .done(function(result) { 
      // replace content 
      $("#ReleaseTableBody").html(result); 
     }); 
    }); 
} 
</script> 

控制器動作不變

[HttpPost] 
public ActionResult LoadRelease(string Project, string Release) 
{ 
    // search 
    return PartialView("_TableBody", results); 
} 

Answer 2

首先，我建議你使用html助手。你似乎需要的是一個Ajax調用，而不是一個標準的表單文章。取而代之的

<form action="/Home/LoadRelease" method="post" style="text-align: center;"> 

可以使用

@using (Ajax.BeginForm("LoadRelease", "Home", options)){ 

     @*Headers*@ 
     <div id="BusinessAreaLabel" class="inline" style="width:14em;">Business Area</div> 
     <div id="GenericProjectLabel" class="inline" style="width:13em;">Generic Project</div> 
     <div id="ProjectLabel" class="inline" style="width:17em;">Project</div> 
     <div id="ReleaseLabel" class="inline" style="width:13em;">Release</div> 

     <br /> 

     @*Dropdowns*@ 
     <select id="BusinessAreaDropDown" name="BusinessArea" onchange="javascript: FillGenericProject(); FillProject(); FillReleases();" style="width: 13em;"> 
     @Html.Partial(@"Dropdowns\_BusinessArea", Model.ProjectViewModels); 
     </select> 
     <select id="GenericProjectDropDown" name="GenericProject" onchange="javascript: FillProject(); FillReleases();" style="width: 13em;"></select> 
     <select id="ProjectDropDown" name="Project" style="width: 17em;" onchange="javascript: FillReleases();"></select> 
     <select id="ReleaseDropDown" name="Release" style="width: 13em;"></select> 
     <input type="submit" id="GoButton" style="visibility:hidden;" value="Go" /> 

    } 

在HTML

和地方你有：

<div id="ReleaseTableBody"> 
    @Html.Partial(_TableBody", Model.OpenCloseViewModels) 
</div> 

您需要定義options對象的AJAX輔助，如：

var options = new AjaxOptions 
{ 
    HttpMethod = "POST", 
    UpdateTargetId = "ReleaseTableBody", 
    OnBegin = "OnCallbackBegin", 
    OnFailure = "OnCallbackFailure", 
    OnSuccess = "OnCallbackSuccess", 
    LoadingElementId = "loading" 
}; 

<script> 

function OnCallbackBegin() { 
    $(".btn-loading-icon").show(); 
    $(".btn-loading-text").hide(); 
} 
function OnCallbackSuccess(data) { 
    //alert("onSuccess: result = " + data.result); 
    $(".btn-loading-icon").hide(); 
    $(".btn-loading-text").show(); 
    SomeOtherFunction(); 
} 

我也建議使用@Html.DropdownFor幫助您下拉菜單：你也可以，如果你這樣定義自己的JavaScript函數使用的事件回調方法。