Note:-
1. Highlighted part is the bootstrap modal popup code.
2. In this demo you will find, how to show modal popup on link button click? How to Get TextBox, Dropdown, Checkbok and Group Radio button value using jquery? and How to reset TextBox, Dropdown, Checkbok and Group Radio button value using jquery?
Let Start
Step 1: - Open Visual Studio 2015 => Go to File Menu => New =>
Project...
Step 2: - In the Installed Templates list, select
Visual C# => Web
Step 3: - Select ASP.Net Web Application
(.NET Framework) from the Web list => Type ModelPopup in the Name box and click OK
Step 4: - Select MVC template from
ASP.NET Templates List
Step 5: - Right Click on Controllers folder => Add =>
Controller... => Select MVC 5
Controller - Empty => Click Add => Type PopupController in Controller Name box => Click Add
Step 6: - Open App_Start folder => Click on RouteConfig.cs file => Rename Old MapRoute with New MapRoute
Old MapRoute
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller =
"Home", action = "Index", id = UrlParameter.Optional }
);
New MapRoute
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller =
"Popup", action = "Index", id = UrlParameter.Optional }
);
Step 7: - Open PopupController.cs controller => Right click insight the Index body => Click on Add View…
=> Click Add
Step 8: - Copy Past following code in the Index.cshtml
<div class="row">
<div class="col-md-4">
<a id="UserRegistration">User
Registration</a>
</div>
<div class="modal fade" id="Registration" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-sm" role="document" style="">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<h4 class="modal-title" style="text-align:center;">User
Registration</h4>
<br />
@Html.Partial("_Registration")
</div>
</div>
</div>
</div>
</div>
@section scripts{
<script type="text/javascript">
$(document).on("click", "#UserRegistration", function () {
$("#Registration").modal("show");
});
$(document).on("click", "#submit", function (e) {
e.preventDefault();
$.post("/Popup/Registration", {
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
Gender: $("#Gender
option:selected").val(),
EmailId: $("#EmailId").val(),
MobileNo: $("#MobileNo").val(),
IsMarried: $("input[name='IsMarried']:checked").val(),
GroupRadio: $("input[name='GroupRadio']:checked").val()
}, function (data) {
alert(data.RecordInfo + "\n" +
data.Message)
ClearFormData();
});
});
$(document).on("click", "#reset", function (e) {
e.preventDefault();
ClearFormData();
});
function ClearFormData() {
$("#FirstName").val("");
$("#LastName").val("");
$("#Gender").val('');
$("#EmailId").val("");
$("#MobileNo").val("");
$("#IsMarried").prop("checked", false);
$("input[name='GroupRadio']").prop("checked", false);
}
</script>
}
Step 9: - Copy Past following Action
Method in the PopupController.cs
public JsonResult
Registration(FormCollection formCollection)
{
if (formCollection == null)
{
return Json(new {
Message = "Record
not Saved." }, JsonRequestBehavior.AllowGet);
}
string firstName =
formCollection["FirstName"];
string lastName =
formCollection["LastName"];
string gender =
formCollection["Gender"];
string emailId =
formCollection["EmailId"];
string mobileNo =
formCollection["MobileNo"];
string isMarried =
formCollection["IsMarried"] == "true" ? "Yes" : "No";
string groupRadio =
formCollection["GroupRadio"];
string recordInfo = $"FirstName-{firstName}" +
$", LastName-{lastName}" +
$", Gender-{gender}" +
$", EmailId-{emailId}" +
$", MobileNo-{mobileNo}" +
$", IsMarried-{ isMarried}" +
$", Are you alcoholic?-{ groupRadio}";
return Json(new {
RecordInfo = recordInfo, Message = "Record
Saved successfully." }, JsonRequestBehavior.AllowGet);
}
Step 10: - Open Solution Explorer = > Expand Views folder => Right Click on Popup
folder => Add => View... => Type _Registration
in the View name box => Checked Create
a partial view checked box => Click Add
Step 11: - Copy Past following code in the _Registration.cshtml
@using (Html.BeginForm())
{
<div class="row">
<div class="col-md-4">
@Html.Label("First Name");
</div>
<div class="col-md-4">
@Html.TextBox("FirstName")
</div>
</div>
<div class="row">
<div class="col-md-4">
@Html.Label("Last Name");
</div>
<div class="col-md-4">
@Html.TextBox("LastName")
</div>
</div>
<div class="row">
<div class="col-md-4">
@Html.Label("Gender");
</div>
<div class="col-md-4">
@Html.DropDownList("Gender", new List<SelectListItem>
{
new SelectListItem { Text = "Male", Value = "Male"},
new SelectListItem { Text = "Female", Value = "Female"}
}, "Select Gender")
</div>
</div>
<div class="row">
<div class="col-md-4">
@Html.Label("Email Id");
</div>
<div class="col-md-4">
@Html.TextBox("EmailId")
</div>
</div>
<div class="row">
<div class="col-md-4">
@Html.Label("Mobile No");
</div>
<div class="col-md-4">
@Html.TextBox("MobileNo")
</div>
</div>
<div class="row">
<div class="col-md-4">
@Html.Label("Is Married");
</div>
<div class="col-md-4">
@Html.CheckBox("IsMarried")
</div>
</div>
<div class="row">
<div class="col-md-4">
@Html.Label("Are you alcoholic?")
</div>
<div class="col-md-4">
@Html.RadioButton("GroupRadio", "Yes") @Html.Label("Yes")
@Html.RadioButton("GroupRadio", "No") @Html.Label("No")
</div>
</div>
<button id="submit">Submit</button>
<button id="reset">Reset</button>
}
ALL Done
Run Project
Output
