ouverture / fermeture dans le dialogue JavaScript interface utilisateur simple vue ASP.NET MVC CRUD

Question

J'ai plusieurs simples vues ASP.NET MVC pour les opérations CRUD qui fonctionnent bien sur leur propre comme une page Web simple. Je vais maintenant les intégrer dans le site lui-même (dans le contenu) et ont des liens d'instance comme « Créer un nouveau message » qui tireraient la vue dans un choisi clone Lightbox (ne sais pas encore que l'on, peut-être Colorbox ou Thickbox mais qui n'a pas d'importance).

Ce que je veux réaliser est que la vue se détecte en quelque sorte qu'il a été ouvert dans une boîte de dialogue interface utilisateur JavaScript afin que l'action de formulaire (le plus souvent POST en utilisant un simple bouton Soumettre) sera rendu avec une logique qui fermerait l'interface utilisateur dialogue après l'action a effectué.

La vue est maintenant façon de travailler POST / Redirect / GET. La vue devrait soutenir encore ce modèle simple lorsqu'il est ouvert directement à travers l'URL dans un navigateur Web, mais devrait rendre une logique supplémentaire lors de l'ouverture par le dialogue JavaScript.

Si tout va bien vous comprenez ma question. Toute aide appréciée

Answer 1

Votre chance, je l'ai fait!

La première chose dont vous avez besoin est une nouvelle ViewEngine pour gérer le rendu d'une page sans tous les trucs en-tête / pied de page normale qui obtenir de la manière de vos fenêtres modales. La plus simple façon de le faire est d'utiliser une page maître vide la plupart du temps pour vos fenêtres modales. Vous voulez la logique de commutation de la page principale de la route et dans un ViewEngine personnalisé car sinon chaque méthode du contrôleur va avoir si () autre () dans tous les sens détection IsAjaxRequest (). J'aime sec à sec, sahara.

Avec cette technique j'ai aussi l'avantage de se dégrader très gracieusement. Mes fonctions du site sans javascript juste parfaitement. Les liens sont très bien, forme de travail, zéro changement de code pour aller de "modal Site conscient" de forme ancienne soumet html ordinaire.

Tout ce que je faisais était sous-classe le moteur par défaut et ajouter quelques bits de sélection MasterPage:

Le point de vue du moteur:

public class ModalViewEngine : VirtualPathProviderViewEngine 
{
    public ModalViewEngine()
    {                
     /* {0} = view name or master page name 
      * {1} = controller name      */  

     MasterLocationFormats = new[] {  
         "~/Views/Shared/{0}.master"  
     };  

     ViewLocationFormats = new[] {  
         "~/Views/{1}/{0}.aspx",  
         "~/Views/Shared/{0}.aspx"
     };  

     PartialViewLocationFormats = new[] {  
         "~/Views/{1}/{0}.ascx",               
        }; 
    }

    protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
    {
        throw new NotImplementedException();
    }

    protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
    {

        return new WebFormView(viewPath, masterPath );
    }

    public override ViewEngineResult FindView(ControllerContext controllerContext, string viewName, string masterName, bool useCache)
    {
        //you might have to customize this bit
        if (controllerContext.HttpContext.Request.IsAjaxRequest())
            return base.FindView(controllerContext, viewName, "Modal", useCache);

        return base.FindView(controllerContext, viewName, "Site", useCache);
    }

    protected override bool FileExists(ControllerContext controllerContext, string virtualPath)
    {
        return base.FileExists(controllerContext, virtualPath);
    }        
}

Alors ma page Modal.Master est très simple. Tout ce que j'ai est un wrapper div donc je sais quand quelque chose est rendu dans la fenêtre modale. Cela vous sera utile lorsque vous devez sélectionner certains éléments avec jquery uniquement lorsque les éléments sont en mode « modal ».

Modal.Master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<div id="modalcontent"><asp:ContentPlaceHolder ID="MainContent" runat="server" /></div>

L'étape suivante consiste à créer votre formulaire. J'utilise le nom propriété par défaut = nom d'entrée pour que je puisse modéliser se lier facilement et garder les choses simples. Rien de spécial sur la forme. Je regarde comme vous le feriez normalement. (Notez que je utilise MVC 2 et EditorFor () dans mon code, mais cela ne devrait pas d'importance) Voici ma dernière HTML:

Sortie HTML

<div id="modalcontent">
    <h2>EditFood</h2>
    <div id="form">
        <form method="post" action="/edit/food?Length=8">
            <input id="CommonName" class="text-box single-line" type="text" value="" name="CommonName"/>
            <input class="button" type="submit" value="Edit Food"/>
        </form>
    </div>
</div>

En plus de modèle de liaison vraiment vous pouvez également utiliser le bien Jquery.Form plug-in d'avoir seemless et facile capacités ajax en couches dans votre application avec un minimum de code. Maintenant, j'ai choisi ColorBox mon script de fenêtre modale uniquement parce que je voulais Facebookesque coins transparents et j'aime les points d'extension l'auteur a ajouté.

Maintenant, avec ces scripts combinés obtenir une combinaison très agréable qui rend cette technique facile vraiment stupide de le faire en javascript. Le seul javascript que je devais ajouter était (à l'intérieur document.ready):

Javascript / Jquery

    $("a.edit").colorbox({ maxWidth: "800px", opacity: 0.4, initialWidth: 50, initialHeight: 50 });

    $().bind('cbox_complete', function () {
        $("#form form").ajaxForm(function () { $.fn.colorbox.close() });
    });

Ici, je dis ColorBox d'ouvrir une fenêtre modale pour mes liens Modifier (Généralités). Puis la liaison aller à câbler vos trucs ajaxform événement complet du colorbox avec un rappel de succès pour dire ColorBox pour fermer la fenêtre modale. Thats it.

Ce code a été fait comme une preuve de concept et c'est pourquoi le moteur de vue est vraiment lite et il n'y a pas de validation ou autre bling forme standard. ColorBox et JQuery.Form ont des tonnes de soutien afin d'extensibilité personnalise ce logiciel devrait être facile.

Notez cela a été fait dans le MVC 2 mais voici mon code de contrôleur de toute façon juste pour montrer comment cela est facile à faire. Rappelez-vous ma preuve de l'objectif concept était d'obtenir des fenêtres modales de travail de telle sorte que je ne devais pas faire de code change autre que mettre en place une infrastructure de base.

    [UrlRoute(Path="edit/food")]
    public ActionResult EditFood()
    {            
        return View(new Food());
    }

    [HttpPost][UrlRoute(Path = "edit/food")]
    public ActionResult EditFood(Food food)
    {          
        return View(food);
    }

Answer 2

Lors de la construction de l'URL jQuery pour faire une AJAX accès, vous pouvez ajouter un paramètre de chaîne de requête comme & javascriptWindow = id, lorsque cela est détecté dans le contrôleur, vous pouvez ajouter la logique nécessaire à la forme pour fermer la boîte de dialogue après l'exécution.