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