jQuery DialogBox with Form in MVC3 Razor
- In this article we will see how to render a form inside a Dialog box.
- We often come across a requirement where we need to render a form inside a popup or modal box.
- We can use the jQuery Modal Dialog Box to accomplish this.
- We are rendering a form inside the modal dialog box.
- We are also validating the user input.
- We have integrated jQuery dialog box in MVC3 Razor application.
Following are the steps :
View :
@{
ViewBag.Title = "Index";
Layout = "../Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div id="UserTable">
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
<tr>
<td>Jack Wilshere</td>
<td>Jack@gmail.com</td>
<td>Wlshere</td>
</tr>
</table>
<input type="button" id="createUser" value="Create User" />
</div>
<div id="dialogForm" title="Create User">
<span id="warningSpan"></span><br /><br />
<form>
<label for="name">Name</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email</label><br />
<input type="text" name="email" id="email" /><br />
<label for="password">Password</label><br />
<input type="text" name="password" id="password" /><br />
</form>
</div>
<script type="text/javascript">
$(function () {
$("#dialogForm").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Create User": function () {
createNewUser();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#createUser")
.button()
.click(function () {
$("#dialogForm").dialog("open");
});
});
function createNewUser() {
var nameValue = $("#name").val();
var emailValue = $("#email").val();
var passwordValue = $("#password").val();
$("#warningSpan").text('');
var isValid = validateForm(nameValue, emailValue, passwordValue);
debugger;
if (isValid) {
$("#UserTable tbody").append("<tr>" +
"<td>" + nameValue + "</td>" +
"<td>" + emailValue + "</td>" +
"<td>" + passwordValue + "</td>" +
"</tr>");
$("#dialogForm").dialog("close");
$("#name").val("");
$("#email").val("");
$("#password").val("");
}
}
function validateForm(name, email, password) {
var isValidName = true;
var isValidEmail = true;
var isValidPassword = true;
if (name == '') {
$("#warningSpan").text("name is mandatory!");
isValidName = false;
}
if (email == '') {
var warningSpan = $("#warningSpan").text();
if (warningSpan != null) {
$("#warningSpan").append("<br /> email is mandatory!");
}
else {
$("#warningSpan").text("email is mandatory!");
}
isValidEmail = false;
}
else {
var regex = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (regex.test(email)) {
isValidEmail = true;
}
else {
isValidEmail = false;
var warningSpan = $("#warningSpan").text();
if (warningSpan != null) {
$("#warningSpan").append("<br /> email is not in correct format!");
}
else {
$("#warningSpan").text("email is not in correct format!");
}
}
}
if (password == '') {
var warningSpan = $("#warningSpan").text();
if (warningSpan != null) {
$("#warningSpan").append("<br/> password is mandatory!");
}
else {
$("#warningSpan").text("password is mandatory!");
}
isValidPassword = false;
}
if (isValidName && isValidEmail && isValidPassword) {
return true;
}
else {
return false;
}
}
</script>
In the View we have referenced the Layout, which has jQuery script file references needed to render jQuery Dialog box. In the above view, we have created a form and a table. The form is rendered inside a Dialog box.
We have applied the validation on Form input fields. When all the validations are passed the record is added to the Grid.
Layout :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.dialog.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.widget.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.bgiframe-2.1.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.draggable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.position.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.resizable.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.effect.min.js")" type="text/javascript"></script>
</head>
<body>
@RenderBody()
</body>
</html>
The above is the layout file. We have referenced the jQuery files needed to make dialog box work.
Demo :
In the above demo, when you click on Create User button, a dialog box appears which is modal. We can enter details and click Create user to enter user details in the table. We have also applied validations to the form rendered inside modal dialog box.
Thus by following above steps we can render a form inside dialog box. We can also customize this even more to achieve more functionalities with jQuery Dialog box.
