Data Notation with MVC 5

Here is the sample for validation with MVC

[MetadataType(typeof(UserDetail.Metadata))]

    public partial class UserDetail

    {

        private sealed class Metadata

        {

            //making id as Hidden filed

            [HiddenInput(DisplayValue = false)]

            public int UserId { get; set; }

            [DisplayName("Email Address")]

            [Required(ErrorMessage = "Please enter Email ID")]

            [RegularExpression(@"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}", ErrorMessage = "Please enter correct email")]

            public string EmailID { get; set; }

             [StringLength(100, MinimumLength = 4)]

            [Required(ErrorMessage = "Please enter First Name")]

            public string FirstName { get; set; }

            [Required(ErrorMessage = "Please enter Last Name")]

            public string LastName { get; set; }

            [Required(ErrorMessage = "Please enter Age")]

            [Range(18, 100, ErrorMessage = "Age must be between 18 and 100")]

            public string Age { get; set; }

            public Nullable<bool> IsActive { get; set; }

        }

    }

Once we have define validation to the model by using data annotations, these are automatically used by Html Helpers in views. For client side validation to work, please ensure that below two <SCRIPT> tag references are in the view

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

How to Use Model Pop Up in MVC

following are the reference file need to add in view.

<script src="~/Scripts/jquery-1.8.2.min.js"></script>

<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

<script src="~/Scripts/Dialogbox.js"></script>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Here is the code for Dialogbox.js

$(document).ready(function () {

    var url = "";

    $("#dialog-alert").dialog({

        title: 'Alert',

        autoOpen: false,

        resizable: false,

        height: 170,

        width: 350,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

        },

        buttons: {

            "OK": function () {

                $(this).dialog("close");

            },

            "Cancel": function () {

                $(this).dialog("close");

            }

        }

    });

    $("#dialog-create").dialog({

        title: 'Create',

        autoOpen: false,

        resizable: false,

        width: 400,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

            $(this).load(url);

        }

    });

    $("#dialog-edit").dialog({

        title: 'Modify',

        autoOpen: false,

        resizable: false,

        width: 400,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

            $(this).load(url);

        }

    });

    $("#dialog-confirmm").dialog({

        title: 'Confirmation',

        autoOpen: false,

        resizable: false,

        height: 170,

        width: 350,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

        },

        buttons: {

            "OK": function () {

                $(this).dialog("close");

                window.location.href = url;

            },

            "Cancel": function () {

                $(this).dialog("close");

            }

        }

    });

    $("#dialog-detail").dialog({

        title: 'View Details',

        autoOpen: false,

        resizable: false,

        width: 400,

        show: { effect: 'drop', direction: "up" },

        modal: true,

        draggable: true,

        open: function (event, ui) {

            $(".ui-dialog-titlebar-close").hide();

            $(this).load(url);

        },

        buttons: {

            "Close": function () {

                $(this).dialog("close");

            }

        }

    });

    $("#lnkCreate").live("click", function (e) {

        //e.preventDefault(); //use this or return false

        url = $(this).attr('href');

        $("#dialog-create").dialog('open');

        return false;

    });

    $(".lnkEdit").live("click", function (e) {

        // e.preventDefault(); use this or return false

        url = $(this).attr('href');

        $(".ui-dialog-title").html("Update");

        $("#dialog-edit").dialog('open');

        return false;

    });

    $(".lnkDelete").live("click", function (e) {

        // e.preventDefault(); use this or return false

        url = $(this).attr('href');

        $("#dialog-confirmm").dialog('open');

        return false;

    });

    $(".lnkDetail").live("click", function (e) {

        // e.preventDefault(); use this or return false

        url = $(this).attr('href');

        $("#dialog-detail").dialog('open');

        return false;

    });

    $("#btncancel").live("click", function (e) {

        $("#dialog-edit").dialog("close");

        return false;

    });

});

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Following code need to add in master page (_Layout)

 <div id="dialog-create" style="display: none">

        </div>

        <div id="dialog-alert" style="display: none">

            <p>

                @TempData["msg"]!

            </p>

        </div>

        <div id="dialog-confirm" style="display: none">

            <p>

                <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>

                Are you sure to delete?

            </p>

        </div>

        <div id="dialog-edit" style="display: none">

        </div>

        <div id="dialog-detail" style="display: none">

        </div>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Call Model popup by click on hyperlink - by using id = 'lnkCreate'

@Html.ActionLink("Add Expence", "AddExpence", null, new { id = "lnkCreate" })