In this article, I’ll describe, how to perform basic CRUD in Kendo grid, using ASP.NET.MVC and Entity Framework. The Application is developed basically, using Entity Framework database first approach and MVC.
Basic Knowledge in ASP.NET MVC, Entity Framework and Kendo UI framework.
Open SSMS with new query Window, create a new database and a table for the demo purpose. Here, the script to create a database and table is given below:
- INSERT INTO Employee VALUES('Bob','Ross')
- INSERT INTO Employee VALUES('Pradeep','Raj')
- INSERT INTO Employee VALUES('Arun','Kumar')
- INSERT INTO Employee VALUES('Vasanth','Kumar')
The table design is given below:
Create a new ASP.NET MVC application
Create a new empty ASP.NET MVC Application, as per the following figures. Open Visual Studio ->File ->New project ->ASP.NET Web Application.
Please refer to my previous
article to check out, how to configure Kendo UI in ASP.NET MVC Application.
Generate the Model
Now, we will create Entity Framework models from the database tables.
Step 1: Right-click the Models folder, select Add and New Item.
Step 2: In the Add New Item Window, select data in the left pane and ADO.NET Entity Data Model from the center pane. Name the new model file Employee and Ccick Add.
Step 3: In the Entity Data Model Wizard, select EF Designer from the database and click Next.
Step 4: Click the New Connection button.
Step 5: In the Connection Properties Window, provide the name of the local Server, where the database was created (in this case (DESKTOP-585QGBN)). After providing the Server name, select the Employee from the available databases and click OK.
Step 6: You can use the default name for the connection to save in the Web.Config file and click Next.
Step 7: Select Table to generate models for Employee table and click Finish.
Create a Controller
Create a new empty controller. Right-click the Controllers folder and select Add –> New Empty Controller. In my case, I named it as EmployeeCRUD Controller
Write the code, given below, in the controller:
EmployeeCRUDController.cs
- private EmployeeEntities db = new EmployeeEntities();
-
-
-
-
- public ActionResult GetAllEmployee([DataSourceRequest]DataSourceRequest request)
- {
- try {
-
- var employee = db.Employees.ToList();
-
- return Json(employee.ToDataSourceResult(request));
- }
- catch(Exception ex)
- {
- return Json(ex.Message);
- }
-
- }
-
-
-
- public ActionResult UpdateEmployee([DataSourceRequest]DataSourceRequest request, Employee emp)
- {
- try
- {
- if (ModelState.IsValid)
- {
- db.Entry(emp).State = EntityState.Modified;
- db.SaveChanges();
- return Json(new[] { emp}.ToDataSourceResult(request,ModelState));
-
- }
- else
- {
- return Json(db.Employees.ToList());
- }
- }
- catch(Exception ex)
- {
- return Json(ex.Message);
- }
- }
-
-
-
- public ActionResult AddEmployee([DataSourceRequest]DataSourceRequest request, Employee emp)
- {
- try {
- if (ModelState.IsValid)
- {
-
- db.Employees.Add(emp);
- db.SaveChanges();
- var _emplist = db.Employees.ToList();
- return Json(new[] { emp}.ToDataSourceResult(request,ModelState));
- }
-
- else
- {
- return Json(db.Employees.ToList());
- }
- }
- catch(Exception ex)
- {
- return Json(ex.Message);
- }
- }
-
-
-
- public ActionResult DeleteEmployee([DataSourceRequest]DataSourceRequest request,Employee emp)
- {
- try
- {
- Employee employee = db.Employees.Find(emp.EmployeeID);
- if (employee == null)
- {
- return Json("Employee Not Found");
- }
-
- db.Employees.Remove(employee);
- db.SaveChanges();
- return Json(db.Employees.ToList());
- }
- catch(Exception ex)
- {
- return Json(ex.Message);
- }
- }
- }
Create a View
Create a new empty controller, Right-click the EmployeeCRUD folder under View Folder, and select Add –>New Empty View. In my case, I named it as Index.cshtml.
Write the following code in Index.cshtml,
- @model KendoMvcApp.Models.Employee
-
- @{
- ViewBag.Title = "EmployeeCRUD";
-
- }
-
- <h2>EmployeeCRUD</h2>
-
- <div class="container">
- <div class="row">
-
- @(Html.Kendo().Grid<KendoMvcApp.Models.Employee>()
- .Name("EmpGrid")
- .Selectable()
- .Columns(columns =>
- {
- // columns.Bound(c => c.EmployeeID);
- columns.Bound(c => c.FirstName);
- columns.Bound(c => c.LastName);
- columns.Command(command =>
- {
- command.Edit();
- command.Destroy();
- }).Width(200);
-
- })
- .DataSource(dataSource => dataSource
- .Ajax()
- .Model(model=>
- {
- model.Id(emp => emp.EmployeeID);
- model.Field(emp => emp.EmployeeID).Editable(false);
- }
- )
- .Read(read => read.Action("GetAllEmployee", "EmployeesCRUD"))
- .Update(update=>update.Action("UpdateEmployee", "EmployeesCRUD"))
- .Create(create=>create.Action("AddEmployee","EmployeesCRUD"))
- .Destroy(destroy=>destroy.Action("DeleteEmployee","EmployeesCRUD"))
-
- )
- .ToolBar(toolbar => toolbar.Create())
-
- // Set grid editable.
- .Editable(editable => editable.Mode(GridEditMode.InLine))
-
- // Set grid sortable.
- .Sortable()
-
- // Set grid selectable.
- .Selectable()
-
- // Set grid pagable.
- .Pageable(pageable =>
- {
- pageable.Refresh(true);
- pageable.PageSizes(true);
- })
- )
- </div>
- </div>
Result
Run the project, go to EmployeesCRUD Controller and EmployeeCRUD Index View (ex: http://localhost/EmployeesCRUD/Index).
GET/READ
ADD/CREATE
Click Add new record button in toolbar of grid to add a new record in inline edit mode.