Recharger une vue partielle avec un bouton dans la vue partielle

Question

J'utilise mvc 4 et j'essaie de dynamiser mon application web. Pour le moment, j'essaie de diviser certaines vues en vues partielles afin que le code soit plus lisible et que je puisse mieux réutiliser certaines parties de l'application. Alors maintenant, cela m'amène à un problème. J'ai une vue similaire à celui-ci:

<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> 

Chacun d'entre eux sont des vues partielles qui s'appelle du contrôleur comme:

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); 
} 

Maintenant à mon problème. J'ai une vue partielle comme celui-ci:

@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> 

et si je clique sur le dernier bouton juste la vue partielle devrait être rechargées. Mais à la place, l'application ne montre que la vue partielle sans aucune disposition dans le navigateur. Qu'ai-je fait de mal ou n'est-il pas possible de résoudre mon problème? L'action du contrôleur à partir du bouton est:

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

La raison pour cela est parce que vous utilisez:

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

Cela rafraîchir la page entière du résultat de la vue partielle, de sorte que vous voyez seulement vue partielle.

ce que vous devez faire est de faire un appel ajax à ce contrôleur, vous devez donc utiliser:

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

puis ajoutez le code JavaScript suivant à la page:

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

La ligne:

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

utilisera le résultat de l'appel ajax (données) pour remplir la div avec ID DepartmentManagement - Je n'étais pas sûr de l'endroit où vous vouliez que cette vue partielle soit affichée, donc changez simplement l'ID en fonction de ce que vous voulez.

En outre, la ligne:

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

est l'URL du contrôleur, je pense que je deviné juste, mais vous devez changer pour la bonne adresse en cas de besoin.

J'espère que cela aide.

Martyn

[modifier] un bon tutoriel here: aussi, faire quelques googler pour "ajax mvc jquery" qui devrait également vous aider à le comprendre. Beaucoup mieux que je peux l'expliquer! :)