charge partielle de la vue dans une modal popup

Je suis en train de travailler avec MVC3 c# 4.0.

J'ai créé une vue partielle.

J'ai un bouton sur ma page, quand je clique sur ce bouton, je veux être en mesure de charger la vue partielle dans une modal popup. Je suppose que la meilleure façon de le faire est par l'intermédiaire de javascript - je suis à l'aide de jQuery déjà dans l'application.

Aucune idée de comment je pourrais faire cela?

OriginalL'auteur amateur | 2012-05-23

  1. 9

    Vous pouvez utiliser jQuery UI dialog.

    Vous commencez donc par l'écriture d'un contrôleur:

    public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Modal()
    {
        return PartialView();
    }
}

    puis un Modal.cshtml partielle qui contiendra la partielle de balisage que vous souhaitez afficher dans le modal:

    <div>This is the partial view</div>

    et un Index.cshtml la vue contenant le bouton qui affiche la partielle dans une modal lorsque l'utilisateur clique dessus:

    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('.modal').click(function () {
            $('<div/>').appendTo('body').dialog({
                close: function (event, ui) {
                    dialog.remove();
                },
                modal: true
            }).load(this.href, {});

            return false;            
        });
    });
</script>

@Html.ActionLink("show modal", "modal", null, new { @class = "modal" })

    Évidemment, dans cette exemple, j'ai mis directement les scripts dans la vue Index, mais dans une application réelle de ces scripts vont aller en séparer fichier javascript.

    Merci beaucoup pour cet exemple, il aide beaucoup. Une autre question, j'ai intégré dans MVC3 dans mon application web forms. Donc le contrôle qui déclenche le modal est sur les formulaires web. Je ne pense pas que je peux utiliser @Html.ActionLink dans les formulaires web, est-il une alternative?
    Bien sûr qu'il existe une alternative. Tout ce que l' Html.ActionLink helper génère est un <a> tag. De sorte que vous pouvez générer cette balise dans votre application web forms.
    Bonjour Darin, j'ai essayé à l'aide de ce stackoverflow.com/questions/15876993/... mais j'ai encore juste obtenir une nouvelle page. Une idée?
    est-il travailler dans NopCommerce !!!!??
    Je déteste css & ça c'est une réponse trop..tué beaucoup de mon temps. Si quelqu'un d'autre est d'avoir de la difficulté à veuillez utiliser les codeproject.com/Tips/826002/... pour mieux comprendre les choses

    OriginalL'auteur Darin Dimitrov