Dynamic page in MVC6 & Core(2.1)

Models :

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class A
    {
        [Key, DatabaseGenerated(DatabaseGeneratedOption.None)]
        public int DID { get; set; }
        [MaxLength(50)]
        public string DNAME { get; set; }
    }
}

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.ComponentModel.DataAnnotations.Schema;

using System.Linq;

using System.Threading.Tasks;

namespace WebApplication1.Models

{

    public class B

    {

        [Key, DatabaseGenerated(DatabaseGeneratedOption.None)]

        public int EID { get; set; }

        [MaxLength(50)]

        public string NAME { get; set; }

        public int DID { get; set; }

    }

}

View Model :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

namespace WebApplication1.Models

{

    public class ABVM

    {

        public int? DID { get; set; }

        public string DNAME { get; set; }

        public List<B> LISTB { get; set; }

        public int? MARK { get; set; }

    }

}

Controller :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApplication1.Models;
using Newtonsoft.Json;

namespace WebApplication1.Controllers
{
    public class HanumanController : Controller
    {
        private readonly IRepository<A> rA;
        private readonly IRepository<B> rB;
        public HanumanController(IRepository<A> RA, IRepository<B> RB)
        {
            this.rA = RA;
            this.rB = RB;

        }
        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public IActionResult Gets()
        {
            List<ABVM> lst = new List<ABVM>();
            var data1 = rA.Gets().ToList();
            foreach (A a in data1)
            {
                var data = rB.Gets().Where(n => n.DID == a.DID).ToList();
                lst.Add(new ABVM { DID = a.DID, DNAME = a.DNAME, LISTB = data });
            }
               
            return Json(JsonConvert.SerializeObject(lst));
        }
        [HttpGet]
        public IActionResult Create(int? ID)
        {
            ABVM vm = new ABVM();
            vm.MARK = 0;
            if (ID != null)
            {
                A a = rA.Get(ID.Value).Result;
                vm.DID = a.DID;
                vm.DNAME = a.DNAME;
                vm.LISTB = rB.Gets().Where(m => m.DID == a.DID).ToList();
                ViewBag.lISTB =JsonConvert.SerializeObject(rB.Gets().Where(m => m.DID == a.DID).ToList());
                vm.MARK = 1;
            }
           
            return View(vm);
        }
        [HttpGet]
        public IActionResult Delete(int id)
        {
            rA.Delete(id);
            rB.Multipledelete(rB.Gets().Where(m => m.DID == id).ToList());
            return RedirectToAction("Index");
        }
        [HttpPost]
        public IActionResult Create(ABVM vm)
        {

            try
            {
                A a = new A();
                if (vm.MARK == 0)
                {
                    a.DID = vm.DID.Value;
                    a.DNAME = vm.DNAME;
                    rA.Save(a);
                    rB.Multiplesave(vm.LISTB);
                }
                else
                {
                    a = rA.Get(vm.DID??0).Result;
                    a.DNAME = vm.DNAME;
                    rA.Update(a);
                    rB.Multipledelete(rB.Gets().Where(m => m.DID == a.DID).ToList());
                    rB.Multiplesave(vm.LISTB);
                }
                return Json("1");
            }
            catch (Exception ex)
            {
                return Json("2");
            }
         

        }
    }
}

Index View :

@{
    ViewData["Title"] = "Index";
}

<style>
    .tbl {
        border: solid 1px #000000;
        height: auto;
        width: auto
    }

    td.details-control {
        background: url('../../wwwroot/css/DataTables/images/sort_asc.png') no-repeat center center;
        cursor: pointer;
    }

    td.abc {
        background: url('../../wwwroot/css/DataTables/images/sort_both.png') no-repeat center center;
        cursor: pointer;
    }
</style>
<p>
    <a asp-action="Create">Create</a>
</p>

<div class="container">
    <div style="border:1px solid #000000">
        <table id="exampleTable" class="tbl  table-hover">
            <thead style="background-color:antiquewhite;color:black">
                <tr>
                    <th>DID</th>
                    <th>DNAME</th>
                    <th>UPDATE</th>
                    <th>DELETE</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div style="display:none">
        <table id="detailsTable">
            <thead>
                <tr>
                    <th>EID</th>
                    <th>NAME</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>


</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script type="text/javascript">

     
        $(document).ready(function () {
         
            $.ajax({
                "url": "/Hanuman/Gets",
                type: 'Get',
                datatype: 'json',
                cache: false,
                success: function (Data) {
                    newRowData = JSON.parse(Data);
                    table = $('#exampleTable').DataTable({
                        data: newRowData,
                        "pagingType": "full_numbers",
                        "lengthMenu": [2, 10, 20],
                        columns: [
                            { data: "DID" },
                            { data: "DNAME" },
                         
                            {
                                data: "DID",
                                render: function (eid) {
                                    return '<a onClick="edit(' + eid + ')">Edit</a>';

                                }
                            },
                            {
                               data: "DID",
                                render: function (eid) {
                                    return '<a onClick="del(' + eid + ')">Delete</a>';

                                }

                            }
                        ],
                        select: {
                            style: 'multi'
                        },
                        order: [[1, 'asc']]

                    });
                   
                }
            });



           

        });
        function edit(id) {
            window.location.href = "Hanuman/Create/" + id;
        }
        function del(id) {
            window.location.href = "Hanuman/Delete/" + id;
        }
    </script>
}

