我目前正在使用 Twitter's Bootstrap toolkit在一个新项目上,我有一个关于在 ASP.NET MVC3 中使用模式对话框的最佳方式的问题。
最好的做法是使用包含模式标记的部分,然后使用 javascript 将其呈现到页面上,还是有更好的方法?
最佳答案
这是我的小教程,它演示了 Twitter 的 Bootstrap (2.x) 模态对话框,它在 ASP.Net MVC 4 中使用表单和部分。
要下载类似项目但针对 MVC 5.1 和 Bootstrap 3.1.1,请 visit this site .
从一个空的 MVC 4 Internet 模板开始。
使用 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 文件夹中创建新的分部 View 并将其命名为 _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 模式。
尝试取消注释 HomeController.cs 中的 SaveChanges()//throw
行,以证明您的 Controller 处理的错误将正确显示在对话框中。
我希望我的示例阐明了在 MVC 应用程序中合并 Bootstrap 和创建模态的整个过程。
关于c# - 使用 Twitter Bootstrap 在 ASP.NET MVC 中调用模态对话框的最佳方式是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8093633/