简单的ASP.NET MVC的CRUD意见开/ JavaScript中的UI对话框关闭 [英] Simple ASP.NET MVC CRUD views opening/closing in JavaScript UI dialog

问题描述

我有哪些做工精细自己作为一个简单的网页CRUD操作简单的各种ASP.NET MVC的意见。我现在将它们整合到网站本身（在内容），并有类似的例子链接创建新帖子，这将火起来在选定灯箱克隆的观点（还不知道是哪一个，也许彩盒或ThickBox的，但这并不重要）。

I have various simple ASP.NET MVC views for CRUD operations which work fine on their own as a simple webpage. I will now integrate them into the website itself (into the content) and have for instance links like "Create new post" which would fire up the view in a chosen Lightbox clone (don't know yet which one, maybe Colorbox or Thickbox but that doesn't matter).

我想实现的是视图本身以某种方式检测到它是在一个JavaScript的用户界面对话框打开，这样，表单操作（最常见的POST使用一个简单的提交按钮）将与将关闭UI逻辑来呈现动作后对话已执行。

What I want to achieve is that the view itself somehow detects that it was opened in a JavaScript UI dialog so that the Form action (most commonly POST using a simple Submit button) will be rendered with a logic that would close the UI dialog after the action has performed.

意见现在的工作方式是POST /重定向/ GET。该视图应该还是支持的时候进URL在Web浏览器中直接打开，但通过JavaScript对话框打开时应该呈现一些额外的逻辑，这种简单的模式。

The way views work now is POST/Redirect/GET. The view should still support this simple pattern when opened directly thru URL in a web browser but should render some additional logic when opened through JavaScript dialog.

希望你明白我的问题。任何帮助AP preciated

Hopefully you understand my question. Any help appreciated

推荐答案

您幸运，我已经做到了这一点！

Your in luck, I've done this!

所以，你首先需要的是一个新的视图引擎来处理渲染页面，而所有正常的页眉/页脚的东西，会在你的模态窗口的方式获得。做到这一点的simpliest的方法是使用一个大部分是空的母版页为你的模态窗口。你想母版页切换逻辑出的方式，并在自定义视图引擎，否则每个控制器方法将不得不如果有（）其他（）各地（）的地方检测IsAjaxRequest。我喜欢干的，干撒哈拉沙漠

So the first thing you need is a new ViewEngine to handle rendering a page without all the normal header/footer stuff that will get in the way of your modal windows. The simpliest way to do that is to use a mostly empty master page for your modal windows. You want the master page switching logic out of the way and in a custom ViewEngine because otherwise each controller method is going to have to have if() else() all over the place detecting IsAjaxRequest(). I like dry, sahara dry.

使用此技术我也有降解非常优美的优点。我的网站功能，而不只是JavaScript的完美。链接都很好，工作形式，零code变化从模态感知网站，以普通的旧html表单提交去。

With this technique I also have the advantage of degrading very gracefully. My site functions without javascript just perfectly. Links are fine, forms work, zero code changes to go from "modal aware site" to plain old html form submits.

我所做的只是子类的默认引擎，并添加一些母版选择位：

All I did was subclass the default engine and add some MasterPage selection bits:

视图引擎：

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

所以我的Modal.Master页面非常简单。我只有一个div包装，所以我知道什么事情是模态窗口中呈现。这将是有益的，当你需要选择与jquery的某些元素，只有当元素​​在模式模式。

So my Modal.Master page is very simple. All I have is a div wrapper so I know when something is rendered inside the modal window. This will be helpful when you need to select certain elements with jquery only when the elements are in "modal mode".

Modal.Master

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

接下来的步骤是创建表单。我使用默认的属性名称=输入名字，所以我可以很容易地模拟约束和让事情变得简单。没有什么特别的形式。我看起来就像你做正常。 （请注意，我在我的code。使用MVC 2和EditorFor（），但是这不应该的问题），这是我最后的HTML：

The next step is to create your form. I use the default property name = input name so I can model bind easily and keep things simple. Nothing special about the form. I looks just like you'd do it normally. ( Note I'm using MVC 2 and EditorFor() in my code but that shouldn't matter ) Here is my final HTML:

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>

除了模型绑定真的很好，你也可以使用 Jquery.Form插件有分层为无缝，易Ajax功能的应用程序最小code。现在，我已经选择彩盒我的模态窗口脚本纯粹是因为我想Facebookesque透明的角落和我喜欢的扩展点笔者说。

Besides model binding really nicely you can also use the Jquery.Form plugin to have seemless and easy ajax capabilities layered into your application with minimal code. Now I've chosen ColorBox as my modal window script purely because I wanted Facebookesque transparent corners and I like the extensibility points the author added.

现在这些脚本结合你得到一个非常好的组合，使这项技术真的很傻很容易在JavaScript中执行。我不得不添加的唯一JavaScript是（里面的document.ready）：

Now with these scripts combined you get a really nice combination that makes this technique really stupid easy to do in javascript. The only javascript I had to add was ( inside 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() });
    });

在这里，我要告诉彩盒打开一个模式窗口为我的编辑链接（编辑食品）。然后结合去颜色框的完整事件接线你当作ajaxForm的东西有成功回​​调告诉彩盒关闭模式窗口。完蛋了。

Here I'm telling ColorBox to open a modal window for my edit links ( Edit Food ). Then binding go the colorbox's complete event to wire up your ajaxform stuff with a success callback to tell ColorBox to close the modal window. Thats it.

这code全部完成的概念，这就是一个证明为什么视图引擎确实是精简版，没有验证或其他标准形式金光闪闪。彩盒和JQuery.Form有大量的可扩展性支持，因此定制这个应该很容易。

This code was all done as a proof of concept and thats why the view engine is really lite and there is no validation or other standard form bling. ColorBox and JQuery.Form have tons of extensibility support so customizing this should be easy.

请注意这是所有MVC 2做，但这里是我的控制器code反正只是为了显示这是多么容易的事情。记住我的概念证明的目标是让模态窗口在这样，我没有做任何code的变化以外设置一些基本的基础设施的方式工作。

Note this was all done in MVC 2 but here is my controller code anyway just to show how easy this is to do. Remember my proof of concept goal was to get modal windows working in such a way that I didn't have to make any code changes other than set up some basic infrastructure.

    [UrlRoute(Path="edit/food")]
    public ActionResult EditFood()
    {            
        return View(new Food());
    }

    [HttpPost][UrlRoute(Path = "edit/food")]
    public ActionResult EditFood(Food food)
    {          
        return View(food);
    }

这篇关于简单的ASP.NET MVC的CRUD意见开/ JavaScript中的UI对话框关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！