在asp.net mvc中实现时，Twitter Bootstrap模式无法正常工作

我已经使用局部视图在MVC中集成了twitter bootstrap模式，但它无法正常工作，在我通过单击创建按钮加载模态之前以及关闭模态弹出模式弹出窗口之后，在父屏幕上有部分模态弹出窗口内容显示在父屏幕上，没有任何CSS。 我想用它来编辑数据。 以下是工作代码。 请帮忙解决这个问题。 谢谢..

_Create.cshtml（部分视图）

@using MvcTwitterBootstrap.Models @model MyViewModel 
 × 
Create Foo Bar
 
 @using (Html.BeginForm("Create", "Home", FormMethod.Post, new { @class = "modal-form" })) { @Html.ValidationSummary() 
 
 @Html.LabelFor(x => x.Foo) @Html.EditorFor(x => x.Foo) @Html.ValidationMessageFor(x => x.Foo) 
 
 @Html.LabelFor(x => x.Bar) @Html.EditorFor(x => x.Bar) @Html.ValidationMessageFor(x => x.Bar) 
 
 
 Undo Save 
 } 

Index.cshtml

   @Html.ActionLink("Create", "Create", null, null, new { id = "btnCreate", @class = "btn btn-small btn-info" }) 
 
 
 
  $(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; }); }  

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"); } } } 

Answer 1

为什么要进行两次动作调用。 你可以试试这种方式

Index.cshtml

    Create 
 
 
 
Create Foo Bar
 × 
 
 
 @using (Html.BeginForm("Create", "Home", FormMethod.Post, new { id="createForm", @class = "form-horizontal" })) { @Html.ValidationSummary() 
 @Html.LabelFor(x => x.Foo) 
 @Html.EditorFor(x => x.Foo) @Html.ValidationMessageFor(x => x.Foo) 
 
 
 @Html.LabelFor(x => x.Bar) 
 @Html.EditorFor(x => x.Bar) @Html.ValidationMessageFor(x => x.Bar) 
 
 } 
 
 Undo Save 
  

在控制器中，您可以删除get 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"); } } }