MVC中的bootstrap 3模式不起作用答案

【问题标题】：bootstrap 3 modal in MVC not workingMVC中的bootstrap 3模式不起作用
【发布时间】：2014-03-09 02:14:26
【问题描述】：

我试图在我的 MVC 应用程序中显示来自 bootstrap 3(here) 的模式。这就是我所做的

@model DatePicker.Models.ViewModels.Appointment.CreateAppointmentSelectPersons
@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
    <link href="~/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
}
<button id="showDetail" class="btn btn-default">Next>></button>
<div id="appointmentModal" class="modal hide fade in" data-url="@Url.Action("Detail", "Appointment", new { appointmentId = Model.AppointmentId })">
    <div id="appointmentContainer"></div>
</div>

@section Scripts{
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
    @Scripts.Render("~/Scripts/bootstrap.min.js")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")


    <script type="text/javascript">    

        $("#showDetail").click(function () {
            var url = $("#appointmentModal").data('url');
            $.get(url, function (data) {
                $('#appointmentContainer').html(data);
                $('#appointmentModal').modal(show);
            });
        })

    </script>
}

局部视图

@model DatePicker.Models.ViewModels.Appointment.DetailsAppointment

<div class="modal fade" id="appointmentModal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="appointmentModalLabel">Details</h4>
            </div>
            <div class="modal-body">
                <h5>Your appointment is ready to be sent, please reveiew the details</h5>
                <dl class="dl-horizontal">
                    <dt>Subject/Name</dt>
                    <dd>@Model.Name</dd>                  
                </dl>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Confirm</button>
            </div>
        </div>
    </div>
</div>

在控制器中

   public ActionResult Detail(Guid appointmentId)
    {
        ....
        return PartialView(appointmentDetails);
    }

在这里，当我单击视图中的 Next>> 按钮时，我的模式不显示。但是当我检查网络部分并查看预览部分时，我可以看到数据是从我的后端收集的。它只是那个模态没有显示。我该怎么办？

编辑1：

控制台错误

【问题讨论】：

控制台有错误吗？
是的，它说显示未定义？
您正在将具有相同 id 的模态添加到现有模态。
你有没有试过把 show 用逗号写成这样：$('#appointmentModal').modal('show');
@Andrew 我做到了，现在没有错误，当我点击按钮时背景变暗但没有弹出模式

标签： javascript jquery asp.net-mvc twitter-bootstrap

【解决方案1】：

您在 JavaScript 函数中出错。应该是这样的：

   $("#showDetail").click(function () {
        var url = $("#appointmentModal").data('url');
        $.get(url, function (data) {
            $('#appointmentContainer').html(data);
            $('#appointmentModal').modal('show');
        });
    })

变化是：modal(show) 到 modal('show')

【讨论】：