forum

Home / DeveloperSection / Forums / how to create modal pop-up with partial view in MVC?

Ask Question

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

Anonymous User136304-May-2017
Please help me in creating modal pop-up with partial view in MVC.
c#mvc 
Updated on 04-May-2017
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Manish Kumar

Manish Kumar

04-May-2017

 

In index page

 
@model TestSol.Models.RegistrationForm
@{
    Layout = null;
}
 
<!DOCTYPEhtml>
 
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <linkhref="~/Content/bootstrap.css"rel="stylesheet"/>
    <linkhref="~/Content/bootstrap-datepicker.css"rel="stylesheet"/>
    <scriptsrc="~/Scripts/jquery-3.1.1.min.js"></script>
    <scriptsrc="~/Scripts/bootstrap.min.js"></script>
    <scriptsrc="~/Scripts/bootstrap-datepicker.js"></script>
    <scriptsrc="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <scriptsrc="~/Scripts/jquery.validate.min.js"></script>
    <scriptsrc="~/Scripts/jquery.validate.unobtrusive.js"></script>
    <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.2/jquery.validate.unobtrusive.js"></script>
    <scriptsrc="~/Scripts/modernizr-2.8.3.js"></script>
 
    <title>Registration</title>
 
</head>
<body>
    <divclass="container">
              <divclass="row"style="margin-top: 15px; margin-bottom: 15px;">
            <divclass="col-md-8">
                <divclass="input-group"id="adv-search">
                    <inputtype="text"class="form-control"id="txtsearch"placeholder="Search"/>
                    <divclass="input-group-btn">
                        <divclass="btn-group"role="group">
                            <buttontype="button"id="searchButton"class="btn btn-primary"><spanclass="glyphicon glyphicon-search"aria-hidden="true"></span></button>
                        </div>
                    </div>
                </div>
            </div>
            <divclass="col-md-4">
                <divclass="input-group"id="adv-Add">
                    <divclass="input-group-btn">
                        <divclass="btn-group"role="group">
 
                            <buttontype="button"id="btnadd"class="btn btn-primary">Add </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <divid="target">
            @Html.Partial("List");
            @ViewBag.msg
        </div>
    </div>
 
 
    @using (Ajax.BeginForm("Add", "Home", newAjaxOptions
    {
        HttpMethod = "POST",
        UpdateTargetId = "target",
        OnSuccess = "updateSuccess",
 
    }, new { id = "form1" }))
    {
        <divid="Mymodal-Create"class="modal fade bd-example-modal-lg"tabindex="-1"role="dialog"aria-labelledby="myLargeModalLabel"aria-hidden="true">
            <divclass="modal-dialog modal-lg">
                <divclass="modal-content">
                    <divclass="modal-header">
                        <buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">
                            &times;
                        </button>
                        <h4class="modal-title">Create
                        </h4>
                    </div>
                    <divclass="modal-body"id="Create-Body">
                    </div>
 
                    <divclass="modal-footer">
                        <inputtype="Submit"class="btn btn-primary"id="btnsubmit"  value="Add"/>
                        <buttontype="button"class="btn btn-default"data-dismiss="modal">
                            Close
                        </button>
 
                    </div>
 
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
 
        </div>
    }
    <divid="Mymodal-UserList"class="modal fade bd-example-modal-lg"tabindex="-1"role="dialog"aria-labelledby="listLargeModalLabel"aria-hidden="true">
            <divclass="modal-dialog modal-lg">
                <divclass="modal-content">
                    <divclass="modal-header">
                        <buttontype="button"class="close close-List">
                            &times;
                        </button>
                        <h4class="modal-title">Users
                        </h4>
                    </div>
                    <divclass="modal-body"id="List-Body">
                    </div>
 
                    <divclass="modal-footer">
                         
                        <buttontype="button"id="close-list"class="btn btn-default close-List">
                            Close
                        </button>
 
                    </div>
 
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
 
        </div>
 
 
 
    <scripttype="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
 
<divclass="panel-body">
    @Html.ValidationSummary(false)
    <divclass="form-group">
        <divclass="row">
            <divclass="col-md-4">
                <divclass="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)
                   
                    <divclass="input-group-btn">
                        <divclass="btn-group"role="group">
                            <buttontype="button"id="btnbrowse"class="btn btn-primary"style="margin-top: 23px"><spanclass="glyphicon glyphicon-search"aria-hidden="true"></span></button>
                        </div>
                    </div>
                </div>
            </div>
 
            <divclass="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>
            <divclass="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>
        <divclass="row">
            <divclass="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>
            <divclass="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>
            <divclass="col-md-4">
                @Html.Label("City")<br/>@Html.DropDownListFor(model => model.City, newSelectList(ViewBag.Country, "Country", "Country"),
    "Select Category", new { @class = "form-control", placeholder = "City", title = "Enter City" })
            </div>
        </div>
        <divclass="row">
            <divclass="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>
            <divclass="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

answer 521400405035825


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



Liked By