locked
Bootstrap Modal is added to the page instead showing as Modal Dialog RRS feed

  • Question

  • User-826336654 posted

    Hi All,

    I am using Bootstrap Model Dialog in my ASP.NET MVC 5 application.  What i am doing is that I have DataList Page and contain "Add New" button, which you can see in the screen shot below. The problem is that When I click on "Add New" button. The modal dialog is added to the page and push records downwards instead of showing as Modal Dialog. Can somebody tell, what is the problem? This is the first time, I am using Bootstrap Model.

    Screen shot:

    Controller:

    using AjaxInsertAndReloadMVC5.Models.DB;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace AjaxInsertAndReloadMVC5.Controllers
    {
        public class HomeController : Controller
        {
            // GET: Home
            public ActionResult Index()
            {
                List<Student> students = new List<Student>();
    
                using (StudentDB2Context db = new StudentDB2Context())
                {
                    students = db.Students.ToList();
                }
    
                return View(students);
            }
    
            public ActionResult NewUpdateStudent(int studentId=0)
            {
                return PartialView("NewUpdateStudent");
            }
        }
    }

    View:

    @model IEnumerable<AjaxInsertAndReloadMVC5.Models.DB.Student>
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <a href="#" class="btn btn-success" onclick="newupdatestudent(0)">Add New</a>
    
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Employee Details</h4>
            </div>
            <div class="modal-body" id="mymodelbody">
    
            </div>
        </div>
    </div>
    
    <br /><br />
    <table class="table table-striped table-condensed table-hover">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.FullName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Mobile)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Telephone)
            </th>
            <th></th>
        </tr>
    
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.FullName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Mobile)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Telephone)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.StudentId }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.StudentId })
                </td>
            </tr>
        }
    
    </table>
    
    <script>
    
        var newupdatestudent = function (studentId) {
            var url = "/Home/NewUpdateStudent?StudentId=" + studentId;
    
            $("#mymodelbody").load(url, function () {
                $("mymodel").modal("show");
            })
        }
    </script>
    

    Partial View:

    @model AjaxInsertAndReloadMVC5.Models.DB.Student
    
    @using (Html.BeginForm()) 
    {
        @Html.AntiForgeryToken()
        
        <div class="form-horizontal">
    
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.LabelFor(model => model.FullName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.FullName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.FullName, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Mobile, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Mobile, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Mobile, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Telephone, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Telephone, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Telephone, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Save Record" class="btn btn-default" />
                </div>
            </div>
        </div>
    }
    

    Layout:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
        <script src="~/Scripts/jquery-3.3.1.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav"></ul>
                </div>
            </div>
        </div>
    
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
            </footer>
        </div>
    
    </body>
    </html>

    Thanks in advance.

    Tuesday, April 30, 2019 11:06 AM

Answers

  • User-474980206 posted
    The modal dialog appears in place. You wrap with a modal if you want a pop up.

    <div class="modal" tabindex="-1" role="dialog">


    <div>


    And show the modal, not the dialog. See the bootstrap docs.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 30, 2019 2:09 PM
  • User-826336654 posted

    The modal dialog appears in place. You wrap with a modal if you want a pop up.

    <div class="modal" tabindex="-1" role="dialog">


    <div>


    And show the modal, not the dialog. See the bootstrap docs.

    Thanks bruce. the problem is solved now. For future reference, the change code is below.

    @model IEnumerable<AjaxInsertAndReloadMVC5.Models.DB.Student>
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <a class="btn btn-success" onclick="newupdatestudent(0)">Add New</a>
    
    <div class="modal fade" id="mymodel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Employee Details</h4>
                </div>
                <div class="modal-body" id="mymodelbody">
    
                </div>
            </div>
        </div>
    </div>
    
        <br /><br />
        <table class="table table-striped table-condensed table-hover">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.FullName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Email)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Mobile)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Telephone)
                </th>
                <th></th>
            </tr>
    
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.FullName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Email)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Mobile)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Telephone)
                    </td>
                    <td>
                        <a class="btn btn-success" onclick="newupdatestudent(item.studentId)">Edit</a>
                    </td>
                </tr>
            }
    
        </table>
    
        <script>
    
            var newupdatestudent = function (studentId) {
                var url = "/Home/NewUpdateStudent?StudentId=" + studentId;
    
                $("#mymodelbody").load(url, function () {
                    $("#mymodel").modal("show");
                })
            }
        </script>
    

    Thanks.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 30, 2019 3:34 PM

All replies

  • User475983607 posted

    This is a UI issue probably related to injecting HTML the DOM.   Use Dev Tools to View the CSS applied to each element.

    I would rethink the design.  There is no compelling reason to populate the modal HTML using a partial and the JavaScript load() function as the partial does not maintain state.  I would render all the HTML in one shot.

    If later you want to edit using the same HTML, then craft AJAX or fetch to and JSON from an Action method.  Populate the modal input values using JavaScript.  This is less destructive to the DOM and generally easier, IMO,  in the long run.

    Tuesday, April 30, 2019 1:40 PM
  • User-474980206 posted
    The modal dialog appears in place. You wrap with a modal if you want a pop up.

    <div class="modal" tabindex="-1" role="dialog">


    <div>


    And show the modal, not the dialog. See the bootstrap docs.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 30, 2019 2:09 PM
  • User-826336654 posted

    The modal dialog appears in place. You wrap with a modal if you want a pop up.

    <div class="modal" tabindex="-1" role="dialog">


    <div>


    And show the modal, not the dialog. See the bootstrap docs.

    Thanks bruce. the problem is solved now. For future reference, the change code is below.

    @model IEnumerable<AjaxInsertAndReloadMVC5.Models.DB.Student>
    
    @{
        ViewBag.Title = "Index";
    }
    
    <h2>Index</h2>
    
    <a class="btn btn-success" onclick="newupdatestudent(0)">Add New</a>
    
    <div class="modal fade" id="mymodel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Employee Details</h4>
                </div>
                <div class="modal-body" id="mymodelbody">
    
                </div>
            </div>
        </div>
    </div>
    
        <br /><br />
        <table class="table table-striped table-condensed table-hover">
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.FullName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Email)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Mobile)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Telephone)
                </th>
                <th></th>
            </tr>
    
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.FullName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Email)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Mobile)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Telephone)
                    </td>
                    <td>
                        <a class="btn btn-success" onclick="newupdatestudent(item.studentId)">Edit</a>
                    </td>
                </tr>
            }
    
        </table>
    
        <script>
    
            var newupdatestudent = function (studentId) {
                var url = "/Home/NewUpdateStudent?StudentId=" + studentId;
    
                $("#mymodelbody").load(url, function () {
                    $("#mymodel").modal("show");
                })
            }
        </script>
    

    Thanks.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 30, 2019 3:34 PM