Question

我想整合Twitter引导程序模式，但是当我点击按钮模态时加载索引页面时，我没有加载What's the best way to call a modal dialog in ASP.NET MVC using Twitter Bootstrap?。请帮忙解决这个问题，我的代码写在下面。

MyViewModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace MvcTwitterBootstrap.Models
{
    public class MyViewModel
    {
        public string Foo { get; set; }

        [Required(ErrorMessage = "The bar is absolutely required")]
        public string Bar { get; set; }
    }
}

HomeController.cs

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

    }
}

_Create.cshtml（PartialView）

@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>
<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 hide 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>

Answer 1

您的部分视图是MyViewModel类的强类型。但是在您的Create操作方法中，您没有将viewmodel的实例传递给局部视图。

试试这个

public ActionResult Create()
{
   var vm=new MyViewModel();        
   return PartialView("_Create",vm);
}

Answer 2

在HTML代码段

中

<div id='dialogDiv' class='modal hide fade in'>
    <div id='dialogContent'></div>
</div>

尝试删除“隐藏”类以使其成为

<div id='dialogDiv' class='modal fade in'>
    <div id='dialogContent'></div>
</div>

我发现从Bootstrap v2升级到v3时我的现有模态都没有显示，直到我删除了'hide'类。

我没有太多关注，但我认为JavaScript函数不再删除隐藏类。

Answer 3

删除您的操作链接，并使用data-toggle =“modal”data-target =“＃dialogDiv”属性将其设为按钮。

<button class="btn btn-primary" data-toggle="modal" data-target="#dialogDiv">Create</button>

删除你的$（'＃btnCreate'）。点击JS代码。引导数据属性将处理显示和隐藏模态。

使用Index视图加载Create partial，而不是使用Ajax调用。

<div id='dialogDiv' class='modal hide fade in'>
    <div id='dialogContent'>@Html.Partial("~/{PathToView}/_Create.cshtml", new MyViewModel())</div>
</div>

确保您正在加载jquery-validate JS库。

修改您的Create controller操作以在成功时返回RedirectResult而不是JSON结果：

return RedirectToAction("Index");

将它集成到asp.net mvc中时，不会加载Twitter引导模式

3 个答案: