Loader in MVC

View :

@{
    ViewBag.Title = "Index";
    Layout = null;
}


<div class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-lg-4">EID</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" id="tb" />


            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4">NAME</label>
            <div class="col-lg-4">
                <input type="text" class="form-control" id="tb1" />


            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-lg-4"></label>
            <div class="col-lg-4">
                <input type="button" value="Save" id="btn" style="width:80px" class="btn btn-primary" />

            </div>
        </div>
    </form>
</div>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/HoldOn.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="~/scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/scripts/HoldOn.min.js" type="text/javascript"></script>

<script type="text/javascript">
            $(function () {
                $('#btn').click(function () {
                    $.ajax({
                        type: "POST",
                       // traditional: true,
                        url: "../Home/Save",
                       // async: true,
                        data: { EID: $('#tb').val(), NAME: $('#tb1').val() },
                        datatype: "json",
                        beforeSend: function () {
                            HoldOn.open({ theme: "sk-rect", content: '', message: 'Please wait...', backgroundColor: "#8C8C8C", textColor: "white" });
                        },
                        success: function (response) {
                            alert(response);
                            window.location.reload(true);
                        },
                        complete: function () {
                            HoldOn.close();
                        },
                        error: function (a, b, c) {
                            HoldOn.close();
                        }

                    });


                });
            });
</script>

Controller :

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public JsonResult Save(EMP emp)
        {
            using (Database1Entities obj = new Models.Database1Entities())
            {
                obj.Entry(emp).State = EntityState.Added;
                obj.SaveChanges();
                return Json("Data Saved.", JsonRequestBehavior.AllowGet);
            }
        }
    }
}

HoldOn.min.js


(function(b){function a(){if("undefined"==typeof jQuery){throw new Error("HoldOn.js requires jQuery")}var c={};c.open=function(e){$("#holdon-overlay").remove();var h="sk-rect";var g="";var f="";if(e){if(e.hasOwnProperty("theme")){h=e.theme}if(e.hasOwnProperty("message")){f=e.message}}switch(h){case"custom":g='<div style="text-align: center;">'+e.content+"</div>";break;case"sk-dot":g='<div class="sk-dot"> <div class="sk-dot1"></div> <div class="sk-dot2"></div> </div>';break;case"sk-rect":g='<div class="sk-rect"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div>';break;case"sk-cube":g='<div class="sk-cube"> <div class="sk-cube1"></div> <div class="sk-cube2"></div> </div>';break;case"sk-bounce":g='<div class="sk-bounce"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div>';break;case"sk-circle":g='<div class="sk-circle"> <div class="sk-circle1 sk-child"></div> <div class="sk-circle2 sk-child"></div> <div class="sk-circle3 sk-child"></div> <div class="sk-circle4 sk-child"></div> <div class="sk-circle5 sk-child"></div> <div class="sk-circle6 sk-child"></div> <div class="sk-circle7 sk-child"></div> <div class="sk-circle8 sk-child"></div> <div class="sk-circle9 sk-child"></div> <div class="sk-circle10 sk-child"></div> <div class="sk-circle11 sk-child"></div> <div class="sk-circle12 sk-child"></div> </div>';break;case"sk-cube-grid":g='<div class="sk-cube-grid"> <div class="sk-cube-child sk-cube-grid1"></div> <div class="sk-cube-child sk-cube-grid2"></div> <div class="sk-cube-child sk-cube-grid3"></div> <div class="sk-cube-child sk-cube-grid4"></div> <div class="sk-cube-child sk-cube-grid5"></div> <div class="sk-cube-child sk-cube-grid6"></div> <div class="sk-cube-child sk-cube-grid7"></div> <div class="sk-cube-child sk-cube-grid8"></div> <div class="sk-cube-child sk-cube-grid9"></div> </div>';break;case"sk-folding-cube":g='<div class="sk-folding-cube"> <div class="sk-cubechild1 sk-cube-parent"></div> <div class="sk-cubechild2 sk-cube-parent"></div> <div class="sk-cubechild4 sk-cube-parent"></div> <div class="sk-cubechild3 sk-cube-parent"></div> </div>';break;case"sk-fading-circle":g='<div class="sk-fading-circle"> <div class="sk-fading-circle1 sk-circle-child"></div> <div class="sk-fading-circle2 sk-circle-child"></div> <div class="sk-fading-circle3 sk-circle-child"></div> <div class="sk-fading-circle4 sk-circle-child"></div> <div class="sk-fading-circle5 sk-circle-child"></div> <div class="sk-fading-circle6 sk-circle-child"></div> <div class="sk-fading-circle7 sk-circle-child"></div> <div class="sk-fading-circle8 sk-circle-child"></div> <div class="sk-fading-circle9 sk-circle-child"></div> <div class="sk-fading-circle10 sk-circle-child"></div> <div class="sk-fading-circle11 sk-circle-child"></div> <div class="sk-fading-circle12 sk-circle-child"></div> </div>';break;default:g='<div class="sk-rect"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div>';console.warn(h+" doesn't exist for HoldOn.js");break}var d='<div id="holdon-overlay" style="display: none;">\n                                    <div id="holdon-content-container">\n                                        <div id="holdon-content">'+g+'</div>\n                                        <div id="holdon-message">'+f+"</div>\n                                    </div>\n                                </div>";$(d).appendTo("body").fadeIn(300);if(e){if(e.backgroundColor){$("#holdon-overlay").css("backgroundColor",e.backgroundColor)}if(e.backgroundColor){$("#holdon-message").css("color",e.textColor)}}};c.close=function(){$("#holdon-overlay").fadeOut(300,function(){$(this).remove()})};return c}if(typeof(HoldOn)==="undefined"){b.HoldOn=a()}})(window);


HoldOn.min.css


#holdon-overlay{filter:alpha(opacity=80);position:fixed;width:100%;height:100%;left:0;top:0;bottom:0;right:0;background:#000;opacity:.8;z-index:9999}#holdon-content-container{width:100%;padding:0;vertical-align:middle;display:table-cell!important;margin:0;text-align:center}#holdon-content{text-align:center;width:50px;height:57px;position:absolute;top:50%;left:50%;margin:-28px 0 0 -25px}#holdon-message{width:100%;text-align:center;position:absolute;top:55%;color:white}.sk-rect{width:50px;height:40px;text-align:center;font-size:10px}.sk-rect>div{background-color:#333;height:100%;width:6px;display:inline-block;-webkit-animation:sk-rect-anim 1.2s infinite ease-in-out;animation:sk-rect-anim 1.2s infinite ease-in-out}.sk-rect .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-rect .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.sk-rect .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.sk-rect .rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}@-webkit-keyframes sk-rect-anim{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-rect-anim{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}.sk-cube{width:50px;height:40px;text-align:center;font-size:10px}.sk-cube1,.sk-cube2{background-color:#333;width:15px;height:15px;position:absolute;top:0;left:0;-webkit-animation:sk-cube 1.8s infinite ease-in-out;animation:sk-cube 1.8s infinite ease-in-out}.sk-cube2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-cube{25%{-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5)}50%{-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)}100%{-webkit-transform:rotate(-360deg)}}@keyframes sk-cube{25%{transform:translateX(42px) rotate(-90deg) scale(0.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(0.5)}50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);-webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)}100%{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}.sk-dot{width:50px;height:40px;text-align:center;font-size:10px;-webkit-animation:sk-dot-rotate 2.0s infinite linear;animation:sk-dot-rotate 2.0s infinite linear}.sk-dot1,.sk-dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:#333;border-radius:100%;-webkit-animation:sk-dot-bounce 2.0s infinite ease-in-out;animation:sk-dot-bounce 2.0s infinite ease-in-out}.sk-dot2{top:auto;bottom:0;-webkit-animation-delay:-1.0s;animation-delay:-1.0s}@-webkit-keyframes sk-dot-rotate{100%{-webkit-transform:rotate(360deg)}}@keyframes sk-dot-rotate{100%{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes sk-dot-bounce{0%,100%{-webkit-transform:scale(0.0)}50%{-webkit-transform:scale(1.0)}}@keyframes sk-dot-bounce{0%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}50%{transform:scale(1.0);-webkit-transform:scale(1.0)}}.sk-bounce{width:60px;height:40px;text-align:center;font-size:10px}.sk-bounce>div{width:18px;height:18px;background-color:#333;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}.sk-bounce .bounce1{-webkit-animation-delay:-0.32s;animation-delay:-0.32s}.sk-bounce .bounce2{-webkit-animation-delay:-0.16s;animation-delay:-0.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1.0)}}@keyframes sk-bouncedelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1.0);transform:scale(1.0)}}.sk-circle{width:60px;height:40px;text-align:center;font-size:10px}.sk-circle .sk-child{width:100%;height:100%;position:absolute;left:0;top:0}.sk-circle .sk-child:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleBounceDelay 1.2s infinite ease-in-out both;animation:sk-circleBounceDelay 1.2s infinite ease-in-out both}.sk-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-circle .sk-circle4:before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.sk-circle .sk-circle5:before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.sk-circle .sk-circle6:before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.sk-circle .sk-circle7:before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.sk-circle .sk-circle8:before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.sk-circle .sk-circle9:before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.sk-circle .sk-circle10:before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.sk-circle .sk-circle11:before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.sk-circle .sk-circle12:before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes sk-circleBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes sk-circleBounceDelay{0%,80%,100%{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.sk-cube-grid{width:60px;height:60px;text-align:center;font-size:10px}.sk-cube-grid .sk-cube-child{width:33%;height:33%;background-color:#333;float:left;-webkit-animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out;animation:sk-cubeGridScaleDelay 1.3s infinite ease-in-out}.sk-cube-grid .sk-cube-grid1{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube-grid2{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube-grid3{-webkit-animation-delay:.4s;animation-delay:.4s}.sk-cube-grid .sk-cube-grid4{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube-grid5{-webkit-animation-delay:.2s;animation-delay:.2s}.sk-cube-grid .sk-cube-grid6{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-cube-grid .sk-cube-grid7{-webkit-animation-delay:0s;animation-delay:0s}.sk-cube-grid .sk-cube-grid8{-webkit-animation-delay:.1s;animation-delay:.1s}.sk-cube-grid .sk-cube-grid9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes sk-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes sk-cubeGridScaleDelay{0%,70%,100%{-webkit-transform:scale3D(1,1,1);transform:scale3D(1,1,1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}.sk-folding-cube{margin:20px auto;width:40px;height:40px;position:relative;-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.sk-folding-cube .sk-cube-parent{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.sk-folding-cube .sk-cube-parent:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#333;-webkit-animation:sk-foldCubeAngle 2.4s infinite linear both;animation:sk-foldCubeAngle 2.4s infinite linear both;-webkit-transform-origin:100% 100%;-ms-transform-origin:100% 100%;transform-origin:100% 100%}.sk-folding-cube .sk-cubechild2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotateZ(90deg)}.sk-folding-cube .sk-cubechild3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotateZ(180deg)}.sk-folding-cube .sk-cubechild4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotateZ(270deg)}.sk-folding-cube .sk-cubechild2:before{-webkit-animation-delay:.3s;animation-delay:.3s}.sk-folding-cube .sk-cubechild3:before{-webkit-animation-delay:.6s;animation-delay:.6s}.sk-folding-cube .sk-cubechild4:before{-webkit-animation-delay:.9s;animation-delay:.9s}@-webkit-keyframes sk-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes sk-foldCubeAngle{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0deg);opacity:1}90%,100%{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.sk-fading-circle{width:50px;height:40px;text-align:center;font-size:10px}.sk-fading-circle .sk-circle-child{width:100%;height:100%;position:absolute;left:0;top:0}.sk-fading-circle .sk-circle-child:before{content:'';display:block;margin:0 auto;width:15%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;animation:sk-circleFadeDelay 1.2s infinite ease-in-out both}.sk-fading-circle .sk-fading-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}.sk-fading-circle .sk-fading-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}.sk-fading-circle .sk-fading-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.sk-fading-circle .sk-fading-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}.sk-fading-circle .sk-fading-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}.sk-fading-circle .sk-fading-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.sk-fading-circle .sk-fading-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}.sk-fading-circle .sk-fading-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}.sk-fading-circle .sk-fading-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.sk-fading-circle .sk-fading-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}.sk-fading-circle .sk-fading-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}.sk-fading-circle .sk-fading-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.sk-fading-circle .sk-fading-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.sk-fading-circle .sk-fading-circle4:before{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.sk-fading-circle .sk-fading-circle5:before{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.sk-fading-circle .sk-fading-circle6:before{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.sk-fading-circle .sk-fading-circle7:before{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.sk-fading-circle .sk-fading-circle8:before{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.sk-fading-circle .sk-fading-circle9:before{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.sk-fading-circle .sk-fading-circle10:before{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.sk-fading-circle .sk-fading-circle11:before{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.sk-fading-circle .sk-fading-circle12:before{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes sk-fading-circleFadeDelay{0%,39%,100%{opacity:0}40%{opacity:1}}@keyframes sk-circleFadeDelay{0%,39%,100%{opacity:0}40%{opacity:1}}

