Thursday 30 April 2020

CRUD operations using CORE(3.1) MVC, Repository & Dependency Injection, core EF code first approach with on delete cascade ,jquery datatable, JqueryModalPopup & many more




Dot Net Core :

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

namespace JqueryModalPopup.Models
{
    public class COUNTRY
    {
        [Key]
        public int CID { get; set; }
        [MaxLength(50)]
        public string CNAME { get; set; }
    }
}
--
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace JqueryModalPopup.Models
{
    public class STATE
    {
        [Key]
        public int SID { get; set; }
        [MaxLength(50)]
        public string SNAME { get; set; }
        [ForeignKey("CID")]
        public COUNTRY COUNTRY { get; set; }
    }
}
--
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations.Schema;
using System.ComponentModel.DataAnnotations;

namespace JqueryModalPopup.Models
{
    public class EMP
    {
        [Key]
        public int EID { get; set; }
        [MaxLength(50)]
        public string NAME { get; set; }
        public string ADDRESS { get; set; }
        [MaxLength(50)]
        public string GENDER { get; set; }
        
        public int CID { get; set; }
        
        public int SID { get; set; }
    }
}
--
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;

namespace JqueryModalPopup.Models
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options)
        {

        }
        public DbSet<COUNTRY> Countries { get; set; }
        public DbSet<STATE> States { get; set; }
        public DbSet<EMP> Emps { get; set; }
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<COUNTRY>().HasData(new COUNTRY { CID = 1, CNAME = "X" }, new COUNTRY { CID = 2, CNAME = "Y" }, new COUNTRY { CID = 3, CNAME = "Z" });
            modelBuilder.Entity<STATE>()
                 .HasOne(x => x.COUNTRY)
                 .WithMany()
                 .IsRequired()
                 .OnDelete(DeleteBehavior.Cascade);

        }
    }
}
--
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace JqueryModalPopup.Models
{
    public class EMPVM
    {
        public EMPVM()
        {
            LCID = new List<SelectListItem>();
            LSID = new List<SelectListItem>();
        }
        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 = "Please select a gender.")]
        public string GENDER { get; set; }
      
        [Display(Name ="COUNTRY")]
        [Required(ErrorMessage = "Please select a country.")]
        public int CID { get; set; }
        public List<SelectListItem> LCID { get; set; }
        
        [Display(Name = "STATE")]
        [Required(ErrorMessage = "Please select a state.")]
        public int SID { get; set; }
        public List<SelectListItem> LSID { get; set; }
        public void Fillddl(List<SelectListItem> lc,List<SelectListItem> ls=null)
        {
            LCID = lc;
            LSID = ls;
        }
    }
}
--
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace JqueryModalPopup.Models
{
   public interface IRepository
    {
        Task<IEnumerable<COUNTRY>> Getc();
        Task<IEnumerable<STATE>> Gets(int CID);
        Task<IEnumerable<EMP>> Gete();
        Task<EMP> Get(int EID);
        Task<EMP> Save(EMP emp);
        Task<EMP> Update(EMP emp);
        Task<EMP> Delete(int EID);
    }
}
--
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;

namespace JqueryModalPopup.Models
{
    public class Repository : IRepository
    {
        #region Declaretion
        private readonly AppDbContext context;
        #endregion
        public Repository(AppDbContext Context)
        {
            this.context = Context;
        }
        public async Task<EMP> Delete(int EID)
        {
            EMP emp =await context.Emps.FindAsync(EID);
            context.Entry(emp).State = EntityState.Deleted;
            await context.SaveChangesAsync();
            return emp;
        }

        public async Task<EMP> Get(int EID)
        {
            return await context.Emps.FirstOrDefaultAsync(m => m.EID == EID);
        }

        public async Task<IEnumerable<COUNTRY>> Getc()
        {
            return await context.Countries.ToListAsync();
        }

        public async Task<IEnumerable<EMP>> Gete()
        {
            return await context.Emps.ToListAsync();
        }

        public async Task<IEnumerable<STATE>> Gets(int CID)
        {
            return await context.States.Where(m=>m.COUNTRY.CID==CID).ToListAsync();
        }

        public async Task<EMP> Save(EMP emp)
        {
            context.Entry(emp).State = EntityState.Added;
            await context.SaveChangesAsync();
            return emp;
        }

