Я интегрировал модальный twitter bootstrap в MVC, используя частичный вид, но он не работает должным образом, некоторая часть модального всплывающего окна находится на родительском экране до того, как я загружу модальное окно, нажав кнопку «Создать», и после закрытия модального всплывающего окна модальное всплывающее окно up содержимое отображается на родительском экране без какого-либо 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>
HomeКонтроллер
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'
, чтобы решить, что часть модального всплывающего окна находится на родительском экране. Другие ваши проблемы не воспроизводились, и все работало хорошо. - person vortexwolf   schedule 27.11.2013