DATABASE CODE:
create database crud_app_with_ajax_and_jquery
use crud_app_with_ajax_and_jquery
create table tbl_department
(
DepartmentId int primary key identity,
DepartmentName nvarchar(50) not null
)
create table tbl_Student
(
StudentId int primary key identity,
StudentName nvarchar(50) not null,
Email nvarchar(50) not null,
IsDeleted bit,
DepartmentId int foreign key references tbl_department(DepartmentId)
)
insert into tbl_department values ('CS'),('BBA')
insert into tbl_Student values ('Ahmed','ahmed@gmail.com',0,1)
STUDENT VIEW MODEL CODE:
public class StudentViewModel
{
public int StudentId { get; set; }
public string StudentName { get; set; }
public string Email { get; set; }
public Nullable<bool> IsDeleted { get; set; }
public Nullable<int> DepartmentId { get; set; }
public string DepartmentName { get; set; }
}
CONTROLLER CODE:
public class HomeController : Controller
{
crud_app_with_ajax_and_jqueryEntities db = new crud_app_with_ajax_and_jqueryEntities();
public ActionResult Index()
{
List<tbl_department> DepList = db.tbl_department.ToList();
ViewBag.DepartList = new SelectList(DepList, "DepartmentId", "DepartmentName");
return View();
}
// Data Parsing through Json
public JsonResult GetStudentList()
{
List<StudentViewModel> StuList = db.tbl_Student.Where(x => x.IsDeleted == false).Select(x => new StudentViewModel
{
StudentId = x.StudentId,
StudentName = x.StudentName,
Email = x.Email,
DepartmentName = x.tbl_department.DepartmentName
}
).ToList();
return Json(StuList,JsonRequestBehavior.AllowGet);
}
INDEX VIEW CODE:
@model Crud_app_with_ajax.Models.StudentViewModel
@{
ViewBag.Title = "Home Page";
}
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin:3px">
<a href="#" class="btn btn-default" onclick="AddNewStundent(0)">ADD NEW STUDENT</a><br /> <br />
<table class="table table-striped">
<thead>
<tr>
<th>STUDENT ID</th>
<th>STUDENT NAME</th>
<th>STUDENT EMAIL</th>
<th>DEPARTMENT NAME </th>
<th>ACTION (EDIT)</th>
<th>ACTION (DELETE)</th>
</tr>
</thead>
<tbody id="SetStudentList">
<tr id="LoadingStatus" style="color:red"></tr>
</tbody>
</table>
</div>
<script>
$("#LoadingStatus").html("Loading........");
$.get("/Home/GetStudentList", null, DataBind);
function DataBind(StudentList) {
var SetData = $("#SetStudentList");
for (var i = 0; i < StudentList.length; i++) {
var Data = "<tr class='row_" + StudentList[i].StudentId + "'>" +
"<td>" + StudentList[i].StudentId + "</td>" +
"<td>" + StudentList[i].StudentName + "</td>" +
"<td>" + StudentList[i].Email + "</td>" +
"<td>" + StudentList[i].DepartmentName + "</td>" +
"<td>" + "<a href='#' class='btn btn-warning' onclick='EditStudentRecord(" + StudentList[i].StudentId + ")' > <span class='glyphicon glyphicon-edit'> </span> </a>" + "</td>" +
"<td>" + "<a href='#' class='btn btn-danger' onclick='DeleteStudentRecord(" + StudentList[i].StudentId + ")' > <span class='glyphicon glyphicon-trash'> </span> </a>" + "</td>" +
"</tr>";
SetData.append(Data);
$("#LoadingStatus").html("");
}
}
</script>
Comments
Post a Comment