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

Ответ 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);
    }        
}

Итак, моя страница 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 plugin, чтобы иметь безразмерные и легкие возможности ajax, размещенные в вашем приложении с минимальным кодом, Теперь я выбрал ColorBox как мое модальное окно script чисто потому, что мне нужны прозрачные углы 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() });
    });

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

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

Ответ 2

При создании URL-адреса jQuery для выполнения AJAX GET вы можете добавить параметр строки запроса, такой как & javascriptWindow = id, когда это обнаружено в контроллере, вы можете добавить необходимую логику в форму, чтобы закрыть диалог после выполнения.