Simples ASP.NET MVC CRUD vê abertura / fecho na caixa de diálogo JavaScript UI

Question

Eu tenho vários simples vista ASP.NET MVC para operações CRUD que funcionam muito bem por conta própria como uma página web simples. Agora vou integrá-los no próprio site (no conteúdo) e tem para as ligações de instância como "Criar nova mensagem" que o fogo até o ponto de vista em um clone Lightbox escolhido (não sei ainda qual, talvez Colorbox ou Thickbox mas isso não importa).

O que eu quero alcançar é que a vista em si de alguma forma detectar que ele foi aberto em um diálogo JavaScript UI para que a ação Form (mais comumente POST usando um simples botão Enviar) serão renderizados com uma lógica que iria fechar a interface do usuário diálogo após a ação tem realizado.

A forma visualizações trabalhar agora é POST / Redirect / GET. A visão ainda deve apoiar este padrão simples quando abertos diretamente através de URL em um navegador web, mas deve render algum lógica adicional quando aberto através de diálogo JavaScript.

Esperamos que você entender a minha pergunta. Qualquer ajuda apreciado

Answer 1

A sua sorte, eu fiz isso!

Assim, a primeira coisa que você precisa é um novo ViewEngine para lidar com renderização de uma página sem todas as coisas normais de cabeçalho / rodapé que vai ficar no caminho de suas janelas modais. A maneira mais simples de fazer isso é usar uma página mestra quase vazio para suas janelas modais. Você quer que a página mestra lógica de comutação para fora do caminho e em uma ViewEngine costume porque senão cada método controlador vai ter que ter if () else () em todo o lugar detectar IsAjaxRequest (). I como seca, seca sahara.

Com esta técnica que eu também têm a vantagem de degradar muito graciosamente. As minhas funções site sem javascript perfeitamente. Ligações são bons, formas de trabalho, zero código muda para ir de "local cientes modal" para simples antigos submete formulário HTML.

Tudo que eu fiz foi subclasse o motor padrão e adicionar alguns bits de seleção MasterPage:

O mecanismo de exibição:

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

Assim, a minha página Modal.Master é muito simples. Tudo o que tenho é uma div envoltório então eu sei quando algo é processado dentro da janela modal. Isso será útil quando você precisa selecionar certos elementos com jQuery somente quando os elementos estão em "modo modal".

Modal.Master

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

O próximo passo é criar o formulário. Eu uso o nome da propriedade default = nome de entrada para que eu possa modelar ligam facilmente e manter as coisas simples. Nada de especial sobre a forma. I olha só como você faria normalmente. (Note que estou usando MVC 2 e EditorFor () no meu código, mas isso não importa) Aqui está o meu HTML final:

Saída 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>

Além de ligação realmente modelo bem você também pode usar o Jquery.Form plug-in ter seemless e fácil capacidades ajax mergulhado em sua aplicação com o mínimo de código. Agora eu escolhi ColorBox como meu script janela modal puramente porque eu queria cantos transparentes Facebookesque e eu como os pontos de extensibilidade o autor acrescentou.

Agora, com esses scripts combinados você tem uma combinação muito legal que faz com que esta técnica realmente estúpido fácil de fazer em javascript. A única javascript eu tive que adicionar era (dentro 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() });
    });

Aqui eu estou dizendo ColorBox para abrir uma janela modal para os meus editar links (Editar Alimentação). Em seguida, a ligação vai evento completo do colorbox para conectar-se o seu material ajaxform com um retorno de sucesso para contar ColorBox para fechar a janela modal. É isso.

Este código foi tudo feito como uma prova de conceito e é por isso que o motor vista é realmente lite e não há validação ou outra forma padrão de bling. ColorBox e JQuery.Form tem toneladas de suporte extensibilidade assim que personaliza este deve ser fácil.

Note que este foi feito em MVC 2, mas aqui é o meu código de controlador mesmo assim apenas para mostrar como isso é fácil de fazer. Lembrar da minha prova de meta conceito era conseguir janelas modais de trabalho de tal forma que eu não tenho que fazer qualquer código muda diferente de configurar algum infra-estrutura 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

Ao construir a URL para jQuery para fazer um GET AJAX, você poderia adicionar uma string de consulta parâmetro como & javascriptWindow = id, quando este for detectado no controlador que você pode adicionar a lógica necessária para a forma para fechar o diálogo após a execução.