ASP.NET MVC simple CRUD vistas de apertura / cierre de la interfaz de usuario de diálogo JavaScript

Question

Tengo varias vistas simples ASP.NET MVC para las operaciones CRUD que funcionan bien por su propia cuenta como una página web sencilla. Ahora voy a integrarlos en la propia página web (en el contenido) y tienen por ejemplo los enlaces como "Crear mensaje nuevo" que el fuego de la vista en una mesa de luz clon elegido (no sé todavía cuál, quizá Colorbox o Thickbox pero eso no importa).

Lo que quiero lograr es que la vista en sí de alguna manera detecta que se abrió en un diálogo de JavaScript interfaz de usuario de modo que la acción de formulario (más comúnmente la postal usando un simple botón Enviar) se representará con una lógica que cerraría la interfaz de usuario de diálogo después de la acción se ha realizado.

La forma más vistas trabajan ahora es POST / redirección / GET. El punto de vista todavía debe apoyar este modelo simple cuando se abre directamente a través de URL en un navegador web, pero debe hacer algo de lógica adicional cuando se abre a través de diálogo JavaScript.

Esperamos que usted entiende mi pregunta. Cualquier ayuda apreció

Answer 1

Su suerte, he hecho esto!

Así que lo primero que se necesita es un nuevo ViewEngine para manejar la representación de una página sin todas las cosas encabezado / pie de página normal que se interpongan en el camino de sus ventanas modales. La forma más simple de hacerlo es utilizar una página maestra en su mayoría vacío para sus ventanas modales. Usted quiere que la lógica de conmutación página maestra fuera del camino y en una ViewEngine encargo porque de lo contrario cada método controlador se va a tener que tener si () else () por todo el lugar detección IsAjaxRequest (). Me gusta seca seca, Sahara.

Con esta técnica también tienen la ventaja de que degradan con mucha gracia. Mi sitio funciona sin javascript a la perfección. Los enlaces son muy bien, forma de trabajo, cero cambios en el código para pasar de "modal sitio conscientes" de llanura de edad de formulario HTML se somete.

Todo lo que hice fue subclase el motor por defecto y añadir algunos bits de selección MasterPage:

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

Así que mi página Modal.Master es muy simple. Todo lo que tengo es un envoltorio div así que sé cuando algo se hace dentro de la ventana modal. Esto será útil cuando se necesita para seleccionar ciertos elementos con jQuery sólo cuando los elementos están en "modo modal".

Modal.Master

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

El siguiente paso es crear su forma. Yo uso el nombre = nombre de entrada propiedad predeterminada para que pueda modelar unen con facilidad y mantener las cosas simples. Nada especial en el formulario. Me parece a usted lo haría normalmente. (Tenga en cuenta que estoy usando MVC 2 y EditorFor () en mi código, pero eso no debería importar) Aquí está mi última HTML:

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

Además de modelo de unión muy bien también se puede utilizar el Jquery.Form complemento tener sin costuras y fácil ajax capacidades en capas en su aplicación con el código mínimo. Ahora he elegido ColorBox como mi guión ventana modal puramente porque quería Facebookesque esquinas transparentes y me gustan los puntos de extensibilidad el autor agregó.

Ahora, con estos scripts combinados se obtiene una muy buena combinación que hace que esta técnica realmente estúpido fácil de hacer en javascript. La única Javascript he tenido que añadir era (en el interior 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() });
    });

Aquí estoy contando ColorBox para abrir una ventana modal para mis enlaces de edición (Edit alimentos). Luego de unión van evento completo de la caja de colores para conectar a tus cosas ajaxform con éxito una devolución de llamada para decirle ColorBox para cerrar la ventana modal. Eso es todo.

Este código fue hecho como una prueba de concepto y es por eso que el motor de vista es realmente lite y no hay otra forma de validación o el bling estándar. ColorBox y JQuery.Form tienen toneladas de ayuda extensibilidad de modo personalización de esto debería ser fácil.

Tenga en cuenta esto se hizo en MVC 2, pero aquí está mi código de controlador de todas formas sólo para mostrar lo fácil que es hacerlo. Recordar mi prueba de concepto objetivo era conseguir que las ventanas modales de trabajo de tal manera que yo no tenía que hacer ningún código cambia aparte de establecer algún tipo de infraestructura básica.

    [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

Cuando la edificación de la dirección URL de jQuery para hacer un AJAX llegar, se podría añadir un parámetro de cadena de consulta como & javascriptWindow = id, cuando este se detecta en el controlador podría añadir la lógica necesaria para el formulario de cerrar el cuadro de diálogo después de la ejecución.