简单的ASP.NET MVC的CRUD意见开/在JavaScript UI对话框关闭

Question

我有这很好地工作在自己作为一个简单的网页CRUD操作各种简单的ASP.NET MVC的意见。我现在将它们集成到网站本身（到内容），并有像实例链接“创建新的岗位”，这将火起来在选定灯箱克隆的视图（还不知道是哪一个，也许彩盒或ThickBox的，但这并不重要）。

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

视图现在的工作方式是POST /重定向/ GET。当进URL在Web浏览器直接打开但通过JavaScript对话框打开时应该呈现一些附加的逻辑视图应该仍然支持这种简单的图案。

希望你明白我的问题。任何帮助理解

Answer 1

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

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

使用这种技术我也有非常降解正常的优点。我的网站功能，而不只是JavaScript的完美。链接是可以的，工作形式，零次代码修改可以从走“模态感知网站”，以普通的旧的HTML表单提交。

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

<强>视图引擎：

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的某些元素，只有当要素在“模式模式”。

<强> Modal.Master

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

在接下来的步骤是创建形式。我使用默认的属性名称=输入名字，所以我可以很容易地建模绑定和让事情变得简单。没有什么特别的形式。我看起来就像你做正常。 （请注意，我在我的代码使用MVC 2和EditorFor（），但是这不应该的问题），这是我最后的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功能分层为用最少的代码应用程序。现在我选择彩盒我的模态窗口脚本纯粹是因为我想Facebookesque透明的角落和我喜欢的可扩展性点笔者加入。

现在这些脚本结合你得到一个非常好的组合，使这一技术非常愚蠢的容易在JavaScript中执行。我不得不添加的唯一的JavaScript为（内部的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的东西有成功回调告诉彩盒关闭模式窗口。这就是它。

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

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

    [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

当建立的URL的jQuery做一个AJAX GET来，可以添加一个查询字符串参数诸如javascriptWindow = ID，当该控制器检测到可以添加必要的逻辑到窗体关闭对话框执行之后。