CRUD Operation In jTable Using MVC

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.

1. Open Visual Studio.
2. Click on File, New, Project or press CTRL + SHIFT + N,
   
   
   
   
3. 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.
   
   
   
   
4. 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, 

1. Right click on the Project, Add, then New Folder.
   
   
   
   
2. 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. 

1. Right Click on the Entities Folder.
2. Select Add, New, then Class.
   
   
   
   
3. 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.

1. Open Package Manager Console.
   
   
   
   
2. Type the following command in Package Manager Console.
   

   PM> Enable-Migrations

3. Now one folder will be generated with name "Migrations" and there will be file that will be generated with name "Configuration.cs". 
4. Open "Configuration.cs" and set AutomaticMigrationsEnabled value to true.
5. Again Open Package Manager Console and type the  following command to generate the database.
   

   PM> update-database

6. 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,

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

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

1. Index Action:
   

   public ActionResult Index()
   {
        return View();
   }

2. GetStudentMarks Action:
   

   public JsonResult GetStudentMarks()
   {
       ApplicationDbContext db = new ApplicationDbContext();
       try
       {
           List<Marks> lstMarks = new List<Marks>();
           lstMarks = db.Marks.ToList();
           return Json(new { Result = "OK", Records = lstMarks }, JsonRequestBehavior.AllowGet);
       }
       catch (Exception ex)
       {
           return Json(new { Result = "ERROR", Message = ex.Message });
       }
   }

3. Create Action:
   

   [HttpPost]
   public JsonResult Create(Marks Model)
   {
       ApplicationDbContext db = new ApplicationDbContext();
       try
       {
           Model.ID = Guid.NewGuid().ToString();
           db.Marks.Add(Model);
           db.SaveChanges();
           return Json(new { Result = "OK", Record = Model }, JsonRequestBehavior.AllowGet);
       }
       catch(Exception ex)
       {
           return Json(new { Result = "ERROR", Message = ex.Message });
       }
   }

4. Edit Action:
   

   [HttpPost]
   public JsonResult Edit(Marks Model)
   {
       ApplicationDbContext db = new ApplicationDbContext();
       try
       {
           db.Entry(Model).State = EntityState.Modified;
           db.SaveChanges();
           return Json(new { Result = "OK" }, JsonRequestBehavior.AllowGet);
       }
       catch (Exception ex)
       {
           return Json(new { Result = "ERROR", Message = ex.Message });
       }
   }

5. Delete Action:
   

   [HttpPost]
   public JsonResult Delete(String ID)
   {
       ApplicationDbContext db = new ApplicationDbContext();
       try
       {
           Marks marks = db.Marks.Find(ID);
           db.Marks.Remove(marks);
           db.SaveChanges();
           return Json(new { Result = "OK" }, JsonRequestBehavior.AllowGet);
       }
       catch (Exception ex)
       {
           return Json(new { Result = "ERROR", Message = ex.Message });
       }
   }

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

1. Right Click on Index View.
2. Click on Add View Option.
   
   
   
   
3. 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:

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

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:

1. Right click on Scripts folder.
2. Select Add.
3. Select JavaScript File.
4. 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{
    <!--Adding Theme for jTable Grid-->
    <!--You can choose any type of theme from the themes folder-->
    <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>

    <!--Adding jTable Plugin-->
    <script src="~/Scripts/jtable/jquery.jtable.min.js"></script>

    <!--Adding our script file-->
    <script src="~/Scripts/Script.js"></script>
}

Step 14: Open Script.js file which we have created in Step 12 and write the following code inside that file:

$(document).ready(function () {
    $('#MarksTable').jtable({
        title: 'Marks Detail',
        actions: {
            listAction: '/Marks/GetStudentMarks',
            createAction: '/Marks/Create',
            updateAction: '/Marks/Edit',
            deleteAction: '/Marks/Delete'
        },
        fields: {
            ID: {
                key: true,
                list: false
            },
            RollNumber: {
                title: 'Roll Number',
                width: '15%'
            },
            Name: {
                title: 'Student Name',
                width: '45%'
            },
            MarksObtained: {
                title: 'Marks Obtained',
                width: '15%',
            },
            TotalMarks: {
                title: 'Total Marks',
                width: '15%',
            }
        }
    });
    $('#MarksTable').jtable('reload');
});

Step 15: Now run the project by pressing F5 Key. You will get output as in the following:

• Initial output when no data will be in the database
  

• Add New Record

 

• Edit Record 
  
  

• Deleting a Record
  

• List of Records 

 

Download complete source code of this project

Read more articles on ASP.NET: 

• Performing CRUD Operations Using jqGrid In ASP.NET MVC
• Simple Login Application using Sessions in ASP.NET MVC