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.

forum

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

Can you answer this question?

1 Answers

In index page

Add.cshtml