        public async Task<EMP> Update(EMP emp)
        {
            context.Entry(emp).State = EntityState.Modified;
            await context.SaveChangesAsync();
            return emp;
        }
    }
}
--
Controller code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using JqueryModalPopup.Models;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace JqueryModalPopup.Controllers
{
    public class EmpController : Controller
    {
        #region Declaretion
        private readonly IRepository repository;
        #endregion
        public EmpController(IRepository Repository)
        {
            this.repository = Repository;
        }
        [HttpGet]
        public async Task<IActionResult> Index()
        {
            return View(await repository.Gete());
        }
        [HttpPost]
        public async Task<IActionResult> Create(EMPVM vm)
        {
            EMP emp = new EMP();
            emp.NAME = vm.NAME;
            emp.ADDRESS = vm.ADDRESS;
            emp.GENDER = vm.GENDER;
            emp.CID = vm.CID;
            emp.SID = vm.SID;
            EMP emp1 = await repository.Save(emp);
            return RedirectToAction("Index");
        }
        [HttpGet]
        public async Task<IActionResult> Edit(int EID)
        {
            EMPVM emp = new EMPVM();
            EMP vm = await repository.Get(EID);
            emp.EID = vm.EID;
            emp.NAME = vm.NAME;
            emp.ADDRESS = vm.ADDRESS;
            emp.GENDER = vm.GENDER;
            emp.CID = vm.CID;
            emp.SID = vm.SID;
            emp.Fillddl(repository.Getc().Result.Select(x => new SelectListItem { Value = x.CID.ToString(), Text = x.CNAME }).ToList(), repository.Gets(vm.CID).Result.Select(x => new SelectListItem { Value = x.SID.ToString(), Text = x.SNAME }).ToList());
            return PartialView("EditPV", emp);
        }
        [HttpPost]
        public async Task<IActionResult> Edit(EMPVM vm)
        {
            EMP emp = await repository.Get(vm.EID);
            emp.NAME = vm.NAME;
            emp.ADDRESS = vm.ADDRESS;
            emp.GENDER = vm.GENDER;
            emp.CID = vm.CID;
            emp.SID = vm.SID;
            EMP emp1 = await repository.Update(emp);
            return RedirectToAction("Index");
        }
        [HttpGet]
        public async Task<IActionResult> Create()
        {
            EMPVM eMPVM = new EMPVM();
            var data = await repository.Getc();
            eMPVM.Fillddl(data.Select(x => new SelectListItem { Value = x.CID.ToString(), Text = x.CNAME }).ToList());
            return PartialView("CreatePV", eMPVM);
        }
        [HttpGet]
        public async Task<IActionResult> Delete(int id)
        {
            EMP emp1 = await repository.Delete(id);
            return RedirectToAction("Index");
        }
        [HttpGet]
        public async Task<IActionResult> Fddl(int CID)
        {
            return Json(await repository.Gets(CID));
        }
    }
}
--
Index View :

@model IEnumerable<JqueryModalPopup.Models.EMP>

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

    <style type="text/css">
        .ui-dialog {
            height: auto;
            width: 700px;
            top: 60px !important;
            left: 675px;
        }

        .ui-dialog-titlebar-close {
            background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_888888_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
            border: medium none;
        }

            .ui-dialog-titlebar-close:hover {
                background: url("http://code.jquery.com/ui/1.10.3/themes/smoothness/images/ui-icons_222222_256x240.png") repeat scroll -93px -128px rgba(0, 0, 0, 0);
            }
    </style>

<p>
    <a href="#" class="btn btn-primary" id="add">Add New</a>
