什么叫使用Twitter的引导在ASP.NET MVC模式对话框的最佳方式？ [英] What's the best way to call a modal dialog in ASP.NET MVC using Twitter Bootstrap?
问题描述
href=\"http://twitter.github.com/bootstrap/#popovers\">一个新的项目Twitter的引导工具包和我的最佳方式的一个问题使用模态对话框中ASP.NET MVC3。
I'm currently using Twitter's Bootstrap toolkit on a new project and I had a question on the best way to use the modal dialog in ASP.NET MVC3.
时有一个部分包含模态的标记，然后使用JavaScript来呈现到页面上，还是有更好的方法？最好的做法
Is the best practice to have a Partial that contains the modal's markup and then use javascript to render that onto the page or is there a better approach?
推荐答案
下面去我的小教程这表明Twitter的引导（2.X），随着ASP.Net的形式和谐音MVC 4。工作模态对话框
Here goes my little tutorial which demonstrates Twitter's Bootstrap (2.x) modal dialog that works with forms and partials in ASP.Net MVC 4.
要下载类似的项目，但针对MVC 5.1和3.1.1引导请访问这个网站。
To download similar project but targeting MVC 5.1 and Bootstrap 3.1.1 please visit this site.
先建立一个空MVC 4 Internet公司的模板。
Start with an empty MVC 4 Internet template.
添加参考使用的NuGet来引导
Add reference to Bootstrap using NuGet
在App_Start / BundleConfig.cs加上下面几行：
In the App_Start/BundleConfig.cs add the following lines:
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行，以便它看起来就像：
In the Views/Shared/_Layout.cshtml modify the @styles.Render line so it will look like:
@Styles.Render("~/Content/css", "~/Content/themes/base/css", "~/Content/bootstrap")
和@ Scripts.Render行：
and the @Scripts.Render line:
@Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui", "~/bundles/bootstrap")
到目前为止，我们已经引导prepared与MVC 4到工作，所以让我们添加一个简单的模型类MyViewModel.cs到/ Models文件夹：
So far we have Bootstrap prepared to work with MVC 4 so let's add a simple model class MyViewModel.cs to the /Models folder:
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中添加以下行：
In the HomeController Add the following lines:
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");
}
在查看/ Home文件夹中创建新的局部视图，并将其命名_Create.cshtml：
Create new Partial View in the Views/Home folder and name it _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>
}
在主页/ Index.cshtml去除模板默认的内容，并替换为以下：
In the Home/Index.cshtml remove the default content from the template and replace it with following:
@{
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>
}
如果你运行你的应用程序，一个很好的引导模式将点击主页上的创建按钮后出现。
If you run your application, a nice Bootstrap modal will appear after clicking the Create button on the Home page.
试着在注释中HomeController.cs 的SaveChanges（）//抛出行来证明你的控制器处理的错误会在对话框中正确显示。
Try to uncomment the SaveChanges() //throw line in HomeController.cs to prove that your controller handled errors will appear correctly in the dialog.
我希望我的样本澄清纳入引导，并在MVC应用程序中创建模态的位全过程。
I hope that my sample clarifies a bit whole process of incorporating Bootstrap and creating modals in the MVC application.
这篇关于什么叫使用Twitter的引导在ASP.NET MVC模式对话框的最佳方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