CRUD Opereaion in MVC , data table & modal popup.

VIEW MODEL using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel; using System.ComponentModel.DataAnnotations; using System.Web.Mvc; namespace WebApplication1.Models {     public class EMPVM1     {       public EMPVM1()         {             HOBBY = new List<SelectListItem>();             LINTEREST = new List<SelectListItem>();             LCOUNTRY = new List<SelectListItem>();             LSTATE = new List<SelectListItem>();         }         [Required(ErrorMessage ="Eid should not be blank.")]         public int? EID { get; set; }         [Required(ErrorMessage = "Name should not be blank.")]         public string NAME { get; set; }         [Required(ErrorMessage = "Address should not be blank.")]         [DataType(DataType.MultilineText)]         public string ADDRESS { get; set; }         [Required(ErrorMessage = "Password should not be blank.")]         [DataType(DataType.Password)] [StringLength(8,MinimumLength =6,ErrorMessage ="Password length between 6 to 8 charecter long.")]         [Remote("CheackPwd","Emps",ErrorMessage ="This password alredy exist.")]         public string PASSWORD { get; set; }         [Required(ErrorMessage = "Confirm password should not be blank.")]         [DataType(DataType.Password)]         [DisplayName("CONFIRM PASSWORD")]         [System.ComponentModel.DataAnnotations.Compare("PASSWORD", ErrorMessage ="Password and confrim password must be same.")]         public string CPASSWORD { get; set; }         [Required(ErrorMessage = "Please select a gender.")]         public string GENDER { get; set; }         [Required(ErrorMessage = "Salary should not be blank.")]         [Range(5000,500000,ErrorMessage ="Salary range between from 5000 to 500000.")]         public decimal? SALARY { get; set; }         [Required(ErrorMessage = "Email should not be blank.")]         [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage ="Invalid email.")]         public string EMAIL { get; set; }         [Required(ErrorMessage = "DOJ should not be blank.")]         public DateTime? DOJ { get; set; }         [Required(ErrorMessage ="Please select a country.")]         [Coustomvalidation2(ErrorMessage ="Please select a hobby.")]         public List<SelectListItem> HOBBY { get; set; }         public List<SelectListItem> LINTEREST { get; set; }         [Coustomvalidation3(ErrorMessage = "Please select a interest.")]         public List<string> INTEREST { get; set; }         [Required(ErrorMessage ="Please select a country.")]         [DisplayName("COUNTRY")]         public int? CID { get; set; }         public List<SelectListItem> LCOUNTRY { get; set; }         [Required(ErrorMessage = "Please select a state.")]         [DisplayName("STATE")]         public int? SID { get; set; }         public List<SelectListItem> LSTATE { get; set; }     }     public class Coustomvalidation2 : ValidationAttribute     {         public override bool IsValid(object value)         {             if (value == null)                 return false;             return ((List<SelectListItem>)value).Count(x => x.Selected == true) > 0;         }     }     public class Coustomvalidation3 : ValidationAttribute     {         public override bool IsValid(object value)         {             if (value == null)                 return false;             return ((List<string>)value).Count > 0;         }     } } CONTROLLER : using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Web; using System.Web.Mvc; using WebApplication1.Models; namespace WebApplication1.Controllers {     public class EmpsController : Controller     {         // GET: Emps         public ActionResult Index()         {             using (Database1Entities obj = new Database1Entities())             {                 return View(obj.EMPs.ToList());             }         }         public JsonResult Fillddl(int CID)         {             using (Database1Entities obj = new Database1Entities())             {                 return Json(obj.STATEs.Where(m => m.CID == CID).ToList(), JsonRequestBehavior.AllowGet);             }         }         public PartialViewResult Openpop()         {             EMPVM1 vm = new EMPVM1();             using (Database1Entities obj = new Database1Entities())             {                 vm.HOBBY = obj.HOBBies.Select(x => new SelectListItem { Value = x.HID.ToString(), Text = x.HNAME, Selected = false }).ToList();                 vm.LINTEREST = obj.INTERESTs.Select(x => new SelectListItem { Value = x.IID.ToString(), Text = x.INAMEE }).ToList();                 vm.LCOUNTRY = obj.COUNTRies.Select(x => new SelectListItem { Value = x.CID.ToString(), Text = x.CNAME }).ToList();                 vm.LSTATE = new List<SelectListItem>();             }                 return PartialView("PVCreate1", vm);         }         public JsonResult CheackPwd(string PASSWORD)         {             using (Database1Entities obj = new Database1Entities())             {                 if (PASSWORD == null)                     return Json(false, JsonRequestBehavior.AllowGet);                 return Json(!obj.EMPs.Any(x => x.PASSWORD.ToLower() == PASSWORD), JsonRequestBehavior.AllowGet);             }         }         public ActionResult Save(EMPVM1 vm)         {             using (Database1Entities obj = new Database1Entities())             {                 EMP emp = new EMP();                 emp.EID = vm.EID ?? 0;                 emp.NAME = vm.NAME;                 emp.ADDRESS = vm.ADDRESS;                 emp.PASSWORD = vm.PASSWORD;                 emp.GENDER = vm.GENDER;                 emp.SALARY = vm.SALARY;                 emp.EMAIL = vm.EMAIL;                 emp.DOJ = vm.DOJ;                 emp.CID = vm.CID;                 emp.SID = vm.SID;                 obj.Entry(emp).State = EntityState.Added;                 obj.SaveChanges();                 obj.HOBBYMAPs.AddRange(vm.HOBBY.Where(p => p.Selected == true).Select(x => new HOBBYMAP { EID = vm.EID, HID = Convert.ToInt32(x.Value) }));                 obj.SaveChanges();                 obj.INTERESTMAPs.AddRange(vm.INTEREST.Select(x => new INTERESTMAP { EID = vm.EID, IID = Convert.ToInt32(x) }).ToList());                 obj.SaveChanges();                 return RedirectToAction("Index");             }         }         public PartialViewResult Openpar(int EID)         {                         EMPVM1 vm = new EMPVM1();             using (Database1Entities obj = new Database1Entities())             {                 EMP emp = obj.EMPs.Find(EID);                 vm.EID = emp.EID;                 vm.NAME = emp.NAME;                 vm.ADDRESS = emp.ADDRESS;                 vm.GENDER = emp.GENDER;                 vm.SALARY = emp.SALARY;                 vm.EMAIL = emp.EMAIL;                 vm.DOJ = vm.DOJ;                 vm.CID = vm.CID;                 vm.SID = vm.SID;                 List<SelectListItem> lst = new List<SelectListItem>();                 int mark;                 foreach (HOBBY hb in obj.HOBBies)                 {                     mark = 0;                     foreach (HOBBYMAP hm in obj.HOBBYMAPs.Where(m=>m.EID==EID))                     {                         if (hb.HID == hm.HID)                         {                             mark = 1;                             break;                         }                     }                     if (mark == 1)                         lst.Add(new SelectListItem { Value=hb.HID.ToString(), Text=hb.HNAME,Selected=true });                     else                         lst.Add(new SelectListItem { Value = hb.HID.ToString(), Text = hb.HNAME, Selected = false });                 }                 vm.HOBBY = lst;                 List<SelectListItem> lst1 = new List<SelectListItem>();                 foreach (INTEREST ints in obj.INTERESTs)                 {                     mark = 0;                     foreach (INTERESTMAP im in obj.INTERESTMAPs.Where(p => p.EID == vm.EID))                     {                         if (ints.IID == im.IID)                         {                             mark = 1;                             break;                         }                     }                     if (mark == 1)                         lst1.Add(new SelectListItem { Value=ints.IID.ToString(), Text=ints.INAMEE, Selected=true });                     else                         lst1.Add(new SelectListItem { Value = ints.IID.ToString(), Text = ints.INAMEE, Selected = false });                 }                 vm.LINTEREST = lst1;                 vm.DOJ = emp.DOJ;                 vm.CID = emp.CID;                 vm.SID = emp.SID;                 vm.LCOUNTRY = obj.COUNTRies.Select(x => new SelectListItem { Value = x.CID.ToString(), Text = x.CNAME }).ToList();                 vm.LSTATE = obj.STATEs.Where(p=>p.CID==vm.CID).Select(x => new SelectListItem { Value = x.SID.ToString(), Text = x.SNAME }).ToList();             }             return PartialView("PVEdit", vm);         }         public ActionResult Edit(EMPVM1 vm)         {             ModelState.Remove("PASSWORD");             ModelState.Remove("CPASSWORD");             using (Database1Entities obj = new Database1Entities())             {                 EMP emp = obj.EMPs.Find(vm.EID);                 emp.NAME = vm.NAME;                 emp.ADDRESS = vm.ADDRESS;                 emp.GENDER = vm.GENDER;                 emp.SALARY = vm.SALARY;                 emp.EMAIL = vm.EMAIL;                 emp.DOJ = vm.DOJ;                 emp.CID = vm.CID;                 emp.SID = vm.SID;                 obj.Entry(emp).State = EntityState.Modified;                 obj.SaveChanges();                 obj.HOBBYMAPs.RemoveRange(obj.HOBBYMAPs.Where(x => x.EID == vm.EID));                 obj.SaveChanges();                 obj.HOBBYMAPs.AddRange(vm.HOBBY.Where(p => p.Selected == true).Select(x => new HOBBYMAP { EID = vm.EID, HID = Convert.ToInt32(x.Value) }));                 obj.SaveChanges();                 obj.INTERESTMAPs.RemoveRange(obj.INTERESTMAPs.Where(p => p.EID == vm.EID));                 obj.SaveChanges();                 obj.INTERESTMAPs.AddRange(vm.INTEREST.Select(x => new INTERESTMAP { EID = vm.EID, IID = Convert.ToInt32(x) }).ToList());                 obj.SaveChanges();                 return RedirectToAction("Index");             }         }         public JsonResult Delete(int EID)         {             using (Database1Entities obj = new Database1Entities())             {                 EMP emp = obj.EMPs.Find(EID);                 obj.Entry(emp).State = EntityState.Deleted;                 obj.SaveChanges();                 return Json(true, JsonRequestBehavior.AllowGet);             }         }     } } Index view @model IEnumerable<WebApplication1.Models.EMP> @{     ViewBag.Title = "Index";     Layout = null; } <br /> <p>     <input type="button" value="Add New" class="btn btn-primary" id="btnadd" /> </p> <table class="table" id="tb">     <thead>         <tr>             <th>                 @Html.DisplayNameFor(model => model.EID)             </th>             <th>                 @Html.DisplayNameFor(model => model.NAME)             </th>             <th>                 @Html.DisplayNameFor(model => model.ADDRESS)             </th>             <th>                 @Html.DisplayNameFor(model => model.PASSWORD)             </th>             <th>                 @Html.DisplayNameFor(model => model.GENDER)             </th>             <th>                 @Html.DisplayNameFor(model => model.CID)             </th>             <th>                 @Html.DisplayNameFor(model => model.SID)             </th>             <th>                 @Html.DisplayNameFor(model => model.SALARY)             </th>             <th>                 @Html.DisplayNameFor(model => model.EMAIL)             </th>             <th>                 @Html.DisplayNameFor(model => model.DOJ)             </th>             <th></th>         </tr>     </thead>     <tbody>         @foreach (var item in Model)         {             <tr>                 <td>                     @Html.DisplayFor(modelItem => item.EID)                 </td>                 <td>                     @Html.DisplayFor(modelItem => item.NAME)                 </td>                 <td>                     @Html.DisplayFor(modelItem => item.ADDRESS)                 </td>                 <td>                     @Html.DisplayFor(modelItem => item.PASSWORD)                 </td>                 <td>                     @Html.DisplayFor(modelItem => item.GENDER)                 </td>                 <td>                     @Html.DisplayFor(modelItem => item.CID)                 </td>                 <td>                     @Html.DisplayFor(modelItem => item.SID)                 </td>                 <td>                     @Html.DisplayFor(modelItem => item.SALARY)                 </td>                 <td>                     @Html.DisplayFor(modelItem => item.EMAIL)                 </td>                 <td>                     @{                                 string s = string.Format("{0:dd-MMM-yy}", item.DOJ);                      }                      @s                 </td>                 <td>                     <a class="edit">Edit</a> |                     <a class="del">Delete</a>                 </td>             </tr>         }     </tbody> </table> <div id="dmldv"></div> <div id="delForm" style="display:none">     <h1>Do you want to delete it ?</h1> </div> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <link href="~/Content/jquery-ui.css" rel="stylesheet" /> <link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" /> <link href="~/Content/jquery.dataTables_themeroller.css" rel="stylesheet" /> <script src="~/Scripts/bootstrap.js"></script> <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery-ui.js"></script> <script src="~/Scripts/jquery.dataTables.min.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> <script type="text/javascript">     var createMode = $("#dmldv").dialog({         autoOpen: false,         modal: true,         width: 600,         show: { effect: 'blind', speed: 1000 },         hide: { effect: 'blind', speed: 1000 },         title: "Add New"     });     var Delform = $("#delForm");     $(function () {         $('#tb').on("click", ".edit", function () {             $.ajax({                 "url": "@Url.Action("Openpar", "Emps")",                 type: 'Get',                 datatype: 'json',                 cache: false,                 data: { EID: $(this).closest("tr").find("td:eq(0)").text() },                 success: function (data) {                     createMode.dialog("open");                     createMode.empty().append(data);                 },                 error: function (t) {                     alert(t.responseText);                 }             });         });         $('#tb').on("click", ".del", function () {             var id = $(this).closest("tr").find("td:first").text();             Delform.dialog({                 autoOpen: false,                 modal: true,                 width: 550,                 title: "Delete",                 show: { effect: 'blind', speed: 1000 },                 hide: { effect: 'blind', speed: 1000 },                 buttons: {                     Yes: function () {                         $.ajax({                             "url": "/Emps/Delete",                             type: 'Get',                             datatype: 'json',                             cache: false,                             data: { EID: id },                             success: function (Data) {                                 Delform.dialog("close");                                 window.location.reload(true);                             },                             error: function (t) {                                 alert(t.responseText);                             }                         });                     },                     No: function () {                         Delform.dialog("close");                     }                 }             });             Delform.dialog("open");         });         $('#btnadd').click(function () {             $.ajax({                 "url": "/Emps/Openpop",                 type: 'Get',                 datatype: 'json',                 cache: false,                 success: function (data) {                     createMode.dialog("open");                     createMode.empty().append(data);                 },                 error: function (t) {                     alert(t.responseText);                 }             });         });         var table = $("#tb").DataTable({             "order": [[0, "asc"]],             "lengthMenu": [[2, 10, 25, 50, -1], [2, 10, 25, 50, "All"]],             "scroller": true,             "orderClasses": false,         })     }) </script> Create partial view : @model WebApplication1.Models.EMPVM1 @using (Html.BeginForm("Save","Emps",FormMethod.Post)) {     @Html.AntiForgeryToken() <div class="form-horizontal">     @Html.ValidationSummary(true, "", new { @class = "text-danger" })     <div class="form-group">         @Html.LabelFor(model => model.EID, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.EditorFor(model => model.EID, new { htmlAttributes = new { @class = "form-control" } })             @Html.ValidationMessageFor(model => model.EID, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.NAME, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.EditorFor(model => model.NAME, new { htmlAttributes = new { @class = "form-control" } })             @Html.ValidationMessageFor(model => model.NAME, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.ADDRESS, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.EditorFor(model => model.ADDRESS, new { htmlAttributes = new { @class = "form-control" } })             @Html.ValidationMessageFor(model => model.ADDRESS, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.PASSWORD, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.EditorFor(model => model.PASSWORD, new { htmlAttributes = new { @class = "form-control" } })             @Html.ValidationMessageFor(model => model.PASSWORD, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.CPASSWORD, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.EditorFor(model => model.CPASSWORD, new { htmlAttributes = new { @class = "form-control" } })             @Html.ValidationMessageFor(model => model.CPASSWORD, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.GENDER, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.RadioButtonFor(model => model.GENDER, "Male", new { htmlAttributes = new { @class = "form-control" } })Male             @Html.RadioButtonFor(model => model.GENDER, "Female", new { htmlAttributes = new { @class = "form-control" } })Female             @Html.ValidationMessageFor(model => model.GENDER, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.HOBBY, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @{                 for (int i = 0; i < Model.HOBBY.Count; i++)                 {                     @Html.CheckBoxFor(x => Model.HOBBY[i].Selected)                     @Html.DisplayFor(x => Model.HOBBY[i].Text)                     @Html.HiddenFor(x => Model.HOBBY[i].Value)                     @Html.HiddenFor(x => Model.HOBBY[i].Text)@:&nbsp;                 }             }             @Html.ValidationMessageFor(model => model.HOBBY, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.SALARY, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.EditorFor(model => model.SALARY, new { htmlAttributes = new { @class = "form-control" } })             @Html.ValidationMessageFor(model => model.SALARY, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.EMAIL, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.EditorFor(model => model.EMAIL, new { htmlAttributes = new { @class = "form-control" } })             @Html.ValidationMessageFor(model => model.EMAIL, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.DOJ, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.EditorFor(model => model.DOJ, new { htmlAttributes = new { @class = "form-control" } })             @Html.ValidationMessageFor(model => model.DOJ, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.INTEREST, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.ListBoxFor(model => model.INTEREST, Model.LINTEREST, new { @class = "form-control" })             @Html.ValidationMessageFor(model => model.INTEREST, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.CID, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.DropDownListFor(model => model.CID, Model.LCOUNTRY, "Select", new { @class = "form-control" })             @Html.ValidationMessageFor(model => model.CID, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         @Html.LabelFor(model => model.SID, htmlAttributes: new { @class = "control-label col-md-2" })         <div class="col-md-10">             @Html.DropDownListFor(model => model.SID, Model.LSTATE, "Select", new { @class = "form-control" })             @Html.ValidationMessageFor(model => model.SID, "", new { @class = "text-danger" })         </div>     </div>     <div class="form-group">         <div class="col-md-offset-2 col-md-10">             <input type="submit" value="Create" class="btn btn-default" />         </div>     </div> </div> } <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery-ui.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> <script type="text/javascript">     $(function () {         $('#DOJ').datepicker();         $('#CID').change(function () {             $('#SID').empty();             $('#SID').append("<option>Select</option>");             $.ajax({                 url: '/Emps/Fillddl',                 data: { CID: $(this).val() },                 success: function (data) {                     $.each(data, function (i, v) {                         $('#SID').append("<option value="+v.SID+">"+v.SNAME+"</option>");                     });                                     }             });         });     }); </script> Edit partial view : @model WebApplication1.Models.EMPVM1 @using (Html.BeginForm("Edit", "Emps", FormMethod.Post)) {     @Html.AntiForgeryToken()     <div class="form-horizontal">         @Html.ValidationSummary(true, "", new { @class = "text-danger" })         <div class="form-group">             @Html.LabelFor(model => model.EID, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.HiddenFor(m=>m.EID)                 @Html.DisplayFor(model => model.EID, new { htmlAttributes = new { @class = "form-control" } })                 @Html.ValidationMessageFor(model => model.EID, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             @Html.LabelFor(model => model.NAME, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.EditorFor(model => model.NAME, new { htmlAttributes = new { @class = "form-control" } })                 @Html.ValidationMessageFor(model => model.NAME, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             @Html.LabelFor(model => model.ADDRESS, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.EditorFor(model => model.ADDRESS, new { htmlAttributes = new { @class = "form-control" } })                 @Html.ValidationMessageFor(model => model.ADDRESS, "", new { @class = "text-danger" })             </div>         </div>                 <div class="form-group">             @Html.LabelFor(model => model.GENDER, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.RadioButtonFor(model => model.GENDER, "Male", new { htmlAttributes = new { @class = "form-control" } })Male                 @Html.RadioButtonFor(model => model.GENDER, "Female", new { htmlAttributes = new { @class = "form-control" } })Female                 @Html.ValidationMessageFor(model => model.GENDER, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             @Html.LabelFor(model => model.HOBBY, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @{                     for (int i = 0; i < Model.HOBBY.Count; i++)                     {                         @Html.CheckBoxFor(x => Model.HOBBY[i].Selected)                         @Html.DisplayFor(x => Model.HOBBY[i].Text)                         @Html.HiddenFor(x => Model.HOBBY[i].Value)                         @Html.HiddenFor(x => Model.HOBBY[i].Text)@:&nbsp;                     }                 }                 @Html.ValidationMessageFor(model => model.HOBBY, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             @Html.LabelFor(model => model.SALARY, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.EditorFor(model => model.SALARY, new { htmlAttributes = new { @class = "form-control" } })                 @Html.ValidationMessageFor(model => model.SALARY, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             @Html.LabelFor(model => model.EMAIL, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.EditorFor(model => model.EMAIL, new { htmlAttributes = new { @class = "form-control" } })                 @Html.ValidationMessageFor(model => model.EMAIL, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             @Html.LabelFor(model => model.DOJ, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.EditorFor(model => model.DOJ, new { htmlAttributes = new { @class = "form-control" } })                 @Html.ValidationMessageFor(model => model.DOJ, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             @Html.LabelFor(model => model.INTEREST, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.ListBoxFor(model => model.INTEREST, Model.LINTEREST, new { @class = "form-control" })                 @Html.ValidationMessageFor(model => model.INTEREST, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             @Html.LabelFor(model => model.CID, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.DropDownListFor(model => model.CID, Model.LCOUNTRY, "Select", new { @class = "form-control" })                 @Html.ValidationMessageFor(model => model.CID, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             @Html.LabelFor(model => model.SID, htmlAttributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @Html.DropDownListFor(model => model.SID, Model.LSTATE, "Select", new { @class = "form-control" })                 @Html.ValidationMessageFor(model => model.SID, "", new { @class = "text-danger" })             </div>         </div>         <div class="form-group">             <div class="col-md-offset-2 col-md-10">                 <input type="submit" value="Create" class="btn btn-default" />             </div>         </div>     </div> } <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery-ui.js"></script> <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> <script type="text/javascript">     $(function () { //$("#PASSWORD").rules("remove", "required") //$("#CPASSWORD").rules("remove", "required")    //$("#CPASSWORD").rules("add", "required")          $('#DOJ').datepicker();         $('#CID').change(function () {             $('#SID').empty();             $('#SID').append("<option>Select</option>");             $.ajax({                 url: '/Emps/Fillddl',                 data: { CID: $(this).val() },                 success: function (data) {                     $.each(data, function (i, v) {                         $('#SID').append("<option value="+v.SID+">"+v.SNAME+"</option>");                     });                 }             });         });     }); </script>