Overview

          TodoList is a simple web application to create, store and modify Todo tasks to be maintained
by the users, which comprises of following fields to the user (Task Name, Task Description, Severity,
Target Date, Task Status). 

          TodoList web application is created using MVC - 4 architecture, code-first Entity Framework
(ORM) and Jqgrid for displaying the data.

 
I am dividing this topic in to 2 sections.
 Section 1: contains basic theoretical details of the technologies that we are used and the advantages
of using ASP.net MVC-4, Code first Entity Framework and JQgrid technologies.

Section 2: contains the practical implementation of step by step creating a simple TodoList
application using ASP.net MVC-4, Code first Entity Framework and JQgrid.

Section 3:  JQGrid and MVC Demo with Custom Filters or Search

Functionality:

http://www.codeproject.com/Tips/825724/Section-JQGrid-and-MVC-Demo-with-Custom-Filters-or

---------------------------------------------------------------------------------------------------------------
--------------

Section 1:

MVC

 MVC is a pattern for developing applications that are well architected and easy to maintain.
So using MVC we can develop testable, flexible, scalable, extensible standard based applications.
 MVC is not a replacement of Asp.net web forms based development. This sits on top of Asp.
net development. MVC framework is defined in "System.Web.MVC.Assembly".
 MVC works on Conventions over configurations.

Model

 Model represents the application data domain. It can contain a logic related to data
domain.In short the application business logic is contained with in the model.
 Model contains a pieces of C# classes with set of properties and validations defined on top
of it using data annotations. It can also contain data access, data aggregation logic etc.
 Model can be entities or business logic.

View

 View represents the presentation layer of the web applications.

 View manages the display of information based on the data of the model i.e. requested by
the controller.
 View Represents the User interface, with which the end user interacts. In short all the UI
related logic is contain the View.

Controller
 Controller handles the user interaction with the web application.
 User requests comes through the controller to model and manipulates the records from it
and render the data using view to UI.
 Controller contains the control flow logic.
 Controller contains the set of action methods.

Why MVC or Advantages of Using MVC

There are many advantages of using MVC as follows: -

 MVC helps us to develop loosely coupled architecture.
 Complex applications can be easily managed.
 Separations of concerns is possible by dividing the application in to Model,View and
Controller.
 Extensive support for Test Driven Development(TDD). Unit testing will be easy, an additional
layer of testing will provide yet another layer of defense against unexpected behavior.
 Asp. net MVC is light weight as they do not use view state.
 SEO(Search Engine Optimization) Clean Url's and no extension methods are used for locating
the physical files.
 Rich javascript support with UnObstrusive javascript, Jquery Validation with Json binding.
 No Post back events.
 Expressive views including the new Razor view engine and HTML - 5 enabled.

Entity Framework

       The Microsoft ADO.Net Entity Framework is an Object Relational Mapping (ORM) framework
that enables developers to work with relational data as a domain specific object, eliminating the use
of most of the data access plumbing code that developers usually need to write.

Code First Approach

      Code First is mainly used in Domain Driven Design(DDD) approach. We can focus on the domain
design and start writing the classes as per the domain requirement rather than design the database
first and then you create the classes that matches your database design. Code first API's will create
the database on the fly based on your entity classes and configuration.

Why Entity Framework?

Basically in the real world scenarios there are 2 types of groups or models will be present like Logical
Data Model and Object Oriented Domain Model

Logical Data Model

Almost any business application today as to speak to a relational database. These relational database
can also say it has a Backend SQLSERVER contains all the Stored Procedures, tables with foreign key,
view etc. Which will be handled by 1 group of people called as database centric.
 Object Oriented Domain Model 

Applications are developed completely different from the logical data model. These Object Oriented
Domain Model deals with objects, behaviors, properties, inheritance, polymorphic etc. Which will be
handled by 1 group of people called as application centric.

Impedence Mismatch

As a result of above 2 models impedance mismatch occurs, as the developers devote a lot of time
and energy writing code to translate between how the database likes to see the data and how the
application likes to see the data.
 
So Ado .net Entity Framework seeks to remedy to problem by providing the layer of
abstraction between the logical data model and the application domain model.

Advantages of using Entity Framework

 Entity framework enables developers to create data access application by programming

against conceptual application model instead of programming against relational storage schema.
 Application can work in terms of more application centric conceptual model including types
with inheritance, complex members and relationships.
 Entity framework is an ORM tool that provide simple API to perform CRUD operations. IT
helps us to automatically work on DML and DDL operations from the front end, instead of going and
doing it manually from the back end.
 Entity framework provides strongly typed classes, giving intellisense support, compile time
and debugger options.
 Plumbing and mapping is done for you. So developers need not to write most of the data
access plumbing code that normally required(e.g.ADO.net)
 Lot of time will be saved and it helps us to quickly develops the application and concentrate
more on business centric details.

JQGRID

Jqgrid is an ajax enabled javascript control that provides solution for representing and manipulation
tabular data on the grid. Since grid is a client side solution loading data dynamically through ajax call
backs, it can be integrated with any server side technology, including php, ASP java servelets, JSP and
perl.
 
JQGrid uses Jquery javascript library.

