VIEW MODEL BIND IN JQUERY & MVC

Model :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication27.Models
{
    public class EMP
    {
        public int EID { get; set; }
        public string NAME { get; set; }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebApplication27.Models
{
    public class DEPT
    {
        public int? DID { get; set; }
        public string DNAME { get; set; }
    }
}


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace WebApplication27.Models
{
    public class EMPVM
    {
        [Required(ErrorMessage = "EID should not blank.")]
        public int? EID { get; set; }
        [Required(ErrorMessage = "NAME should not blank.")]
        public string NAME { get; set; }
        [DisplayName("DEPARTMENT")]
        public List<DEPT> LDEPT { get; set; }
        [Required(ErrorMessage="DID should not blank.")]
        public int? DID { get; set; }
        [Required(ErrorMessage = "DNAME should not blank.")]
        public string DNAME { get; set; }
    }
}

Controller :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApplication27.Models;


namespace WebApplication27.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        [HttpGet]
        public ActionResult Index()
        {
            using (Database1Entities obj = new Database1Entities())
            {
                return View(obj.EMP1.ToList());
            }
         
        }
        [HttpGet]
        public ActionResult Create()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Create(EMPVM emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                obj.EMP1.Add(new EMP1 { EID=emp.EID.Value,NAME=emp.NAME });
                obj.SaveChanges();
                if (emp.LDEPT != null)
                {
                    obj.DEPT1.AddRange(emp.LDEPT.Select(m => new DEPT1 { DID = m.DID.Value, DNAME = m.DNAME }));
                    obj.SaveChanges();
                    obj.EMPMAPs.AddRange(emp.LDEPT.Select(m => new EMPMAP { EID = emp.EID, DID = m.DID }));
                    obj.SaveChanges();
                }
                else
                {
                    obj.DEPT1.Add(new DEPT1 { DID = emp.DID.Value, DNAME = emp.DNAME });
                    obj.SaveChanges();
                    obj.EMPMAPs.Add( new EMPMAP { EID = emp.EID, DID = emp.DID });
                    obj.SaveChanges();
                }
                return RedirectToAction("Index");
            }
           
        }
        [HttpGet]
        public ActionResult Edit(int? id)
        {
            using (Database1Entities obj = new Database1Entities())
            {

                EMPVM emp = obj.EMP1.Where(a => a.EID == id).Select(x => new EMPVM { EID = x.EID, NAME = x.NAME, LDEPT = obj.DEPT1.Where(p => obj.EMPMAPs.Where(q => q.EID == id).Select(r => r.DID).Contains(p.DID)).Select(y => new DEPT { DID = y.DID, DNAME = y.DNAME }).ToList() }).FirstOrDefault();
                return View(emp);
            }
        }
     
        [HttpPost]
        public ActionResult Edit(EMPVM emp)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP1 emp1 = obj.EMP1.Find(emp.EID);
                emp1.NAME = emp.NAME;
                obj.SaveChanges();
                if (emp.LDEPT != null)
                {
                    var did = emp.LDEPT.Select(a => a.DID).ToList();
                    obj.DEPT1.RemoveRange(obj.DEPT1.Where(x => did.Contains(x.DID)));
                    obj.SaveChanges();
                    obj.DEPT1.AddRange(emp.LDEPT.Select(m => new DEPT1 { DID = m.DID.Value, DNAME = m.DNAME }));
                    obj.SaveChanges();
                    obj.EMPMAPs.RemoveRange(obj.EMPMAPs.Where(x => x.EID == emp.EID));
                    obj.SaveChanges();
                    obj.EMPMAPs.AddRange(emp.LDEPT.Select(m => new EMPMAP { EID = emp.EID, DID = m.DID }));
                    obj.SaveChanges();
                }
                else
                {
                    DEPT1 dept1 = obj.DEPT1.Find(emp.DID);
                    dept1.DNAME = emp.DNAME;
                    obj.SaveChanges();
                    EMPMAP eMPMAP = obj.EMPMAPs.Find(emp.EID);
                    eMPMAP.DID = emp.DID;
                    obj.SaveChanges();
                }
                return RedirectToAction("Index");
            }
        }
         [HttpGet]
        public ActionResult Delete(int? id)
        {
            using (Database1Entities obj = new Database1Entities())
            {
                EMP1 emp1 = obj.EMP1.Find(id);
                return View(emp1);
            }
        }
         [HttpPost]
         public ActionResult Delete(EMP1 emp)
         {
             using (Database1Entities obj = new Database1Entities())
             {
                 obj.EMP1.Remove(obj.EMP1.Find(emp.EID));
                 obj.SaveChanges();
                 obj.EMPMAPs.RemoveRange(obj.EMPMAPs.Where(x => x.EID == emp.EID));
                 obj.SaveChanges();
                 return RedirectToAction("Index");
             }
         }
    }

}