Create View  :

@model ABVM

@{

    ViewData["Title"] = "Create";

}

<form asp-action="" class="form-horizontal" style="margin-top:10px">

    <div class="form-group">

        <label class="control-label col-lg-4" asp-for="DID"></label>

        <div class="col-lg-4">

            <input class="form-control" asp-for="DID" />

        </div>

        <span asp-validation-for="DID" class="text-danger" id="edid"></span>

    </div>

    <div class="form-group">

        <label class="control-label col-lg-4" asp-for="DNAME"></label>

        <div class="col-lg-4">

            <input class="form-control" asp-for="DNAME" />

        </div>

        <span asp-validation-for="DNAME" id="edname" class="text-danger"></span>

    </div>

    <div class="form-group">

        <label class="control-label col-lg-4"></label>

        <div class="col-lg-4">

            <table id="tb" width="100%" class="table table-bordered">

                <tr style="background-color:bisque;color:black"><th>EID</th><th>NAME</th><th><a class="add"> <img src="~/css/DataTables/images/details_open.png" /></a></th></tr>

                <tr class="C"><td><input type='text' class='form-control eid' name="eid" /><span class="text-danger" name="name1"></span></td><td><input type='text'  name="ename" class='form-control name' /><span class="text-danger" name="ename1"></span></td><td><a class='del'><img src='/css/DataTables/images/details_close.png' /></a></td></tr>

            </table>

        </div>

    </div>

    <div class="form-group">

        <label class="control-label col-lg-4"></label>

        <div class="col-lg-4">

            <input class="btn btn-primary" style="width:80px" type="button" value="Save" id="btnadd" />

            <input class="btn btn-primary" style="width:80px" type="button" value="Reset" id="btnreset" />

        </div>

    </div>

</form>

<div>

    <a asp-action="Index">Back to List</a>

</div>

@section Scripts {

    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script type="text/javascript">

        $(function () {

            var row = $('.C').clone();

            $('#tb').on("click", ".add", function () {

                var crow = row.clone();

                $('#tb').append(crow);

            });

            $('#tb').on("click", ".del", function () {

                var drow = $(this).parents('.C');

                if ($('.C').length > 1)

                    drow.remove();

            });

            var mk =  @Model.MARK;

            if (mk == 1) {

               

                var Listb = @Html.Raw(ViewBag.lISTB);

                $('#tb').find('.C').remove();

                for (var i = 0; i < Listb.length; i++) {

                    $('#tb').last().append("<tr class='C'><td><input type='text' class='form-control eid' name='eid' value='" + Listb[i].EID + "' /><span class='text - danger' name='name1'></span></td><td><input type='text'  name='ename' class='form-control name' value='" + Listb[i].NAME + "' /><span class='text - danger' name='ename1'></span></td><td><a class='del'><img src='/css/DataTables/images/details_close.png' /></a></td></tr>");

                }

            }

          

          

            

            var validation;

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

                $('#edid').text('');

                if ($('#DID').val() == "") {

                    $('#edid').text('DID should not be blank.');

                    $('#DID').focus();

                    return false;

                }

                else if ($('#DNAME').val() == "") {

                    $('#edname').text('Name should not be blank.');

                    $('#DNAME').focus();

                    return false;

                }

                

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

                    if (i != 0) {

                        validation = 0;

                        if ($(j).find('td').find("input[name='eid']").val() == "") {

                            $(j).find('td').find("[name='name1']").text('Eid should be not blank.');

                            validation=1

                        }

                        if ($(j).find('td').find("input[name='ename']").val() =="") {

                            $(j).find('td').find("[name='ename1']").text('Name should be not blank.');

                            validation=1

                        }

                            

                    }

                });

               

                if (validation == 1)

                    return;

                var marr = [];

                $.each($('.C'), function (i, j) {

                    marr.push({ EID: $(j).find('.eid').val(), NAME: $(j).find('.name').val(), DID: $('#DID').val() });

                });

                

                 $.ajax({

                        "url": '@Url.Action("Create", "Hanuman")',

                        type: 'Post',

                         datatype: 'json',

                        cache: false,

                     async: true,

                     data: { DID: $('#DID').val(), DNAME: $('#DNAME').val(), LISTB: marr, MARK: mk },

                        success: function (data) {

                            if (data == 1)

                                window.location.href = "index";

                        }

                    });

            });

        })

    </script>

}