在asp.net mvc的实现，当Twitter的引导模式不能正常工作(Twitter Bootst

我已经集成在MVC Twitter的引导模式使用部分观点，但它不能正常工作，该模式弹出的某些部分是有父屏幕上之前，我通过点击创建按钮和关闭模式弹出模式弹出后，装载模式向上内容显示在父屏幕上而没有任何的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>
}

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

    }
}

为什么有两个行动电话。你可以试试这个方法

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>

和控制器，你可以删除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");
        }

    }
}