View  :

Create View Code:

@model WebApplication27.Models.EMPVM

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
   
    <div class="form-horizontal">
     
        <hr />
        @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.LDEPT, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
               <table id="tb">
                   <thead>
                       <tr><th>DID</th><th>DNAME</th><th><a id="add">+</a></th></tr>
                   </thead>
                   <tbody>
                       <tr class="c">
                           <td>
                               @Html.TextBoxFor(model => model.DID, new { @class = "form-control", @name="LDEPT[0].DID" } )
                               @Html.ValidationMessageFor(model => model.DID, "", new { @class = "text-danger" })
                           </td>
                           <td>
                               @Html.TextBoxFor(model => model.DNAME, new  { @class = "form-control", @name = "LDEPT[0].DNAME" } )
                               @Html.ValidationMessageFor(model => model.DNAME, "", new { @class = "text-danger" })
                           </td>
                           <td><a class="sub">-</a></td>
                       </tr>
                   </tbody>
               </table>
            </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>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>



<script type="text/javascript">

    $(function () {
        var i = 0;
        $('#add').click(function () {
            i++;
            $('#tb').append("<tr class='c'><td><input class ='form-control' type='text' name='LDEPT[" + i + "].DID' /></td><td><input type='text' class ='form-control' name='LDEPT[" + i + "].DNAME' /></td><td><a class='sub'>-</a></td></tr>");
            $('#tb').find('tr').each(function (p, j) {
                if (p > 0) {
                    var q = parseInt(p - 1);
                    $(j).find('td').each(function (k, l) {

                        if (k == 0) {
                            $(l).find("input[type='text']").attr("name", "LDEPT[" + q + "].DID")
                        }
                        else if (k == 1) {
                            $(l).find("input[type='text']").attr("name", "LDEPT[" + q + "].DNAME");
                        }


                    });
                }

            });


        });
        $('body').on("click", ".sub", function () {

            var row = $(this).parents('.c');
           if( $('#tb').find('tr').length>2)
            row.remove();
            $('#tb').find('tr').each(function (p, j) {
                if (p > 0) {
                    var q = parseInt(p - 1);
                    $(j).find('td').each(function (k, l) {
                        if (k == 0) {
                            $(l).find("input[type='text']").attr("name", "LDEPT[" + q + "].DID")
                        }
                        else if (k == 1) {
                            $(l).find("input[type='text']").attr("name", "LDEPT[" + q + "].DNAME");
                        }


                    });
                }

            });

        });

    });

</script>

Edit View Code :

@model WebApplication27.Models.EMPVM

@{

    ViewBag.Title = "Edit";

}

<h2>Edit</h2>

@using (Html.BeginForm())

