CRUD Operation In jTable Using MVC

Sourabh Somani
Aug 10, 2017
35.5k
0
13
Article

Introduction

In this article you will find how can you perform CRUD Operation in jTable using MVC.

jTable Introduction

According to jtable.org, jTable is a jQuery Plugin that is used to create AJAX based CRUD tables without coding HTML or JavaScript. jTable is really an awesome plugin for AJAX based CRUD operations.

Features of jTable

Automatically creates table and fill the data into the table using AJAX.
Creates dialog forms for Create, Edit and Delete Operation.
Animation for Create, Edit, Delete.
Supports Paging, Sorting, etc.
Allow users to selection of Rows and Columns.
Allow users to resize Columns.
Styling of Table.
Show and hide Column.
Supports Localization and many more.

Let's perform CRUD operation step by step using MVC.

Step 1: First of all create an MVC project by performing the following steps.

Open Visual Studio.
Click on File, New, Project or press CTRL + SHIFT + N,
Then one DilalogBox will open for new project, go to Installed, Templates, Visual C#, then Web and select ASP .NET Web Application and give the name to the project (like jTableMVC) and click on OK button.
After clicking on OK button one more dialog box will be open from that dialog box select MVC as a project template. Select Authentication to Individual User Accounts and then press OK.

Step 2: After creating project your complete project file will be as follows in the Solution Explorer.

Step 3: Now add a folder for entities. To add the folder to your project here here are the steps,

Right click on the Project, Add, then New Folder.
Give the name of the folder Entities.

Step 4: Now add a class inside this folder. I am adding with name Marks.CS. To add the class Marks.CS in your project follow the below steps.

Right Click on the Entities Folder.
Select Add, New, then Class.
Now select Class and give the name of the class as Marks.CS and click on Add button.

Step 5: Now write the following code for Marks.CS,

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace jTableMVC.Entities
{
public class Marks
{
[Key]
public string ID { get; set; }
[Required]
public int RollNumber { get; set; }
[Required]
public string Name { get; set; }
[Required]
public string MarksObtained { get; set; }
[Required]
public string TotalMarks { get; set; }
}
}

Step 6: Now build the project once and go to Models Folder, where you will get "IdentityModels.cs". Open "IdentityModels.cs", and bind Marks.cs to our Model for creating table. Write the following property to ApplicationDbContext class.

IdentityModel.cs

using jTableMVC.Entities;
using Microsoft.AspNet.Identity.EntityFramework;
using System.Data.Entity;
namespace jTableMVC.Models
{
// You can add profile data for the user by adding more properties to your ApplicationUser class, please visit http://go.microsoft.com/fwlink/?LinkID=317594 to learn more.
public class ApplicationUser : IdentityUser
{
}
public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
public ApplicationDbContext()
: base("DefaultConnection")
{
}
public DbSet<Marks> Marks { get; set; }
}
}

Step 7: Now open package manager console and generate database using the following steps.

Open Package Manager Console.
Type the following command in Package Manager Console.
1. PM> Enable-Migrations
Now one folder will be generated with name "Migrations" and there will be file that will be generated with name "Configuration.cs".
Open "Configuration.cs" and set AutomaticMigrationsEnabled value to true.
Again Open Package Manager Console and type the following command to generate the database.
1. PM> update-database
After firing this command you can open server explorer and there you can see your generated database. Here's the screenshot,

Step 8: Now add Empty MarksController to your project. To Add MarksController you can follow the below steps,

Right Click on Controllers Folder.
Click Add, then Controller
Now one dialog box will open for Add Scaffolding. Select MVC Controller - Empty.
Now give the name to the Controller as MarksController.

Step 9: Now create some Action methods for CRUD operation in Marks Controller.

Index Action:
1. public ActionResult Index()
2. {
3. return View();
4. }
GetStudentMarks Action:
1. public JsonResult GetStudentMarks()
2. {
3. ApplicationDbContext db = new ApplicationDbContext();
4. try
5. {
6. List<Marks> lstMarks = new List<Marks>();
7. lstMarks = db.Marks.ToList();
8. return Json(new { Result = "OK", Records = lstMarks }, JsonRequestBehavior.AllowGet);
9. }
10. catch (Exception ex)
11. {
12. return Json(new { Result = "ERROR", Message = ex.Message });
13. }
14. }
Create Action:
1. [HttpPost]
2. public JsonResult Create(Marks Model)
3. {
4. ApplicationDbContext db = new ApplicationDbContext();
5. try
6. {
7. Model.ID = Guid.NewGuid().ToString();
8. db.Marks.Add(Model);
9. db.SaveChanges();
10. return Json(new { Result = "OK", Record = Model }, JsonRequestBehavior.AllowGet);
11. }
12. catch(Exception ex)
13. {
14. return Json(new { Result = "ERROR", Message = ex.Message });
15. }
16. }
Edit Action:
1. [HttpPost]
2. public JsonResult Edit(Marks Model)
3. {
4. ApplicationDbContext db = new ApplicationDbContext();
5. try
6. {
7. db.Entry(Model).State = EntityState.Modified;
8. db.SaveChanges();
9. return Json(new { Result = "OK" }, JsonRequestBehavior.AllowGet);
10. }
11. catch (Exception ex)
12. {
13. return Json(new { Result = "ERROR", Message = ex.Message });
14. }
15. }
Delete Action:
1. [HttpPost]
2. public JsonResult Delete(String ID)
3. {
4. ApplicationDbContext db = new ApplicationDbContext();
5. try
6. {
7. Marks marks = db.Marks.Find(ID);
8. db.Marks.Remove(marks);
9. db.SaveChanges();
10. return Json(new { Result = "OK" }, JsonRequestBehavior.AllowGet);
11. }
12. catch (Exception ex)
13. {
14. return Json(new { Result = "ERROR", Message = ex.Message });
15. }
16. }

Step 10: Add View for Index action. You can add View for Index Action using the following steps:

Right Click on Index View.
Click on Add View Option.
Now one Add view DialogBox will be open. Give View name "Index", Select Template Empty (without model) and then click on Add Button.

Step 11: Now Install jTable from NuGet Package Manager by following the steps:

Right click on References and click on Manage Nuget Packages.
Search for jTable.
Install jTable
After Installing you can see jTable folder will be created under Scripts folder.

Step 12: Now add one Java Script File in Scripts folder with name Script.js. Steps to add Java Script file under Scripts folder is as in the following:

Right click on Scripts folder.
Select Add.
Select JavaScript File.
Give the Name of File Script.js

Step 13: After Installing jTable write the following code to index.cshtml of Marks folder.

@{
ViewBag.Title = "Marks Details";
}
<h2>Marks Details</h2>
<div id="MarksTable"></div>
@section scripts{
<link href="~/Scripts/jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" />
@*<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />*@
<link href="http://jtable.org/Content/themes/metroblue/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-ui-1.9.2.min.js"></script>
<script src="~/Scripts/jtable/jquery.jtable.min.js"></script>
<script src="~/Scripts/Script.js"></script>
}