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

Question

У меня есть различные простые ASP.NET Представления MVC для операций CRUD, которые прекрасно работают сами по себе как простая веб-страница.Теперь я интегрирую их в сам веб-сайт (в контент) и добавлю, например, ссылки типа "Создать новую запись", которые запустят просмотр в выбранном клоне лайтбокса (пока не знаю, какого именно, возможно Colorbox или Thickbox, но это не имеет значения).

Чего я хочу добиться, так это того, чтобы само представление каким-то образом определяло, что оно было открыто в диалоговом окне пользовательского интерфейса JavaScript, чтобы действие формы (чаще всего POST с использованием простой кнопки Отправки) отображалось с логикой, которая закрывала бы диалоговое окно пользовательского интерфейса после выполнения действия.

Теперь просмотры работают следующим образом: POST / Redirect / GET .Представление по-прежнему должно поддерживать этот простой шаблон при открытии непосредственно через URL в веб-браузере, но должно отображать некоторую дополнительную логику при открытии через диалоговое окно JavaScript.

Надеюсь, вы понимаете мой вопрос.Любая помощь приветствуется

Answer 1

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

Итак, первое, что вам нужно, это новый 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);
    }        
}

Итак, моя модальная.Главная страница очень проста.Все, что у меня есть, - это оболочка div, поэтому я знаю, когда что-то отображается внутри модального окна.Это будет полезно, когда вам нужно выбрать определенные элементы с помощью jquery только тогда, когда элементы находятся в "модальном режиме".

Модальный.Мастер

<%@ 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, встроенные в ваше приложение с минимальным количеством кода.Теперь я выбрал Цветная коробка в качестве моего скрипта модального окна исключительно потому, что я хотел прозрачные углы в стиле 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.Форма поддерживает множество возможностей расширения, поэтому настроить ее должно быть несложно.

Обратите внимание, что все это было сделано в MVC 2, но в любом случае вот мой код контроллера, просто чтобы показать, как легко это сделать.Помните, что моей целью proof of concept было заставить модальные окна работать таким образом, чтобы мне не нужно было вносить никаких изменений в код, кроме настройки некоторой базовой инфраструктуры.

    [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 to вы могли бы добавить параметр строки запроса, такой как &javascriptWindow=id, когда это будет обнаружено в контроллере, вы могли бы добавить необходимую логику в форму, чтобы закрыть диалоговое окно после выполнения.