{

    @Html.AntiForgeryToken()

    

    <div class="form-horizontal">

      

        <hr />

        @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.LDEPT, htmlAttributes: new { @class = "control-label col-md-2" })

            <div class="col-md-10">

                <table id="tb">

                    <thead>

                        <tr><th>DID</th><th>DNAME</th><th><a id="add">+</a></th></tr>

                    </thead>

                    <tbody>

                        @for (int i = 0; i < Model.LDEPT.Count; i++)

                        {

                           

                            <tr class="c">

                                <td>

                                    @Html.TextBoxFor(model =>Model.LDEPT[i].DID,new { @class = "form-control", @name = "LDEPT['"+i+"'].DID" })

                                    @Html.ValidationMessageFor(model => model.DID, "", new { @class = "text-danger" })

                                </td>

                                <td>

                                    @Html.TextBoxFor(model => Model.LDEPT[i].DNAME, new { @class = "form-control", @name = "LDEPT['"+i+"'].DNAME" })

                                    @Html.ValidationMessageFor(model => model.DNAME, "", new { @class = "text-danger" })

                                </td>

                                <td><a class="sub">-</a></td>

                            </tr>

                        }

                        

                    </tbody>

                </table>

            </div>

        </div>

        <div class="form-group">

            <div class="col-md-offset-2 col-md-10">

                <input type="submit" value="Save" class="btn btn-default" />

            </div>

        </div>

    </div>

}

<div>

    @Html.ActionLink("Back to List", "Index")

</div>

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

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

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript">

    $(function () {

        var i = 0;

        $('#add').click(function () {

            i++;

            $('#tb').append("<tr class='c'><td><input class ='form-control' type='text' name='LDEPT[" + i + "].DID' /></td><td><input type='text' class ='form-control' name='LDEPT[" + i + "].DNAME' /></td><td><a class='sub'>-</a></td></tr>");

            $('#tb').find('tr').each(function (p, j) {

                if (p > 0) {

                    var q = parseInt(p - 1);

                    $(j).find('td').each(function (k, l) {

                        if (k == 0) {

                            $(l).find("input[type='text']").attr("name", "LDEPT[" + q + "].DID")

                        }

                        else if (k == 1) {

                            $(l).find("input[type='text']").attr("name", "LDEPT[" + q + "].DNAME");

                        }

                    });

                }

            });

        });

        $('body').on("click", ".sub", function () {

            var row = $(this).parents('.c');

            if ($('#tb').find('tr').length > 2)

                row.remove();

            $('#tb').find('tr').each(function (p, j) {

                if (p > 0) {

                    var q = parseInt(p - 1);

                    $(j).find('td').each(function (k, l) {

                        if (k == 0) {

                            $(l).find("input[type='text']").attr("name", "LDEPT[" + q + "].DID")

                        }

                        else if (k == 1) {

                            $(l).find("input[type='text']").attr("name", "LDEPT[" + q + "].DNAME");

                        }

                    });

                }

            });

        });

    });

</script>

Delete View Code :

@model WebApplication27.Models.EMP1

@{

    ViewBag.Title = "Delete";

}

<h2>Delete</h2>

<h3>Are you sure you want to delete this?</h3>

<div>

  

    <hr />

    <dl class="dl-horizontal">

        <dt>

          

            @Html.DisplayNameFor(model => model.NAME)

        </dt>

        <dd>

            @Html.DisplayFor(model => model.NAME)

        </dd>

    </dl>

    @using (Html.BeginForm()) {

        @Html.AntiForgeryToken()

    @Html.HiddenFor(m => m.EID)

        <div class="form-actions no-color">

            <input type="submit" value="Delete" class="btn btn-default" /> |

            @Html.ActionLink("Back to List", "Index")

        </div>

    }

</div>

SOME RegularExpression example
[RegularExpression(@"^(\d{6,9})$", ErrorMessage = "Zip code will only accept numeric digits with length 6 digit")]
        [RegularExpression(@"\d{5}", ErrorMessage = "Zip code will only accept numeric digits with length 5 digit")]

[RegularExpression(@"^[a-zA-Z]+$", ErrorMessage = "Please enter letters only")]


[RegularExpression(@"^(?=.*[A-Z])(?=.*\d)[A-Za-z\d!$%@#£€*?&]{8,16}$", ErrorMessage = "Password should be alpha-numeric, at least 8 characters long and have at least one number and one capital letter.")]