在 asp.net mvc 中实现时，Twitter Bootstrap 模式无法正常工作
Posted
技术标签:
【中文标题】在 asp.net mvc 中实现时，Twitter Bootstrap 模式无法正常工作【英文标题】：Twitter Bootstrap modal does not work properly when implementing in asp.net mvc 【发布时间】：2013-12-13 10:37:49 【问题描述】：我已经使用局部视图在 MVC 中集成了 twitter 引导模式，但它不能正常工作，在我通过单击创建按钮加载模式之前和关闭模式弹出之后，父屏幕上存在一些模式弹出窗口up modal弹出内容显示在父屏幕上，没有任何css。我想用它来编辑数据。下面是工作代码。请帮助解决这个问题。谢谢..
_Create.cshtml（部分视图）
@using MvcTwitterBootstrap.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>
索引.cshtml
<link href="@Url.Content("~/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
@Html.ActionLink("Create", "Create", null, null, new id = "btnCreate", @class = "btn btn-small btn-info" )
<div id='dialogDiv' class='modal fade in'>
<div id='dialogContent'>
</div>
</div>
<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>
家庭控制器
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcTwitterBootstrap.Models;
namespace MvcTwitterBootstrap.Controllers
public class HomeController : Controller
//
// GET: /Home/
public ActionResult Index()
return View();
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");
【问题讨论】：
使用class='modal hide fade in' 解决“部分模态弹出窗口在父屏幕上”。您的其他问题未重现，一切正常。
当我添加 class='modal hide fade in' 时，不会加载模式弹出窗口。
这里是完整解决方案中代码的链接：dl.dropboxusercontent.com/u/8047386/TestMvcApplication.zip 一切正常。
【参考方案1】：
为什么要有两个动作调用。你可以试试这个方法
索引.cshtml
<link href="@Url.Content("~/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/bootstrap/js/bootstrap.min.js")" type="text/javascript"></script>
<script type="text/javascript">
function bindForm()
$.ajax(
url: "/Home/Create",
data: $('#createForm').serialize(),
type: 'post',
success: function (data)
if (data.Success)
// DO your code
$("#createModal").modal('hide');
else //Display error message
,
error: function (xhr, status)
//Display error message
);
return false;
</script>
<a href="#" class="btn btn-primary" onclick="$('#createModal').modal('show')">Create</a>
<div id="createModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; margin-left: -500px; width: 70%;">
<div class="modal-header">
<div class="row-fluid">
<h3 class="span11">Create Foo Bar</h3>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
</div>
<div class="modal-body">
@using (Html.BeginForm("Create", "Home", FormMethod.Post, new id="createForm", @class = "form-horizontal" ))
@Html.ValidationSummary()
<div class="control-group">
<label class="control-label">@Html.LabelFor(x => x.Foo)</label>
<div class="controls">
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
</div>
</div>
<div class="control-group">
<label class="control-label">@Html.LabelFor(x => x.Bar)</label>
<div class="controls">
@Html.EditorFor(x => x.Bar)
@Html.ValidationMessageFor(x => x.Bar)
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Undo</button>
<button class="btn btn-primary" type="submit" onclick="return bindForm()">Save</button>
</div>
</div>
在控制器中，您可以删除 get 调用创建
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcTwitterBootstrap.Models;
namespace MvcTwitterBootstrap.Controllers
public class HomeController : Controller
//
// GET: /Home/
public ActionResult Index()
return View();
[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");
【讨论】：
以上是关于在 asp.net mvc 中实现时，Twitter Bootstrap 模式无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章