Einfaches ASP.NET MVC CRUD Ansichten zum Öffnen / Schließen in JavaScript UI-Dialog

Question

ich verschiedene einfache ASP.NET MVC Ansichten für CRUD-Operationen haben, die auf ihre eigenen als einfache Webseite funktionieren. Ich werde sie jetzt in die Website selbst (in den Inhalt) integrieren und haben beispielsweise Links wie „Neue Post“, die den Blick in einer gewählten Lightbox Klon anwerfen würde (noch nicht wissen, welche, vielleicht Colorbox oder Thickbox aber das macht nichts).

Was ich erreichen möchte ist, dass die Ansicht selbst erkennt irgendwie, dass es in einem JavaScript-UI-Dialog geöffnet wurde, so dass die Formularaktion (am häufigsten einen einfachen Schaltfläche Senden POST) wird mit einer Logik wiedergegeben werden, die die Benutzeroberfläche schließen würden Dialog nach der Aktion ausgeführt.

Die Art und Weise Ansichten jetzt arbeiten ist POST / Redirect / GET. Der Blick sollte noch dieses einfache Muster unterstützen, wenn sie direkt durch URL in einem Web-Browser geöffnet, soll aber einige zusätzliche Logik machen, wenn sie durch JavaScript-Dialog geöffnet.

Hoffentlich Sie meine Frage verstehen. Jede Hilfe willkommen

Answer 1

Ihr Glück, ich habe dies getan!

Das erste, was Sie brauchen eine neue Viewengine ist eine Seite, ohne all die normalen Header / Footer Sachen zu handhaben machen, die in der Art und Weise Ihrer modalen Fenster bekommen. Der einfachste Weg, dies zu tun ist, eine fast leere Masterseite für Ihre modalen Fenster zu verwenden. Sie mögen die Masterseite Schaltlogik aus dem Weg und in einem benutzerdefinierten Viewengine, weil sonst jede Controller-Methode, wenn () else () alle über den Ort Erfassungs IsAjaxRequest () haben, haben wird. Ich mag trocken, sahara trocken.

Mit dieser Technik Ich habe auch den Vorteil, sehr anmutig zu verschlechtern. Meine Website funktioniert ohne Javascript nur perfekt. Links sind in Ordnung, bildet Arbeit, Null Codeänderungen , um von "modal bewusst site" zu plain old HTML Formular abschickt.

Alles, was ich tat, war die Standard-Engine Unterklasse und einige Master Selektionsbits hinzufügen:

The View Motor:

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

Also meine Modal.Master Seite ist sehr einfach. Ich habe nur ein div-Wrapper, damit ich weiß, wenn etwas im Innern des modalen Fenster wiedergegeben wird. Dies ist hilfreich, wenn Sie nur bestimmte Elemente mit jquery wählen müssen, wenn die Elemente in „modal“ sind.

Modal.Master

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

Der nächste Schritt ist das Formular zu erstellen. Ich verwende die Standardeigenschaft name = Eingangsnamen, so kann ich binden leicht modellieren und die Dinge einfach zu halten. Nichts Besonderes über die Form. Ich sehe genauso aus wie Sie es normalerweise tun würden. (Anmerkung Ich verwende MVC 2 und EditorFor () in meinem Code, aber das sollte egal) Hier ist meine letzte HTML ist:

HTML-Ausgabe

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

Neben Modell Bindung wirklich gut können Sie verwenden auch die Jquery.Form Plugin seemless zu haben und einfach aJAX-Funktionen in Ihre Anwendung mit minimalem Code schichten. Jetzt habe ich gewählt ColorBox als mein modales Fenster Skript rein, weil ich Facebookesque transparente Ecken und Ich mag die Erweiterungspunkte gesucht der Autor hinzugefügt.

Jetzt mit diesen Skripten kombiniert man bekommt eine wirklich schöne Kombination, die diese Technik wirklich dumm einfach zu tun, in Javascript macht. Die einzige Javascript musste ich war hinzufügen (innen 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() });
    });

Hier ColorBox Ich sage ein modales Fenster für meine Verknüpfungen bearbeiten (Edit Food) zu öffnen. Dann Bindung geht die komplette Veranstaltung colorbox Ihr ajaxform Zeug mit einem Erfolg Rückruf verdrahten ColorBox zu sagen, das modalen Fenster zu schließen. Das ist es.

Dieser Code alles wurde als Proof of Concept und das ist geschehen, warum die Ansicht Motor wirklich lite ist und es gibt keine Validierung oder andere Standardform bling. ColorBox und JQuery.Form haben jede Menge Erweiterbarkeit Unterstützung so dass diese Anpassung einfach sein sollte.

Hinweis: Dies alles wurde in MVC getan 2, aber hier ist mein Controller-Code sowieso nur um zu zeigen, wie einfach dies zu tun ist. meine Proof of Concept Ziel erinnert, war modale Fenster zu bekommen so arbeiten, dass ich nicht Code ändert andere machen habe, als einige grundlegende Infrastruktur einzurichten.

    [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

Wenn Sie die URL für jQuery Aufbau bis zu einem AJAX-GET zu tun, könnten Sie einen Abfrage-String-Parameter wie & javascriptWindow = id, hinzufügen, wenn diese in der Steuerung erkannt wird, könnten Sie die notwendige Logik zum Formular hinzufügen den Dialog zu schließen nach der Ausführung.