Question

我有一个简单的应用程序，该应用程序具有来自db的列表，我想通过模式显示行的详细信息。问题是模态没有显示，我认为问题是javascript没有触发onclick动作。我已尝试在控制器的 Details（）上设置断点，但它没有触发，这意味着问题出在 index.cshtml 中。请帮忙。

Index.cshtml

@model IEnumerable<DTS.Models.Binder.ViewDocument>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
    @Html.ActionLink("Create New", "AddOrEdit", "Document")
</p>
<table class="table table-hover">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.DocumentNo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DocumentType)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PrimaryDetail)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Status)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateCreated)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DateUpdated)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.UpdatedBy)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.DesignatedOffice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.IsPriority)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.DocumentNo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DocumentType)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PrimaryDetail)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Status)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateCreated)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DateUpdated)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.UpdatedBy)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DesignatedOffice)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.IsPriority)
            </td>
            <td>
                <span class="btn btn-xs btn-primary btnEdit" id="edit_@item.DocumentNo" onclick="createModal('@Url.Action("Details", "Document", new { id = item.DocumentNo })')">Details</span>


            </td>
        </tr>
    }

</table>

<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content" id="modelContent">
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js">

</script>

 <script>
    function createModal(url){
        $('#modelContent').load(url);
        $('#myModal').modal('show');
    }
</script>

DocumentController.cs

      [HttpGet]
        public ActionResult Details(int id)
        {
            //ViewDocument docu = new ViewDocument();

            DynamicParameters param = new DynamicParameters();
            param.Add("@DocumentNo", id);


            return PartialView(DapperORM.ReturnList<Document>("GetDocumentByDocumentNo", param).FirstOrDefault<Document>());

            //ViewBag.Id = Id;
            //return PartialView("ModalContent");
        }

Details.cshtml

@model DTS.Models.Document
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true"><i class="fa fa-times-circle"></i></span>
    </button>
    <h4 class="modal-title">Details Record</h4>
</div>
<div class="modal-body">
    <div>
        <h4>Document</h4>
        <hr />
        <dl class="dl-horizontal">
            <dt>
                @Html.DisplayNameFor(model => model.DocumentNo)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.DocumentNo)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.DocumentType)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.DocumentType)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.PrimaryDetail)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.PrimaryDetail)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.SecondaryDetail)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.SecondaryDetail)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.OtherDetail)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.OtherDetail)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.Status)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.Status)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.DateCreated)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.DateCreated)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.DateUpdated)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.DateUpdated)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.UpdatedBy)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.UpdatedBy)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.DesignatedOffice)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.DesignatedOffice)
            </dd>

            <dt>
                @Html.DisplayNameFor(model => model.IsPriority)
            </dt>

            <dd>
                @Html.DisplayFor(model => model.IsPriority)
            </dd>

        </dl>
    </div>
    <p>
        @Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
        @Html.ActionLink("Back to List", "Index")
    </p>

</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default"
            data-dismiss="modal">
        Close
    </button>
</div>

Answer 1

确保引用顺序如下：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

引导模式不显示ASP.NET MVC。 Bootbox.js

1 个答案: