Bootstrap modal not showing ASP.NET MVC. Bootbox.js

Question

I have a simple application that has a list from db and i want to show the details of the row through modal. The problem is the modal is not showing and i think that the problem is that the javascript is not triggering the action onclick. I have tried to put breakpoint to the controller metho Details() and it is not triggering which means that the problem is in the index.cshtml. Please help.

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>

Have you checked the browser console to see if you have any errors? — Izzy, Sep 05 '18 at 06:51
It says TypeError: $(...).modal is not a function[Learn More] — jaysonsoi, Sep 05 '18 at 06:57
In that case look at **[this](https://stackoverflow.com/questions/25757968/bootstrap-modal-is-not-a-function)** question to solve the issue. It's most likely you haven't included a script or its included twice somewhere — Izzy, Sep 05 '18 at 07:00
thank you soo much! solved by adding bootstrap to my program through nuget package :) — jaysonsoi, Sep 05 '18 at 07:06

Mohammad Ghanem · Answer 1 · 2018-09-05T07:44:32.817

0

Make sure that references order as the following :

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

edited Sep 05 '18 at 07:44

answered Sep 05 '18 at 07:26

Mohammad Ghanem

688
6
20

Bootstrap modal not showing ASP.NET MVC. Bootbox.js

1 Answers1