MVC中的bootstrap 3模式不起作用

Question

我试图在我的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 >>按钮时，我的模态不显示。 但是当我检查网络部分并查看预览部分时，我可以看到正在从后端收集数据。 它只是那个模态没有显示。 我该怎么办？

EDIT1：

控制台错误

Answer 1

您在JavaScript函数中犯了一个错误。 它应该像下面这样：

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

更改为： modal(show)改为modal（'show'）