本文介绍了在asp.net mvc的实现，当Twitter的引导模式不能正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在使用局部视图集成Twitter的引导模式在MVC但它不能正常工作，模式弹出的某些部分是有父屏幕上之前，我通过点击创建按钮和关闭模式弹出后，装载模式达模式弹出的内容显示在父屏幕上没有任何CSS。我想用它进行编辑的数据。下面是工作code。请帮助解决这个问题。谢谢..
_Create.cshtml（部分图）
@using MvcTwitterBootstrap.Models
@model MyViewModel
＆LT; DIV CLASS =模头＆GT;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆×LT; /按钮＆GT;
＆LT; H3 ID =myModalLabel＆GT;创建富酒吧和LT; / H3 GT＆;
＆LT; / DIV＆GT;@using（Html.BeginForm（创建，家，FormMethod.Post，新{@class =模式形式}））
{
@ Html.ValidationSummary（）＆LT; DIV CLASS =模体＆GT;
＆LT; DIV＆GT;
@ Html.LabelFor（X =＆GT; x.Foo）
@ Html.EditorFor（X =＆GT; x.Foo）
@ Html.ValidationMessageFor（X =＆GT; x.Foo）
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
@ Html.LabelFor（X =＆GT; x.Bar）
@ Html.EditorFor（X =＆GT; x.Bar）
@ Html.ValidationMessageFor（X =＆GT; x.Bar）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; DIV CLASS =模式躯＆GT;
＆LT;按钮类=BTN数据解雇=莫代尔ARIA隐藏=真＆GT;撤消和LT; /按钮＆GT;
＆LT;按钮类=BTN BTN-主要TYPE =提交＆GT;保存＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
}
Index.cshtml
＆LT;链接HREF =@ Url.Content（〜/引导/ CSS / bootstrap.min.css）的rel =stylesheet属性类型=文/ CSS /＆GT;
＆LT;脚本的src =@ Url.Content（〜/引导/ JS / bootstrap.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
@ Html.ActionLink（创建，创建，NULL，NULL，新{ID =的BtnCreate，@class =BTN BTN小BTN-INFO}）
＆LT; DIV ID ='dialogDiv'类='模态渐显'＆GT;
＆LT; DIV ID ='dialogContent'＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{ //可选：关闭的快取关闭
$ .ajaxSetup（{缓存：假}）; $（'＃的BtnCreate'）。点击（函数（）{
$（'＃dialogContent'）。负载（this.href，函数（）{
$（'＃dialogDiv'）。模态（{
背景：静态，
键盘：真
}， '显示'）;
bindForm（本）;
}）;
返回false;
}）;
}）; 功能bindForm（对话）{
$（'形式'，对话）.submit（函数（）{
$阿贾克斯（{
网址：this.action，
类型：this.method，
数据：$（本）.serialize（）
成功：函数（结果）{
如果（result.success）{
$（'＃dialogDiv'）模态（隐藏）。
//刷新：
// location.reload（）;
}其他{
$（'＃dialogContent'）HTML（结果）;
bindForm（）;
}
}
}）;
返回false;
}）;
}＆LT; / SCRIPT＆GT;
HomeController的
使用系统;
使用System.Collections.Generic;
使用System.Linq的;
使用的System.Web;
使用System.Web.Mvc;
使用MvcTwitterBootstrap.Models;命名空间MvcTwitterBootstrap.Controllers
{
公共类HomeController的：控制器
{
//
// 回家/
公众的ActionResult指数（）
{
返回查看（）;
} 公众的ActionResult的Create（）
{
返回PartialView（_创建）;
}
[HttpPost]
公众的ActionResult创建（MyViewModel模型）
{
如果（ModelState.IsValid）
{
尝试
{
调用SaveChanges（模型）;
返回JSON（新{成功=真}）;
}
赶上（例外五）
{
ModelState.AddModelError（，e.Message）;
} }
//坏事发生
返回PartialView（_创建模型）;
}
静态无效的SaveChanges（MyViewModel模型）
{
// Uncommment下一行来演示模式错误
//抛出新的异常（错误测试）;
} }
}
解决方案
为什么有两个行动电话。你可以试试这个方法。
Index.cshtml
＆LT;链接HREF =@ Url.Content（〜/引导/ CSS / bootstrap.min.css）的rel =stylesheet属性类型=文/ CSS /＆GT;
＆LT;脚本的src =@ Url.Content（〜/引导/ JS / bootstrap.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT; 功能bindForm（）{
$阿贾克斯（{
网址：/首页/新建
数据：$（'＃的CreateForm'）序列化（）。
类型：'后'，
成功：功能（数据）{
如果（data.Success）{
//做你的code
$（＃createModal）模式（隐藏）。
}
其他{//显示错误信息
}
}，
错误：功能（XHR，状态）{
//显示错误信息
}
}）;
返回false;
} ＆LT; / SCRIPT＆GT;
＆LT; A HREF =＃类=BTN BTN-小学的onclick =$（'＃createModal'）模态（'秀'）。＆GT;创建＆LT; / A＆GT;
＆LT; DIV ID =createModal级=模式隐藏变脸的tabindex = - 1角色=对话框中的咏叹调-labelledby =myModalLabelARIA隐藏=真的风格=显示：无;保证金左：-500px;宽度：70％;＆GT;
＆LT; DIV CLASS =模头＆GT;
＆LT; DIV CLASS =排液＆GT;
＆LT; H3类=span11＆GT;创建富酒吧和LT; / H3 GT＆;
＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆×LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模体＆GT;
@using（Html.BeginForm（创建，家，FormMethod.Post，新{ID =的CreateForm，@class =形横}））
{
@ Html.ValidationSummary（）
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签类=控制标签＆GT; @ Html.LabelFor（X =＆GT; x.Foo）LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
@ Html.EditorFor（X =＆GT; x.Foo）
@ Html.ValidationMessageFor（X =＆GT; x.Foo）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =控制组＆GT;
＆LT;标签类=控制标签＆GT; @ Html.LabelFor（X =＆GT; x.Bar）LT; /标签＆gt;
＆LT; DIV CLASS =控制＆GT;
@ Html.EditorFor（X =＆GT; x.Bar）
@ Html.ValidationMessageFor（X =＆GT; x.Bar）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
}
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模式躯＆GT;
＆LT;按钮类=BTN数据解雇=莫代尔ARIA隐藏=真＆GT;撤消和LT; /按钮＆GT;
＆LT;按钮类=BTN BTN-主要TYPE =提交的onclick =返回bindForm（）＆GT;保存＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
和控制器中，你可以删除得到呼吁建立
使用系统;
使用System.Collections.Generic;
使用System.Linq的;
使用的System.Web;
使用System.Web.Mvc;
使用MvcTwitterBootstrap.Models;命名空间MvcTwitterBootstrap.Controllers
{
公共类HomeController的：控制器
{
//
// 回家/
公众的ActionResult指数（）
{
返回查看（）;
} [HttpPost]
公众的ActionResult创建（MyViewModel模型）
{
如果（ModelState.IsValid）
{
尝试
{
调用SaveChanges（模型）;
返回JSON（新{成功=真}）;
}
赶上（例外五）
{
ModelState.AddModelError（，e.Message）;
} }
//坏事发生
返回PartialView（_创建模型）;
}
静态无效的SaveChanges（MyViewModel模型）
{
// Uncommment下一行来演示模式错误
//抛出新的异常（错误测试）;
} }
}
I have integrated twitter bootstrap modal in MVC using partial view but it does not work properly, some part of the modal popup is there on the parent screen before i load the modal by clicking on the create button and after closing the modal pop up modal pop up content is shown on the parent screen without any css. I want to use it for editing data. Below is the working code. Please help to solve this issue. Thanks..
_Create.cshtml (Partial View)
@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>
}
Index.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>
HomeController
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");
}
}
}
解决方案
Why to have two action calls. You can try this way
Index.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>
And in controller, you could remove get call for create
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的引导模式不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！