В настоящее время я использую Twitter Bootstrap toolkit в новом проекте, и у меня возник вопрос о наилучшем способе использования модального диалога в ASP.NET MVC3.
Лучше всего иметь Partial, который содержит модальную разметку, а затем использовать javascript для рендеринга на странице или есть лучший подход?
Вот мой небольшой учебник, в котором демонстрируется модальный диалог Twitter Bootstrap (2.x), который работает с формами и частицами в ASP.Net MVC 4.
Чтобы загрузить аналогичный проект, но с таргетингом на MVC 5.1 и Bootstrap 3.1.1, пожалуйста, посетите этот сайт.
Начните с пустого веб-шаблона MVC 4.
Добавить ссылку на Bootstrap с помощью NuGet
В App_Start/BundleConfig.cs добавьте следующие строки:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css"));
В представлениях/общих/_Layout.cshtml измените строку @styles.Render, чтобы она выглядела так:
@Styles.Render("~/Content/css", "~/Content/themes/base/css", "~/Content/bootstrap")
и строка @Scripts.Render:
@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui", "~/bundles/bootstrap")
До сих пор мы подготовили Bootstrap для работы с MVC 4, поэтому добавим простой класс MyViewModel.cs в папку /Models:
using System.ComponentModel.DataAnnotations;
namespace MvcApplication1.Models
{
public class MyViewModel
{
public string Foo { get; set; }
[Required(ErrorMessage = "The bar is absolutely required")]
public string Bar { get; set; }
}
}
В HomeController Добавьте следующие строки:
using MvcApplication1.Models;
//...
public ActionResult Create()
{
return PartialView("_Create");
}
[HttpPost]
public ActionResult Create(MyViewModel model)
{
if (ModelState.IsValid)
{
try
{
SaveChanges(model);
return Json(new { success = true });
}
catch (Exception e)
{
ModelState.AddModelError("", e.Message);
}
}
//Something bad happened
return PartialView("_Create", model);
}
static void SaveChanges(MyViewModel model)
{
// Uncommment next line to demonstrate errors in modal
//throw new Exception("Error test");
}
Создайте новый частичный вид в папке Views/Home и назовите его _Create.cshtml:
@using MvcApplication1.Models
@model MyViewModel
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Create Foo Bar</h3>
</div>
@using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @class = "modal-form" }))
{
@Html.ValidationSummary()
<div class="modal-body">
<div>
@Html.LabelFor(x => x.Foo)
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
</div>
<div>
@Html.LabelFor(x => x.Bar)
@Html.EditorFor(x => x.Bar)
@Html.ValidationMessageFor(x => x.Bar)
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Undo</button>
<button class="btn btn-primary" type="submit">Save</button>
</div>
}
В Home/Index.cshtml удалите содержимое по умолчанию из шаблона и замените его следующим:
@{
ViewBag.Title = "Home Page";
}
<br />
<br />
<br />
@Html.ActionLink("Create", "Create", null, null, new { id = "btnCreate", @class = "btn btn-small btn-info" })
<div id='dialogDiv' class='modal hide fade in'>
<div id='dialogContent'></div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(function () {
//Optional: turn the chache off
$.ajaxSetup({ cache: false });
$('#btnCreate').click(function () {
$('#dialogContent').load(this.href, function () {
$('#dialogDiv').modal({
backdrop: 'static',
keyboard: true
}, 'show');
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#dialogDiv').modal('hide');
// Refresh:
// location.reload();
} else {
$('#dialogContent').html(result);
bindForm();
}
}
});
return false;
});
}
</script>
}
Если вы запустите приложение, появится приятный мода Bootstrap после нажатия кнопки "Создать" на главной странице.
Попробуйте раскомментировать строку SaveChanges() //throw в HomeController.cs, чтобы убедиться, что ваш контроллер обработал ошибки в диалоговом окне.
Надеюсь, что в моем примере поясняется несколько сложный процесс включения Bootstrap и создания модалов в приложении MVC.
Отличный пример: мне пришлось немного модифицировать MVC 5 и Bootstrap 3.3.7, я изменил теги div div на следующий, иначе я просто получал серый фон и не модальный диалог. Надеюсь, это поможет кому-то.
<div id='dialogDiv' class='modal fade' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div id='dialogContent'></div>
</div>
</div>
</div>
Спасибо @zjerry решение отлично, но проверка jQuery не работает, чтобы исправить вам нужно изменить функцию bindForm следующим образом:
function bindForm(dialog) {
$.validator.unobtrusive.parse('form');
$('form', dialog).submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#dialogDiv').modal('hide');
// Refresh:
// location.reload();
} else {
$('#dialogContent').html(result);
bindForm();
}
}
});
return false;
});
}
Обратите внимание на первую строку функции, потому что форма загружается после инициализации проверки jQuery.
Большое спасибо
Это действительно зависит от вашего дизайна, но у вас должен быть шаблон для модалов.
В одном веб-приложении, например, у вас должен быть шаблон, вокруг которого вы каждый раз создаете новый экземпляр.
Обычно на обычном веб-сайте вы захотите сохранить этот шаблон внутри функции создания js, так что вам не придется отправлять файл пользователю каждый раз через http, и они могут кэшировать его.