CRUD Operation In MVC Using Jquery Ajax Retrieve Database Data & Show In A View(ASP.Net MVC)

ASP. NET MVC

1.CRUD Operation In MVC Using Jquery Ajax Retrieve Database Data & Show In A View(ASP.Net MVC)

Step 1:   First Create a DataBase Name 

    

         CREATE DATABASE MVC_DataBase;

Step 2: Use Database 

               use MVC_DataBase

Step 3: Create Table in DataBase

create table tblDepartment

(

 DepartmentId int identity (1,1) primary key,

 DepartmentName  nvarchar(50)

)

Step 4: Create  Another Table in DataBase

Hints: Create a student Table with  foreign key DepartmentId

create table tblStudent

(

StudentId  int identity(100,1) primary key,

StudentName varchar(50),

Email nvarchar(50),

IsDeleted bit,

DepartmentId int foreign key references tblDepartment(DepartmentId)

)

Step 5: Select  Department

Select * from tblDepartment

Step 6:

Step 7: Click On Visual Studio Create A New Project

Step 8: Connect Your Database Using Entity Framework.

 

Step 9: Create A New Model Class (StudentViewModel)

Model Name:  StudentViewModel

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace CRUDE_OPERATION.Models

{

    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; }

    }

}

Step 10: Home Controller

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using CRUDE_OPERATION.Models;

namespace CRUDE_OPERATION.Controllers

{

    public class HomeController : Controller

    {

        MVC_DataBaseEntities db = new MVC_DataBaseEntities();

        public ActionResult Index()

        {

            

            return View();

             

        }

       // Pass The All Student Record From Controller To View For Show The All Data For User

        

     public JsonResult GetStudentList()

        {

            //Pass The All Student Record From Controller To View For Show The All Data For User

            

List<StudentViewModel> StuList = db.tblStudents.Where(x => x.IsDeleted == false).Select(x => new StudentViewModel

            {

                StudentId = x.StudentId,

                StudentName = x.StudentName,

                Email = x.Email,

                DepartmentName = x.tblDepartment.DepartmentName

            }).ToList();

            return Json(StuList, JsonRequestBehavior.AllowGet);

        }

    }

}

Step 11: Add A View And Write Down The Below Code In Your View

@model CRUDE_OPERATION.Models.StudentViewModel

@{

    Layout = null;

}

<script src="~/Scripts/jquery-3.4.1.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/bootstrap.js"></script>

<div class="container" style="margin-top:3%">

    <a href="#" class="btn btn-info" onclick="AddNewStudent(0)">Add New Student</a> <br /><br />

    <table class="table table-striped">

        <thead>

            <tr>

                <th>Student ID</th>

                <th>Student Name</th>

                <th>Email</th>

                <th>Department</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) {

        //This Code For Receive All Data From Controller And Show It In Client Side

        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>

  

 Create A Popup Modal With Registration Form For Add Or Edit Student Record