how to create modal pop-up with partial view in MVC?

Total Post:9

Points:37
Mvc 
C#
 654  View(s)
Ratings:
Rate this:
Please help me in creating modal pop-up with partial view in MVC.
  1. Post:52

    Points:366
    Re: how to create modal pop-up with partial view in MVC?

     

    In index page

     
    @model TestSol.Models.RegistrationForm
    @{
        Layout = null;
    }
     
    <!DOCTYPE html>
     
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <link href="~/Content/bootstrap.css" rel="stylesheet" />
        <link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-3.1.1.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/bootstrap-datepicker.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.2/jquery.validate.unobtrusive.js"></script>
        <script src="~/Scripts/modernizr-2.8.3.js"></script>
     
        <title>Registration</title>
     
    </head>
    <body>
        <div class="container">
                  <div class="row" style="margin-top: 15px; margin-bottom: 15px;">
                <div class="col-md-8">
                    <div class="input-group" id="adv-search">
                        <input type="text" class="form-control" id="txtsearch" placeholder="Search" />
                        <div class="input-group-btn">
                            <div class="btn-group" role="group">
                                <button type="button" id="searchButton" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group" id="adv-Add">
                        <div class="input-group-btn">
                            <div class="btn-group" role="group">
     
                                <button type="button" id="btnadd" class="btn btn-primary">Add </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="target">
                @Html.Partial("List");
                @ViewBag.msg
            </div>
        </div>
     
     
        @using (Ajax.BeginForm("Add", "Home", new AjaxOptions
        {
            HttpMethod = "POST",
            UpdateTargetId = "target",
            OnSuccess = "updateSuccess",
     
        }, new { id = "form1" }))
        {
            <div id="Mymodal-Create" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title">Create
                            </h4>
                        </div>
                        <div class="modal-body" id="Create-Body">
                        </div>
     
                        <div class="modal-footer">
                            <input type="Submit" class="btn btn-primary" id="btnsubmit"  value="Add" />
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                Close
                            </button>
     
                        </div>
     
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
     
            </div>
        }
        <div id="Mymodal-UserList" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="listLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close close-List">
                                &times;
                            </button>
                            <h4 class="modal-title">Users
                            </h4>
                        </div>
                        <div class="modal-body" id="List-Body">
                        </div>
     
                        <div class="modal-footer">
                            
                            <button type="button" id="close-list" class="btn btn-default close-List">
                                Close
                            </button>
     
                        </div>
     
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal-dialog -->
     
            </div>
     
     
     
        <script type="text/javascript">
            $(function () {
                $('#datepicker').datepicker();
                $(".allownumber").keydown(function (e) {
                    // Allow: backspace, delete, tab, escape, enter and .
                    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
                        // Allow: Ctrl+A, Command+A
                        (e.keyCode === 65 && (e.ctrlKey === true || e.metaKey === true)) ||
                        // Allow: home, end, left, right, down, up
                        (e.keyCode >= 35 && e.keyCode <= 40)) {
                        // let it happen, don't do anything
                        return;
                    }
                    // Ensure that it is a number and stop the keypress
                    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                        e.preventDefault();
                    }
                });
                $('#btnadd').click(function () {
                    $.get("Home/Add", function (data) {
                        $("#Create-Body").html(data);
                        $("#Mymodal-Create").modal('show');
     
                    });
                });
                $('#btnsubmit').click(function () {
                    $.validator.unobtrusive.parse("#form1");               
                   // $('#Mymodal-UserList, #Mymodal-Create').modal('hide');
                });
                $('#searchButton').click(function () {
                    $.get("Home/GetUser", { d: $('#txtsearch').val() }, function (data) {
                        $("#target").html(data);
                    });
                });
     
            });
            function updateSuccess(data) {
                $('form')[0].reset();                      $("#Mymodal-Create").modal('hide');
            }
            $('#close-List').click(function () {
                $("#Mymodal-UserList").modal('hide');
                $("#Mymodal-Create").modal('hide');
                      });
            function filldata(data) {                  
                $("#Create-Body").html(data);
                $("#Mymodal-UserList").modal('hide');
            };
     
        </script>
     
     
     
    </body>
    </html>

     


    Add.cshtml


    @model TestSol.Models.RegistrationForm
     
    <div class="panel-body">
        @Html.ValidationSummary(false)
        <div class="form-group">
            <div class="row">
                <div class="col-md-4">
                    <div class="input-group" id="adv-search">
                         @Html.HiddenFor(model => model.Id, new {@Value = 0 })
                        @Html.Label("First Name")<br />@Html.TextBoxFor(model => model.FName, new { @class = "form-control", placeholder = "First Name", title = "Enter First Name" })
                        @Html.ValidationMessageFor(model => model.FName)
                      
                        <div class="input-group-btn">
                            <div class="btn-group" role="group">
                                <button type="button" id="btnbrowse" class="btn btn-primary" style="margin-top: 23px"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                            </div>
                        </div>
                    </div>
                </div>
     
                <div class="col-md-4">
                    @Html.Label("Middle Name")<br />@Html.TextBoxFor(model => model.MName, new { @class = "form-control", placeholder = "Middle Name", title = "Enter Middle Name" })
                </div>
                <div class="col-md-4">
                    @Html.Label("Last Name")<br />@Html.TextBoxFor(model => model.LName, new { @class = "form-control", placeholder = "Last Name", title = "Enter Last Name" })
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    @Html.Label("DOB")<br />
                    @Html.TextBoxFor(model => model.Dob, new { @class = "form-control ", id = "datepicker", placeholder = "Dob", title = "Enter DOB", @value = Model != null && Model.Dob != null ? Model.Dob.ToString("dd/MM/yyyy") : null })
                </div>
                <div class="col-md-4">
                    @Html.Label("Mobile Number")<br />@Html.TextBoxFor(model => model.Mobile, new { @class = "form-control allownumber", placeholder = "Mobile", title = "Enter Mobile", @maxlength = "10" })
                </div>
                <div class="col-md-4">
                    @Html.Label("City")<br />@Html.DropDownListFor(model => model.City, new SelectList(ViewBag.Country, "Country", "Country"),
        "Select Category", new { @class = "form-control", placeholder = "City", title = "Enter City" })
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    @Html.Label("Pin")<br />@Html.TextBoxFor(model => model.Pin, new { @class = "form-control allownumber", placeholder = "Pin", title = "Enter Pin", @maxlength = "6" })@Html.ValidationMessageFor(model => model.Pin)
                </div>
                <div class="col-md-4">
                    @Html.Label("Address")<br />@Html.TextAreaFor(model => model.Address, new { @class = "form-control", placeholder = "Address", title = "Enter Address" })
                </div>
            </div>
     
        </div>
     
    </div>
     
     
    <script>
        $(function () {
            $('#datepicker').datepicker();
        });
        $('#btnbrowse').click(function () {
            $.get("Home/GetRecord", function (data) {
                $("#List-Body").html(data);         
                $("#Mymodal-UserList").modal('show');
                      });
        });
        $('#close-list').click(function () {
            $("#Mymodal-UserList").modal('hide');
               });
    </script>


    Output



    I am providing this solution for you, May it helps you.



Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!