</p>
<div style="border:1px solid #000000">
    <table class="table  table-hover">
        <thead class="bg bg-primary">
            <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.GENDER)
                </th>
                <th>ACTION</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.GENDER)
                    </td>
                    <td>
                        <a class="edit">Edit</a> | <a class="delete">Delete</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
    <div id="dmldv">

    </div>
    <div id="delForm" style="display:none">
        <h1>Do you want to delete it ?</h1>
    </div>
    @section Scripts {
        @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
        <script type="text/javascript">
               var createMode = $("#dmldv").dialog({
            autoOpen: false,
            modal: true,
            height: 700,
            width: 700,
            resizable: false,
            position: { my: "center", at: "center", of: $("body"), within: $("body") },
            show: { effect: 'blind', speed: 1000 },
            hide: { effect: 'blind', speed: 1000 },
            title: "Add Or Edit"

        });
        var Delform = $("#delForm");
            $(function () {
                var table = $('.table').DataTable({
                    "order": [[0, "asc"]],
                    "lengthMenu": [[2, 10, 25, 50, -1], [2, 10, 25, 50, "All"]],
                    "scroller": true,
                    "orderClasses": false,
                });
                $('.table').on("click", ".delete", function () {
                id = $(this).closest("tr").find("td:eq(0)").text();
                Delform.dialog({
                    autoOpen: false,
                    modal: true,
                    width: 550,
                    title: "Delete",
                    resizable: false,
                    position: { my: "center", at: "center", of: $("body"), within: $("body") },
                    show: { effect: 'blind', speed: 1000 },
                    hide: { effect: 'blind', speed: 1000 },

                    buttons: {
                        Yes: function () {

                            $.ajax({
                                "url": '@Url.Action("Delete", "Emp")',
                                type: 'Get',
                                datatype: 'json',
                                cache: false,
                                data: { id: 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");

            });
                $('.table').on("click", ".edit", function () {
                  var  id = $(this).closest("tr").find("td:first").text();
                     $.ajax({
                    "url":  '@Url.Action("Edit", "Emp")',
                    type: 'Get',
                    datatype: 'json',
                    cache: false,
                    async: true,
                    data: { EID: id },
                    success: function (data) {
                        createMode.empty().append(data);
                        createMode.dialog("open");
                    },
                    error: function (t) {
                        alert(t.responseText);
                    }
                });
                
            });
                $('#add').click(function () {
                     $.ajax({
                    "url":  '@Url.Action("Create", "Emp")',
                    type: 'Get',
                    datatype: 'json',
                    cache: false,
                    async: true,
                    success: function (data) {
                        createMode.empty().append(data);
                        createMode.dialog("open");
                    },
                    error: function (t) {
                        alert(t.responseText);
                    }
                });
                });
            });
        </script>
    }

Create View :

@model EMPVM


<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            
            <div class="form-group">
                <label asp-for="NAME" class="control-label"></label>
                <input asp-for="NAME" class="form-control" />
                <span asp-validation-for="NAME" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ADDRESS" class="control-label"></label>
                <textarea asp-for="ADDRESS" class="form-control" ></textarea>
                <span asp-validation-for="ADDRESS" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="GENDER" class="control-label"></label>
                <input asp-for="GENDER" type="radio" value="Male" />Male
                <input asp-for="GENDER" type="radio" value="Female" />Female
                <span asp-validation-for="GENDER" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CID" class="control-label"></label>
                <select asp-for="CID" class="form-control" asp-items="Model.LCID">
                    <option value="">Select</option>
                </select>
                <span asp-validation-for="CID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="SID" class="control-label"></label>
                <select asp-for="SID" class="form-control" asp-items="Model.LSID">
                    <option value="">Select</option>
                </select>
                <span asp-validation-for="SID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('#CID').change(function () {
            $('#SID').empty();
            $('#SID').append("<option value=''>Select</option>");
            $.ajax({
                url: '@Url.Action("Fddl","Emp")',
                type: 'Get',
                datatype: 'Json',
                data: { CID: $(this).val() },
                success: function (data) {
                    $.each(data, function (i, v) {
                         $('#SID').append("<option value='"+v.SID+"'>"+v.SNAME+"</option>");
                    });
                }
            })
        });
    });
</script>

Edit View :

@model EMPVM


<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <div class="form-group">
                <label asp-for="NAME" class="control-label"></label>
                <input asp-for="NAME" class="form-control" />
                <input type="hidden" asp-for="EID" />
                <span asp-validation-for="NAME" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="ADDRESS" class="control-label"></label>
                <textarea asp-for="ADDRESS" class="form-control"></textarea>
                <span asp-validation-for="ADDRESS" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="GENDER" class="control-label"></label>
                <input asp-for="GENDER" type="radio" value="Male" />Male
                <input asp-for="GENDER" type="radio" value="Female" />Female
                <span asp-validation-for="GENDER" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="CID" class="control-label"></label>
                <select asp-for="CID" class="form-control" asp-items="Model.LCID">
                    <option value="">Select</option>
                </select>
                <span asp-validation-for="CID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="SID" class="control-label"></label>
                <select asp-for="SID" class="form-control" asp-items="Model.LSID">
                    <option value="">Select</option>
                </select>
                <span asp-validation-for="SID" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

<script type="text/javascript">
    $(function () {
        $('#CID').change(function () {
            $('#SID').empty();
            $('#SID').append("<option value=''>Select</option>");
            $.ajax({
                url: '@Url.Action("Fddl","Emp")',
                type: 'Get',
                datatype: 'Json',
                data: { CID: $(this).val() },
                success: function (data) {
                    $.each(data, function (i, v) {
                         $('#SID').append("<option value='"+v.SID+"'>"+v.SNAME+"</option>");
                    });
                }
            })
        });
    });
</script>

Layout View :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - JqueryModalPopup</title>
    <link href="~/lib/jqueryui/jquery-ui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link href="~/lib/DataTables-css/css/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="~/lib/DataTables-css/css/jquery.dataTables_themeroller.css" rel="stylesheet" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">JqueryModalPopup</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Emp" asp-action="Index">Emp</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - JqueryModalPopup - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jqueryui/jquery-ui.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/DataTables-js/jquery.dataTables.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)