MVC 4 Modal Bootstrap Modifier \ Détail
En espérant que quelqu'un pourrait être en mesure de m'aider avec quelque chose que j'expérimente avec MVC 4 en utilisant bootstrap.
J'ai un typage fort indice de la vue qui affiche les éléments dans une table avec modifier et supprimer des icônes d'action dans chaque ligne.
@model IEnumerable<Models.EquipmentClass>
....
@foreach (var item in Model)
{
<tbody>
<tr>
<td>
@item.ClassId
</td>
<td>
@item.ClassName
</td>
<td>
<a href=@Url.Action("Edit", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-edit"></i>
</a>
<a href=@Url.Action("Delete", "EquipmentClass", new { id = item.ClassId })>
<i class="icon-trash"></i>
</a>
</td>
</tr>
</tbody>
} <!-- foreach -->
La EquipmentClass contrôleur retourne la vue modification de l'élément sélectionné en fonction de l'id. Tous les grands et, comme prévu, à ce point de
public ViewResult Edit(int id)
{
return View(equipmentclassRepository.Find(id));
}
Ce que je voudrais savoir, c'est comment ouvrir le formulaire de modification dans un fichier d'amorce de dialogue modale.
Je pourrait essayer de substituer l'action modifier dans la table avec la commande suivante et puis avoir un modal div en bas de la vue, mais comment puis-je entrer l'ID de l'élément sélectionné et qui helper html dois-je utiliser dans la modale de la section?
<!-- replaced table action -->
<a class="btn pull-right" data-toggle="modal" href="#myModal" >Details</a>
....
<!-- modal div -->
<div class="modal hide fade in" id="myModal" )>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
@Html.Partial("Edit")
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
J'avais apprécie beaucoup tous les conseils, merci beaucoup
Vous devez vous connecter pour publier un commentaire.
Je pense que j'ai une solution à votre problème. Pour rendre votre application MVC travail comme vous le souhaitez, vous devriez faire quelques modifications dans le code que vous avez fournies:
1. Ajouter un div représentant un modal pour la modification d'un élément au bas de votre page de présentation:
Avis que ce modal est strictement liée à l'action du contrôleur responsable de la modification d'un EquipmentClass élément.
2. Ajouter un jQuery fonction de votre code javaScript personnalisé:
Comme vous pouvez le voir, cette fonction prend id comme l'un de ses paramètres. En général, son but est de remplacer le vide modal corps avec ce que l'on va mettre dans une autre vue partielle et d'afficher le conteneur entier comme un modal page.
3. Mettez votre modal div dans une autre vue partielle, et de l'appeler Modifier (doit être le même que votre contrôleur nom de l'action). Vous devrez modifier votre Modifier partielle nom à qqch d'autre, par exemple EditBody.
La Modifier vue partielle devrait maintenant ressembler à qqch comme ceci:
4. Modifier l'action de contrôleur pour qu'il renvoie la vue partielle créé à l'étape précédente:
5. Modifier la modifier 'un' point d'ancrage de sorte qu'il appelle créé jQuery fonction:
De cette façon à chaque fois d'un ancrage avec l'icône de modification est cliqué sur le showModal fonction (avec les id transmis) est déclenché et un modal bootstrap avec les données affichées.
Je suis sûr qu'il y est une meilleure façon de le faire, mais ça a fonctionné pour moi très bien 🙂
Espère que cela vous aide un peu 🙂
Przemo réponse a fonctionné pour moi, cependant, ne remarque que j'ai seulement réussi à le faire fonctionner quand j'ai changé le premier bloc de code à partir de
à
Avis que j'ai enlevé le "fade" classe de editModalContainerID. Sinon, la vue partielle ne se charge pas. Espérons que cela aide quelqu'un d'autre avec le même problème.
hide
classe de votre réponse, pasfade
.