Simple ASP.NET MVC CRUD vistas de apertura / cierre en el cuadro de diálogo de la IU de JavaScript

Tengo varias vistas ASP.NET MVC simples para operaciones CRUD que funcionan bien por sí mismas como una simple página web. Ahora los voy a integrar en el sitio web (en el contenido) y tengo, por ejemplo, enlaces como “Crear nueva publicación” que dispararía la vista en un clon de Lightbox elegido (aún no sé cuál, tal vez Colorbox o Thickbox pero eso no importa).

Lo que quiero lograr es que la vista de alguna manera detecte que se abrió en un cuadro de diálogo de la IU de JavaScript para que la acción Formulario (más comúnmente POST usando un simple botón Enviar) se represente con una lógica que cerraría el diálogo de IU después de la acción ha realizado.

La forma en que las vistas funcionan ahora es POST / Redirect / GET. La vista aún debería admitir este patrón simple cuando se abre directamente a través de la URL en un navegador web, pero debería generar cierta lógica adicional cuando se abre a través del cuadro de diálogo de JavaScript.

Espero que entiendas mi pregunta. Cualquier ayuda apreciada

    Tuviste suerte, ¡he hecho esto!

    Entonces, lo primero que necesita es un nuevo ViewEngine para manejar la representación de una página sin todas las cosas normales de encabezado / pie de página que se interpondrán en el camino de sus ventanas modales. La forma más sencilla de hacerlo es utilizar una página maestra en su mayoría vacía para sus ventanas modales. Desea que la página maestra cambie la lógica fuera del camino y en un ViewEngine personalizado porque, de lo contrario, cada método del controlador tendrá que tener if () else () en todo el lugar detectando IsAjaxRequest (). Me gusta seco, sáhara seco.

    Con esta técnica también tengo la ventaja de degradar con mucha gracia. Mi sitio funciona sin javascript perfectamente. Los enlaces están bien, los formularios funcionan, los cambios en el código cero van desde el “sitio sensible a los modos” a los viejos envíos de formularios html.

    Todo lo que hice fue subclasificar el motor predeterminado y agregar algunos bits de selección de MasterPage:

    El motor de visualización:

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

    Entonces mi página Modal.Master es muy simple. Todo lo que tengo es un envoltorio div, así que sé cuándo algo se procesa dentro de la ventana modal. Esto será útil cuando necesite seleccionar ciertos elementos con jquery solo cuando los elementos estén en “modo modal”.

    Modal.Master

     < %@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> 

    El siguiente paso es crear tu formulario. Utilizo el nombre de propiedad predeterminado = nombre de entrada para poder modelar el enlace fácilmente y mantener las cosas simples. Nada especial sobre la forma. Me parece que lo harías normalmente. (Tenga en cuenta que estoy usando MVC 2 y EditorFor () en mi código, pero eso no debería importar) Aquí está mi último HTML:

    Salida de HTML

     

    EditFood

    Además del enlace de modelo muy bien, también puede usar el plugin Jquery.Form para tener capacidades de ajax simples y fáciles de aplicar en capas en su aplicación con un código mínimo. Ahora he elegido ColorBox como mi script de ventana modal simplemente porque quería Facebookesque esquinas transparentes y me gustan los puntos de extensibilidad que el autor agregó.

    Ahora, con estos scripts combinados, obtienes una combinación realmente agradable que hace que esta técnica sea realmente estúpida y fácil de hacer en javascript. El único javascript que tuve que agregar fue (dentro de 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í le digo a ColorBox que abra una ventana modal para mis enlaces de edición (Editar alimento). A continuación, vincula el evento completo del colorbox para conectar tus elementos ajaxform con una callback correcta para indicar a ColorBox que cierre la ventana modal. Eso es.

    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 validación u otra forma estándar bling. ColorBox y JQuery.Form tienen toneladas de compatibilidad de extensibilidad por lo que personalizar esto debería ser fácil.

    Tenga en cuenta que todo esto se hizo en MVC 2, pero aquí está el código de mi controlador para mostrar lo fácil que es hacer esto. Recuerda que mi objective de prueba de concepto era lograr que las ventanas modales funcionaran de tal forma que no tuviera que hacer ningún cambio de código más allá de configurar alguna 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); } 

    Al construir la URL para jQuery para hacer un AJAX GET, puede agregar un parámetro de cadena de consulta, como & javascriptWindow = id, cuando esto se detecta en el controlador, puede agregar la lógica necesaria al formulario para cerrar el diálogo después de la ejecución.