用局部视图中的按钮重新加载局部视图

Question

我使用mvc 4并尝试让我的Web应用程序更具动态性。目前我尝试在部分视图中分割一些视图，以便代码更易读，并且我可以更好地重新使用应用程序的某些部分。 所以，现在这导致我的问题。我有类似这样的一个观点：

<h1>Manage department</h1> 
<div id="EmployeesManagement">@Html.Action("OpenEmployeesManagement")</div> 
<div id="DepartmentManagement">@Html.Action("OpenDepartmentManagement")</div> 
<div id="DepartmentTumorModels">@Html.Action("OpenDepartmentModels")</div> 

每个那些都是其获得从控制器称为像部分观点：

public PartialViewResult OpenDepartmentModels() 
{ 
    ViewBag.ChangeVisibility = -1; 
    HoDManagementModel hoDManagementModel = new HoDManagementModel { UserWithRoleModelList = azaraUserManagement.GetAllEmployesOfHoD(user.getUserId()), OrganisationUnits = azaraUserManagement.GetAllOrganisationUnitsFromHoD(user.getUserId()) }; 
    List<ModelWithOrganisationUnit> Models = ModelManagement.SearchModelsOfDepartment(hoDManagementModel.OrganisationUnits); 
    return PartialView("DepartmentModels", Models); 
} 

现在我的问题。我有这样一个局部视图：

@model List<Modelle.Models.BusinessTierObjects.Models.ModelWithOrganisationUnit> 
<fieldset> 
    <legend>Manage the models of your department</legend> 
     <table class="tablesorter"> 
      <thead> 
       <tr> 
        <th>ID</th> 
        <th>Name </th> 
        <th>Department </th> 
        <th>Visibility</th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       @foreach (var item in @Model) 
       { 
        <tr> 
         <td>@item.ModelId</td> 
         <td>@Html.ActionLink((String)item.ModelName, "Details", "Details", new { id = item.ModelId }, null)</td> 
         <td>@item.OrganisationUnitName</td> 
         @if (ViewBag.ChangeVisibility == item.ModelId) 
         { 
         <td><select name="ChangeVisibility" id="ChangeVisibility"> 
         <option value="Department" onclick="location.href='@Url.Action("ChangeVisibility", "ManageDepartment", new {tumorModelId = item.ModelId, Visibility = 0})'">Department</option> 
         option value="Coop" onclick="location.href='@Url.Action("ChangeVisibility", "ManageDepartment", new { ModelId = item.ModelId, Visibility = 2 })'">Coop</option> 
         <option value="WWW" onclick="location.href='@Url.Action("ChangeVisibility", "ManageDepartment", new { ModelId = item.ModelId, Visibility = 3 })'">WWW</option> 
</select></td> 
         } 
         else{ 
          switch ((byte)item.Visibility) 
          { 
           case 0: <td>Department</td>; break; 
           case 2: <td>Coop</td>; break; 
           case 3: <td>WWW</td>; break; 
          } 
         } 
         <td><button name="button" class="button" onclick="location.href='@Url.Action("RequestChangeVisibility", "ManageDepartment", new { change = @item.ModelId })'">Change Visibility</button> 
</td> 
        </tr>} 
</fieldset> 

，如果我在最后一个按钮单击只是局部视图应该重新加载。但是，相反，应用程序仅向我显示浏览器中没有任何布局的局部视图。我做错了什么或不能解决我的问题？ 从按钮控制器动作是：

public PartialViewResult RequestChangeVisibility(int change) 
     { 
      ViewBag.ChangeVisibility = change; 
      HoDManagementModel hoDManagementModel = new HoDManagementModel { UserWithRoleModelList = azaraUserManagement.GetAllEmployesOfHoD(user.getUserId()), OrganisationUnits = azaraUserManagement.GetAllOrganisationUnitsFromHoD(user.getUserId()) }; 
      List<ModelWithOrganisationUnit> Models = ModelManagement.SearchModelsOfDepartment(hoDManagementModel.OrganisationUnits); 
      return PartialView("DepartmentModels", Models); 
     } 

Answer 1

出现这种情况的原因是因为你使用：

onclick="location.href='@Url.Action("RequestChangeVisibility", "ManageDepartment", new { change = @item.ModelId })'" 

这将刷新整个页面的局部视图的结果，所以你只能看到局部视图。

你需要做的是做一个AJAX调用该控制器，所以你应该使用：

<td><button name="button" class="button" onclick="RequestChangeVisibilityAjaxCall(@item.ModelId)">Change Visibility</button> 

然后添加下面的JavaScript页面：

<script> 
    function RequestChangeVisibilityAjaxCall(change) { 
     $.ajax({ 
      url: "../ManageDepartment/RequestChangeVisibility?Change=" + change, 
      type: 'GET', 
      success: function (data) { 
       $('#DepartmentManagement').html(data); 
      } 
     }); 
    } 
</script> 

该行：

$('#DepartmentManagement').html(data); 

将使用ajax调用（数据）的结果来填充ID DepartmentManagement的div - 我不确定你想要哪个局部视图去，所以只需将ID改为任何你需要它的地方。

此外，该行：

url: "../ManageDepartment/RequestChangeVisibility?Change=" + change, 

是控制器的网址，我想我猜对的，但在需要的地方，你应该将其更改为正确的地址。

我希望这会有所帮助。

马丁

[编辑]一个很好的教程here: 也做了一些google搜索“MVC jQuery的AJAX”也应该帮助你理解它。比我能解释得更好！ :)