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">
© 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>