現在、新しいプロジェクトでTwitter の Bootstrap ツールキットを使用しています。ASP.NET MVC3 でモーダル ダイアログを使用する最良の方法について質問がありました。
モーダルのマークアップを含むパーシャルを作成し、javascript を使用してそれをページにレンダリングするのがベスト プラクティスですか、それともより良い方法がありますか?
現在、新しいプロジェクトでTwitter の Bootstrap ツールキットを使用しています。ASP.NET MVC3 でモーダル ダイアログを使用する最良の方法について質問がありました。
モーダルのマークアップを含むパーシャルを作成し、javascript を使用してそれをページにレンダリングするのがベスト プラクティスですか、それともより良い方法がありますか?
これは、ASP.Net MVC 4 でフォームとパーシャルを操作する Twitter の Bootstrap (2.x) モーダル ダイアログを示す私の小さなチュートリアルです。
MVC 5.1 と Bootstrap 3.1.1 を対象とする同様のプロジェクトをダウンロードするには、このサイトにアクセスしてください。
空の MVC 4 インターネット テンプレートから始めます。
NuGet を使用して Bootstrap への参照を追加する
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"));
Views/Shared/_Layout.cshtml で @styles.Render 行を次のように変更します。
@Styles.Render("~/Content/css", "~/Content/themes/base/css", "~/Content/bootstrap")
および @Scripts.Render 行:
@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui", "~/bundles/bootstrap")
ここまでで、MVC 4 で動作する Bootstrap の準備ができたので、単純なモデル クラス 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 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>
これはデザインによって異なりますが、モーダルのテンプレートが必要です。
たとえば、単一の Web アプリでは、毎回新しいインスタンスを作成するためのテンプレートが配置されている必要があります。
通常、通常の Web サイトでは、このテンプレートを js 作成関数内に保存して、http 経由で毎回ファイルをユーザーに送信する必要がないようにし、ユーザーがそれをキャッシュできるようにします。