Requirements

 JQGrid plugin
 Jquery library, version 1.1.4 or above.
 web browser
 data can be stored in xml, json
 a web server (IIS, Apche, Tomcat)
a db backend (SQL Server, Oracle MSSql )
a server side scripting language( PHP, ASP)
JQGrid is a component that helps you in an easy way to represent database information on the client
side using a server side technology. Moreover that helps you to manipulate data back in to database.

Features of JQGrid

 JQGrid helps us to develop most browser compatibility web pages and also supports cross
browser support functionality.
 CSS based themes. Developers can change the grid skin by defining their own UI CSS
framework.
 The new rendering engine is 5-10 times faster loading speed then the previous.
 Pagination functionality is present. So no need to retrieve all the data from the server.
 Sorting, Various data types and sub grid support functionality.
 Event handlers and User API.
 Formatter supports advanced formating of the contents of the cell in the required format in
the client side itself.
 Inline Editing: easy to update the cell content in a particular row.
 Searching and filtering.
 Import and Export data.
 
Section 2:
Creating simple TodoList application using
MVC-4, Code-first Entity Framework and
Jqgrid.

 Create a new MVC 4 Web application.

 Give the Name of the application and click on OK.
  
 Select a required template and the view engine.
  

 Open a layout page present inViews ->Shared ->_Layout.cs page and add a new Action Link
for TODOLIST tab.
Hide   Copy Code
<li>@Html.ActionLink("TodoList", "Index", "TodoList")</li>

 This action link is for TodoList tab in the menu.

Hide   Shrink     Copy Code
<!DOCTYPE html>
 <html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - Todo List Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("TodoList", "Index", "TodoList")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>

 Goto tools -> Library Package Manager -> Package Manger Console.
 Install entity framework - 5 in package manager console.
  
 Right Click on References and click on Manage Nuget.
 Search for Jqgrid and select JQueryJQGrid and install it.
  
 Add a TodoList class file in the Model for storing entities.
  
 Open -> "TodoList.cs" and add the required Entities to the TodoList model class.
 Todo List contailns all the properties that are used in the screen.
Hide   Copy Code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TodoListDemoApplication.Models
{
public class TodoList
{
public int Id { get; set; }
public string TaskName { get; set; }
public string TaskDescription { get; set; }
public DateTime TargetDate { get; set; }
 public string Severity { get; set; }
public string TaskStatus { get; set; }
}
}

 Add a DBContext folder to the solution and add a "TodoContext cs" class.

 Created TodoContext acts like a bridge or acts like a connection object between database
and the LinqObject which will be similar to Ado.net connection object.
 Add a DbseDbSet represents the tables which will be present in the database.
 Hide   Copy Code
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using TodoListDemoApplication.Models;

namespace TodoListDemoApplication.DBContext
{
public class TodoContext:DbContext
{
public DbSet<TodoList> TodoLists { get; set; }
}

 Modify the Connection String in the web.config file and the name will be Context Name
(TodoContext) which we have created it.
 Also give the proper conncetion string details like data source, Initial catalog and provider
name etc.
Hide   Copy Code
<connectionStrings>
<add name="TodoContext"
connectionString="Data Source=(Local);Initial Catalog=TodoListDemo;Integrated
Security=SSPI;"
providerName="System.Data.SqlClient" />
</connectionStrings>

 Goto Package Manager Console.

 Enable the migrations for using Code First Code Migrations approach by exceuting
command "EnableMigrations -ContextTypeName ContextName".
 Code-First Migrations will take care of the data while during schema modifications. So we no
need to write the "dropcreate database" methods that was required to be handled by the
developers in earlier old version of Entity frame work.

 Once after enabling the migrations for the particular context that we are using, next step is to
Add Migration.
 Execute "Add-Migration" command in package mangaer console. This will generate
Migration file, sql code and this will not be executed in SQL Server unless and untill we run "update-
database" command.

 Code Migration File Generated.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 "update-database" command will seed the database by running the code which is present
in the code migration file.

 
 Open the Sql Server and check the database and the table which got automatically
generated using code migration Entity framework approach.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 
 Add a Todolist Controller.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Add a view to index action method.
  

 View has been added.

  

--------------Source Code of Index View

@{
ViewBag.Title = "Index";
}
<style>
.ui-jqgrid .ui-userdata {
height: auto;
}

.ui-jqgrid .ui-userdata div {

margin: .1em .5em .2em;
}

.ui-jqgrid .ui-userdata div > * {

vertical-align: middle;
}
</style>
 <div>
<table id="grid"></table>
<div id="pager"></div>
</div>

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />

<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.js"></script>

<script src="~/Scripts/i18n/grid.locale-en.js"></script>

<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/TodoList.js"></script>

