Semplice ASP.NET MVC CRUD vista di apertura / chiusura della finestra di JavaScript UI

Question

Ho diversi semplici vista ASP.NET MVC per operazioni CRUD che funzionano bene da soli come una semplice pagina web. Passo ora a integrarli nel sito stesso (nel contenuto) e hanno per i collegamenti esempio, come "Crea nuovo post" che accendere la vista in un clone di Lightbox scelto (non so ancora quale, forse Colorbox o Thickbox ma non importa).

Quello che voglio ottenere è che la vista si rileva in qualche modo che è stato aperto in una finestra di JavaScript interfaccia utente in modo che l'azione Form (più comunemente post utilizzando un semplice pulsante Invia) sarà reso con una logica che avrebbe chiuso l'interfaccia utente dialogo dopo che l'azione ha eseguito.

Il modo più viste lavorare ora è POST / Redirect / GET. La vista deve ancora sostenere questo semplice schema quando viene aperto direttamente tramite URL in un browser web, ma dovrebbe rendere alcuni logica addizionale quando aperto attraverso il dialogo JavaScript.

Speriamo che si capisce la mia domanda. Qualsiasi aiuto apprezzato

Answer 1

Il fortunato, ho fatto questo!

Quindi la prima cosa che serve è un nuovo ViewEngine per gestire il rendering di una pagina senza tutta la roba normale intestazione / piè di pagina che otterrà nel modo delle finestre modali. Il modo più semplice per farlo è quello di utilizzare una pagina master per lo più vuoto per le finestre modali. Si vuole la logica di commutazione pagina master fuori strada e in un ViewEngine personalizzato perché altrimenti ogni metodo di controllo sta per avere if () else () in tutto il luogo rilevare IsAjaxRequest (). Mi piace a secco, sahara asciutto.

Con questa tecnica ho anche il vantaggio di degradare molto garbo. Le mie funzioni del sito senza javascript appena perfettamente. I link sono bene, costituisce il lavoro, modifiche al codice di zero per passare da "modale sito consapevole" a plain sottomette vecchia forma HTML.

Tutto quello che ho fatto è stato sottoclasse il motore predefinito e aggiungere alcuni bit di selezione MasterPage:

The View Engine:

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

Quindi, la mia pagina Modal.Master è molto semplice. Tutto quello che ho è un wrapper div quindi so quando qualcosa è reso all'interno della finestra modale. Ciò sarà utile quando è necessario selezionare alcuni elementi con jQuery solo quando gli elementi sono in "modalità modale".

Modal.Master

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

Il passo successivo è quello di creare il modulo. Io uso il nome = nome dell'ingresso proprietà predefinita in modo da poter modellare legano facilmente e mantenere le cose semplici. Niente di speciale in forma. Mi sembra proprio come si farebbe normalmente. (Nota sto usando MVC 2 e EditorFor () nel mio codice, ma che non dovrebbe importare) Ecco la mia ultima HTML:

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

Oltre a modello vincolante davvero ben si può anche utilizzare il Jquery.Form plug avere seemless e facile funzionalità ajax stratificato nella vostra applicazione con codice minimo. Ora ho scelto ColorBox come il mio script finestra modale semplicemente perché volevo Facebookesque angoli trasparenti e mi piacciono i punti di estendibilità l'autore ha aggiunto.

Ora con questi script combinati si ottiene una bella combinazione che rende questa tecnica veramente stupido facile da fare in javascript. L'unica javascript ho dovuto aggiungere era (all'interno 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() });
    });

Qui sto dicendo ColorBox per aprire una finestra modale per la mia modifica collegamenti (Modifica Food). Poi vincolanti vanno evento complete del colorbox per cablare la tua roba ajaxform con un callback successo da raccontare ColorBox per chiudere la finestra modale. Questo è tutto.

Questo codice è stato tutto fatto come una prova di concetto e questo è il motivo per cui il motore di visualizzazione è davvero lite e non v'è alcuna convalida o di altra forma bling standard. ColorBox e JQuery.Form hanno tonnellate di supporto estensibilità in modo personalizzazione di questo dovrebbe essere facile.

Si noti questo è stato tutto fatto in MVC 2, ma qui è il mio codice di controllo in ogni caso solo per mostrare come questo è facile da fare. Ricorda il mio prova di concetto obiettivo era di ottenere le finestre modali di lavoro in modo tale che io non ho dovuto fare qualsiasi codice modifica diversa da impostare alcune infrastrutture di 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

Quando si costruisce l'URL per jQuery per fare un AJAX raggiungere, si potrebbe aggiungere un parametro di stringa di query come & javascriptWindow = id, quando questo viene rilevato nel controller si potrebbe aggiungere la logica necessaria per il modulo per chiudere la finestra di dialogo dopo l'esecuzione.