Простой ASP.NET MVC представления CRUD, открывающиеся/закрывающие в JavaScript диалоговое окно UI

Вам повезло, я сделал это!

Итак, первое, что вам нужно, это новый ViewEngine для обработки рендеринга страницы без всех обычных заголовков и нижних колонтитулов путь ваших модальных окон. Самый простой способ сделать это - использовать в основном пустую главную страницу для модальных окон. Вам нужно убрать логику переключения главной страницы и использовать настраиваемый ViewEngine, потому что в противном случае каждый метод контроллера должен будет иметь if () else () повсюду, обнаруживая IsAjaxRequest (). Я люблю сухое, сухое по сахаре.

С этой техникой у меня также есть то преимущество, что я очень изящно деградирую. Мой сайт отлично работает без javascript. Ссылки в порядке, формы работают, код не изменяется для перехода от "модального сайта" к простой старой HTML-форме.

Все, что я сделал, это подклассифицировал движок по умолчанию и добавил несколько битов выбора MasterPage:

Механизм просмотра:

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>

Следующим шагом является создание вашей формы. Я использую свойство по умолчанию name = input name, поэтому я могу легко привязать модель и упростить задачу. Ничего особенного в форме. Я выгляжу как обычно. (Обратите внимание, что я использую 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 . Сформируйте плагин , чтобы иметь простые и простые возможности Ajax, встроенные в ваше приложение с минимальным кодом. Теперь я выбрал ColorBox в качестве сценария модального окна просто потому, что мне нужны прозрачные углы в стиле Facebook, и мне нравятся точки расширяемости, добавленные автором.

Теперь, объединив эти сценарии, вы получите действительно красивую комбинацию, которая делает эту технику действительно легко реализовать в 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() });
    });

Здесь я говорю ColorBox открыть модальное окно для моих ссылок редактирования (Edit Food). Затем привязка идет к событию завершения colorbox, чтобы связать ваш материал ajaxform с успешным обратным вызовом, чтобы сообщить ColorBox о закрытии модального окна. Это оно.

Этот код был написан как доказательство концепции, и поэтому движок представления действительно упрощен, и в нем нет проверки или других стандартных форм. ColorBox и 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);
    }