1. In this article we will see how to render a form inside a Dialog box.
2. We often come across a requirement where we need to render a form inside a popup or modal box.
3. We can use the jQuery Modal Dialog Box to accomplish this.
4. We are rendering a form inside the modal dialog box.
5. We are also validating the user input.
6. We have integrated jQuery dialog box in MVC3 Razor application.

@{
    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>

<!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>