Editer une fenêtre pop-up pour une conception de grille

Question

Je suis en train d'écrire un projet MVC3. En ce moment j'ai une table qui a la colonne avec des données comme ActionLinks que:

<td style="color: Black; background-color: Bisque; text-align: center; width: 410px"> 
    @Html.ActionLink(@item.LookUp_NameString, "EditPartial", "Capitation", new { id = item.CAPITATION_RATE_ID }, new { @class = "actionLink" }) 
</td> 

EditPartial comme son nom l'indique est une vue partielle, que je dois ouvrir un menu contextuel afin que l'utilisateur peut modifier la détails de l'objet, enregistrez-le et nous pouvons revenir à la page d'origine.

J'ai essayé le rendu partiel, mais je n'arrive pas à le faire passer la valeur d'identifiant de manière dynamique.

Ceci est pour la fonctionnalité d'édition de ma grille. Quelle sera la meilleure façon de mettre en œuvre cela?

Answer 1

Si vous souhaitez ouvrir le résultat de la méthode ActionPartial Action dans une fenêtre contextuelle, vous avez besoin d'un code contextuel de modèle pour cela.

jQuery UI est une option. http://jqueryui.com/demos/dialog/

1) Inclure référence jQuery UI dans votre page,

2) Ajoutez le script ci-dessous à votre page qui vous permet de convertir votre lien normal à un modèle pop-up

<script type="text/javascript"> 
    $(function(){ 
     $(".actionLink").click(function (e) { 
      var url = this.href; 
      var dialog = $("#dialog"); 
      if ($("#dialog").length == 0) { 
       dialog = $('<div id="dialog" style="display:hidden"></div>').appendTo('body'); 
      } 
      dialog.load(
       url, 
       {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object 
       function (responseText, textStatus, XMLHttpRequest) { 
        dialog.dialog({      
         close: function (event, ui) {        
          dialog.remove(); 
         }, 
         modal: true, 
         width: 460, resizable: false 
        }); 
       } 
      );   
      return false;   
     }); 
    }); 
    </script> 

De le résultat de votre action, vous pouvez renvoyer le balisage que vous souhaitez afficher dans le menu contextuel du modèle. La plupart du temps, vous retournerez une vue. Si vous souhaitez afficher une vue partielle, si c'est une requête ajax et afficher l'affichage normal s'il s'agit d'une requête normale, vous pouvez vérifier la méthode Request.IsAjaxRequest pour cela.

public ActionResult EditPartial(int id) 
{ 
    CustomerViewModel objCustomer=GetCustomer(id); 
    if(Request.IsAjaxRequest()) 
    { 
    return View("Partial/Edit",objCustomer); 
    } 
    return View(objCustomer); 

} 

En supposant que vous avez 2 vues présentes pour montrer votre page normale et page partielle (pour pop-up modèle)

Je préfère nommer ma méthode d'action comme Edit au lieu de EditPartial, car il gère les demandes (ajax et normal)