 Add a TodoList javascript file.

  
 "GetTodoLists" is a action method that will render the list of all the Todo list to the JQGrid
with sorting and paging implemented in the action method.
  
---------Source code of Controller "GetTodoList() action method
TodoContext db = new TodoContext();
public JsonResult GetTodoList(string sidx, string sord, int page, int rows)
{
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
var todoListResults = db.TodoLists.Select(
a => new
{
a.Id,a.Severity,a.TaskDescription,a.TaskName,a.TaskStatus
,a.TargetDate
}
) ;
int totalRecords = todoListResults.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
if(sord.ToUpper()=="DESC")
{
todoListResults = todoListResults.OrderByDescending(s => s.TaskName);
 todoListResults = todoListResults.Skip(pageIndex *
pageSize).Take(pageSize);
}
else
{
todoListResults = todoListResults.OrderBy(s => s.TaskName);
todoListResults = todoListResults.Skip(pageIndex *
pageSize).Take(pageSize);
}
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows =todoListResults

};
return Json(jsonData, JsonRequestBehavior.AllowGet);

 JQGrid functionality code is added in a TodoList.js file which will be placed inside the Jquery
ready function
  
 Few important JQGrid property details that normally used with explanation.
  
 Add the required Jquery, Jqgrid script reference in the index page in the following order.

 
 
 
 
 
 
 
 
 
 
  
 
 
 
 
 
 
 
 Remove the jquery reference in the layout file to avoid the conflict.

 
 Run the application, we will should be able to see the Jqgrid.
 Next step is to implement CRUD functionality in JQGrid.
  
 Add navGrid functionality with CRUD operations implemented in JQGrid present in
"TodoList.Js" file.
----------------------------source code of TodoList.js
$(function () {

debugger;
$("#grid").jqGrid({
url: "/TodoList/GetTodoList",
datatype: 'json',
mtype: 'Get',
//table header name
colNames: ['Id', 'Task Name', 'Task Description', 'Target Date', 'Severity','Task
Status'],
//colModel takes the data from controller and binds to grid
colModel: [
{ key: true, hidden: true, name: 'Id', index: 'Id', editable: true },
{ key: false, name: 'TaskName', index: 'TaskName', editable: true },
{ key: false, name: 'TaskDescription', index: 'TaskDescription', editable:
true },
{ key: false, name: 'TargetDate', index: 'TargetDate', editable: true,
formatter: 'date', formatoptions: { newformat: 'd/m/Y' } },
{ key: false, name: 'Severity', index: 'Severity', editable: true, edittype:
'select', editoptions: { value: {'L':'Low','M':'Medium','H':'High'}} },
{ key: false, name: 'TaskStatus', index: 'TaskStatus', editable: true,
edittype: 'select', editoptions: { value: { 'A': 'Active', 'I': 'InActive' } } }],

pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Jq grid sample Application',
emptyrecords: 'No records to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: true,
multiselect: true
//pager-you have to choose here what icons should appear at the bottom
//like edit,create,delete icons
}).navGrid('#pager', { search:true,edit: true, add: true, del: true, search: false,
refresh: true,searchtext:"Search" },
{
// edit options
zIndex: 100,
url: '/TodoList/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
 }
},
{
// add options
zIndex: 100,
url: "/TodoList/Create",
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
// delete options
zIndex: 100,
url: "/TodoList/Delete",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this task?",
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
});
jQuery("#grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false,
searchOperators: true, defaultSearch: "cn" });
});

 
 Create is a HTTP Post  action method in TodoList Controller for creating the Todo List.
 Entity framework is been used for inserting in to the database avoiding the use of ado.net
mechanism.
 Internally Entity frame Work will generate the query and run in the database only after
SaveChanges method is been called.
 "ModelState.IsValid" is used to validate the model. "ModelState.IsValid" will return true if all the
model validations are satisfied in the server-side, else returns false and will not allow to execute the
further code.
 ---------------------plain Source code of above image is
// TODO:insert a new row to the grid logic here
[HttpPost]
public string Create([Bind(Exclude = "Id")] TodoList obj)
{
string msg;
try
{
if (ModelState.IsValid)
{
db.TodoLists.Add(obj);
db.SaveChanges();
msg = "Saved Successfully";
}
else
{
msg = "Validation data not successfull";
}
}
catch (Exception ex)
{
msg = "Error occured:" + ex.Message;
}
return msg;
 }

1.
2. Edit action method is used to update the edited Todo List row in the JQGrid.
3. Delete action method is used to delete the selected Todo List row in the JQGrid.

 
 ---------------------plain Source code of above image is

public string Edit(TodoList obj)

{
string msg;
try
{
if (ModelState.IsValid)
{
db.Entry(obj).State = EntityState.Modified;
db.SaveChanges();
msg = "Saved Successfully";
}
else
 {
msg = "Validation data not successfull";
}
}
catch (Exception ex)
{
msg = "Error occured:" + ex.Message;
}
return msg;
}
public string Delete(int Id)
{
TodoList list = db.TodoLists.Find(Id);
db.TodoLists.Remove(list);
db.SaveChanges();
return "Deleted successfully";
}
 JQGrid now with the CRUD functionality implemented present in the Page navigator.

 
 Lets add 1 task item to the Todo List by clicking on + button present in the Page navigator.
  
 Submit the data after entering the valid data will save the data into the JQGrid.
  
 Editing one of the Todo List in the JQGrid.
  

 Target date updated successfully in the JQGrid.

  
 Deleting 1 of the Todo List task(task 5) in the JQGrid.