从另一个局部视图仅更新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函数使用的事件回调方法。