In this article, we will discuss CRUD (Create, Read, Update, Delete) Operations functionality In jTable Using MVC and entity framework. I will use visual studio 2012 framework and SQL server 2008 R2 for this demo.
So, before opening visual studio let's create and populate student table using following script.
1 2 3 4 5 6 7 8 | Create table student ( StudentId varchar(50), RollNo varchar(50), FullName varchar(50), Gender varchar(10), City varchar(50), ) |
1 2 3 4 5 6 | Insert into student values('016a7375-6da4-471b-9182-e1a122828d9e',1,'Sara','Female','Chennai') Insert into student values('048e49c9-8cb0-4b18-8afe-9c2f89e0ddf1',2,'David','Male','Sydeny') Insert into student values('04e4d633-f0af-4269-be06-1b4a5588ae0d',3,'Dora','Female','New York') Insert into student values('071e0c85-50eb-4283-8d7f-1b055990a944',4,'Maya','Female','London') Insert into student values('0c868ccb-382d-4349-a338-97210a17d254',5,'Vikram', 'Male','Mumbai') Insert into student values('17f95a81-934d-43fd-b780-4afd8509d8e0',6,'Nikhil','Male','Delhi') |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations.Schema; using System.Linq; using System.Web; namespace JtableDemo.Entities { [Table("student")] public class Student { public string StudentId { get; set; } public string RollNo { get; set; } public string FullName { get; set; } public string Gender { get; set; } public string City { get; set; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Web; using JtableDemo.Entities; namespace JtableDemo.Models { public class StudentContext : DbContext { public DbSet<Student> Students { get; set; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | using JtableDemo.Entities; using JtableDemo.Models; using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Web; using System.Web.Mvc; namespace JtableDemo.Controllers { public class StudentController : Controller { // // GET: /Student/ public ActionResult Index() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | public JsonResult GetStudentDetails() { StudentContext db = new StudentContext(); try { List<Student> students = new List<Student>(); students = db.Students.ToList(); return Json(new { Result = "OK", Records = students }, JsonRequestBehavior.AllowGet); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | [HttpPost] public JsonResult Create(Student Model) { StudentContext db = new StudentContext(); try { Model.StudentId = Guid.NewGuid().ToString(); db.Students.Add(Model); db.SaveChanges(); return Json(new { Result = "OK", Records = Model }, JsonRequestBehavior.AllowGet); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | [HttpPost] public JsonResult Edit(Student Model) { StudentContext db = new StudentContext(); 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 }); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | [HttpPost] public JsonResult Delete(String StudentID) { StudentContext db = new StudentContext(); try { Student students = db.Students.Find(StudentID); db.Students.Remove(students); db.SaveChanges(); return Json(new { Result = "OK" }, JsonRequestBehavior.AllowGet); } catch (Exception ex) { return Json(new { Result = "ERROR", Message = ex.Message }); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | @{ ViewBag.Title = "Student Details"; } <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h2>Student Details</h2> <div id="StudentsTable"></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> } <script type="text/javascript"> $(document).ready(function () { $('#StudentsTable').jtable({ title: 'Students Detail', actions: { listAction: '/Student/GetStudentDetails', createAction: '/Student/Create', updateAction: '/Student/Edit', deleteAction: '/Student/Delete' }, fields: { StudentId: { key: true, list: false }, RollNo: { title: 'Roll Number', width: '15%' }, FullName: { title: 'Student Name', width: '45%' }, Gender: { title: 'Gender', width: '15%', }, City: { title: 'City', width: '15%', } } }); $('#StudentsTable').jtable('reload'); }); </script> |
1 2 3 | <connectionStrings> <add name="StudentContext" connectionString="data source=.;initial catalog=Sample;integrated security=True" providerName="System.Data.SqlClient" /> </connectionStrings> |
01 January 20190 4826 Written By: Rohit Mhatre
© 2020 Tech Study. All rights reserved | Developed by Tech Study| Privacy Policy | Sitemap