Monday 2 September 2019

Nested jquery datatable in dot net core(2.1) MVC6


Controller :

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


namespace WebApplication2.Controllers
{
    public class GajananController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        [HttpGet]
        public IActionResult Gets()
        {
            List<EMP1> lst1 = new List<EMP1>() {
                 new EMP1 { DID=1, NAME="A",EID=1 },
                 new EMP1 { DID=1, NAME="B",EID=2 },
                 new EMP1 { DID=2, NAME="C" ,EID=3},
                 new EMP1 { DID=2, NAME="D" ,EID=4},
                 new EMP1 { DID=3, NAME="E" ,EID=5},
                 new EMP1 { DID=3, NAME="F" ,EID=6}
            };
            List<DEPT1> lst = new List<DEPT1>() {
                 new DEPT1 { DID=1, DNAME="X", LEMP=lst1.Where(m=>m.DID==1).ToList() },
                 new DEPT1 { DID=2, DNAME="Y",LEMP=lst1.Where(m=>m.DID==2).ToList() },
                 new DEPT1 { DID=3, DNAME="Z" ,LEMP=lst1.Where(m=>m.DID==3).ToList()}
            };
            return Json(JsonConvert.SerializeObject(lst.ToList()));

        }
    }
}

 public class DEPT1
        {
            public int DID { get; set; }
            public string DNAME { get; set; }
            public List<EMP1> LEMP { get; set; }
        }
        public class EMP1
        {
            public int EID { get; set; }
            public string NAME { get; set; }
            public int DID { get; set; }
        }

View :


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

<h1>Index</h1>

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

    td.details-control {
        background: url('~/wwwroot/details_close.png') no-repeat center center;
        cursor: pointer;
    }

td.abc { background: url('~/wwwroot/details_close.png') no-repeat center center; cursor: pointer; }
</style>
<img src="~/css/DataTables/images/details_open.png" />
<div class="container">
    <div>
        <table id="exampleTable" class="tbl">
            <thead>
                <tr>
                    <th>DID</th>
                    <th>DNAME</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">

        function fnFormatDetails(table_id, html) {
            var sOut = "<table class='tbl' id=\"exampleTable_" + table_id + "\">";
            sOut += html;
            sOut += "</table>";
            return sOut;
        }
        var iTableCounter = 1;
        var oTable;
        var oInnerTable;
        var detailsTableHtml;
        $(document).ready(function () {
            detailsTableHtml = $("#detailsTable").html();
            var nCloneTh = document.createElement('th');
            var nCloneTd = document.createElement('td');
            nCloneTd.className = "center";
            $('#exampleTable thead tr').each(function () {
                this.insertBefore(nCloneTh, this.childNodes[0]);
            });

            var newRowData;
            var oTable = null;
            $.ajax({
                "url": "/Gajanan/Gets",
                type: 'Get',
                datatype: 'json',
                cache: false,
                success: function (Data) {
                    newRowData = JSON.parse(Data);
                    oTable = $('#exampleTable').dataTable({
                        "pagingType": "full_numbers",
                        "lengthMenu": [2, 10, 20],
                        "bJQueryUI": true,
                        "aaData": JSON.parse(Data),
                        "aoColumns": [
                            {
                                "className": 'details-control',
                                "orderable": false,
                                "data": null,
                                "defaultContent": ''

                            },
                            { "mDataProp": "DID" },
                            { "mDataProp": "DNAME" }
                        ],
                        "oLanguage": {
                            "sInfo": "_TOTAL_ entries"
                        },
                        "aaSorting": [[1, 'asc']]
                    });
                }
            });


            $('#exampleTable tbody').on('click', 'td.details-control', function () {
                var nTr = $(this).parents('tr')[0];
                var nTds = this;
                if (oTable.fnIsOpen(nTr)) {
                    $(this).parents('tr:first').children('td:first').removeClass("abc");
                    oTable.fnClose(nTr);
                }
                else {
                    $(this).parents('tr:first').children('td:first').addClass("abc");
                    var rowIndex = oTable.fnGetPosition($(nTds).closest('tr')[0]);
                    var detailsRowData = newRowData[rowIndex].LEMP;
                    oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details');
                    oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
                        "bJQueryUI": true,
                        "bFilter": false,
                        "aaData": detailsRowData,
                        "bSort": true,
                        "aoColumns": [
                            { "mDataProp": "EID" },
                            { "mDataProp": "NAME" },
                        ],
                        "bPaginate": false,
                        "oLanguage": {
                            "sInfo": "_TOTAL_ entries"
                        }

                    });
                    iTableCounter = iTableCounter + 1;
                }
            });


        });

    </script>
}

How to call store procedure in entity framework code first approach :

 public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
    {
        public ApplicationDbContext()
            : base("AppDbContext", throwIfV1Schema: false)
        {
        }
        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {

            this.Database.SqlQuery<EMP>("exec Gets");
            this.Database.SqlQuery<EMP>("exec Get @Eid");
            base.OnModelCreating(modelBuilder);
           
        }
        public DbSet<EMP> Emps { get; set; }
        public static ApplicationDbContext Create()
        {
            return new ApplicationDbContext();
        }
    }


Controller :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Migration.Models;
using System.Data.SqlClient;

namespace Migration.Controllers
{
    public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            using (ApplicationDbContext obj = new Models.ApplicationDbContext())
            {
                return View(obj.Database.SqlQuery<EMP>("exec Gets").ToList());
            }
                
        }
        public ActionResult Details(int id)
        {
            using (ApplicationDbContext obj = new Models.ApplicationDbContext())
            {
                System.Data.SqlClient.SqlParameter sp = new SqlParameter("@Eid", id);
                return View(obj.Database.SqlQuery<EMP>("exec Get @eid",sp).FirstOrDefault());
            }
        }
    }
}

No comments:

Post a Comment