Click here to Skip to main content
13,450,606 members (57,225 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


73 bookmarked
Posted 23 Jan 2012

ASP.NET MVC-3.0/ JqGrid/ Unit Of Work/ Repository/ EF 4.1 CRUD Application (N Layered)

, 23 Jan 2012
Rate this:
Please Sign up or sign in to vote.
Design of multilayered web-based application operations using ASP.NET MVC 3.0/ JqGrid/ Unit of Work/ Repository/ EF 4.1 and a code demonstration of how to perform CRUD operations using it.


In this article, I will demonstrate the design of multilayered web-based application operations using ASP.NET MVC 3.0/ JqGrid/ Unit of Work/ Repository/ EF 4.1 and later give code demonstration of how to perform CRUD operations using it.

I am assuming that you have basic understanding of ASP.NET MVC/JqGrid/Jquery and EF 4.1.


  • DAL: Data Access Layer contains repositories, and EF 4.1 generated code, which handles interaction with underlying data store, and Entities.
  • BLL: Business Process Layer contains classes that incorporate application business rules. Furthermore, unit of work pattern is used in this layer to track all changes that can affect the database.
  • Web Application: It is an ASP.NET MVC based web application, through which users can interact with the application.


Project Structure


Implementation Details

EF 4.1 Database First Model

In the MVCJqGridCrud solution, add DAL, BLL and Web project.

Right click on DAL project, select add from the context menu and from the sub-menu, select New Item.

Select ADO.NET Entity Data Model.

Click Add.


In follow up wizard, select generate from database.

Click Next.


Note: I used database named as “ProgrammingEFDB1” for this demo which can be found in code folder (downloadable). It has two tables, contact and address.

The next step of the wizard will give you the options to configure your database connection.

Click on New Connection and select your desired database from connection property pop up. In this case, it is ProgrammingEFDB1.

Check the check box in bottom of the wizard which states “Save entity connection settings in App.Config as”.


Click Next.

In the next step of the wizard, select only tables for this demo, and check the checkboxes at the bottom and click finish.


Model1.edmx will be added in DAL project.

Double click on Model1.edmx to open the designer view of the file.

In the designer view, right click and from context menu select “Add code generation items”.

Select the ADO.NET DbContext Generator from the wizard to use simplified DbContext API.

There will be two items added to DAL project.

    It contains POCO classes for each entity in your model.
    It derived from DBContext to use for querying and persisting data.



A Repository mediates between the domain and data mapping layers, acting like an in-memory domain object collection. Repository isolates domain objects from details of the database access code.

I used specialized repositories, which derive from generic repository (base) with overridden or additional method. By this approach, I can benefit the use of common methods from generic repository and adding/overriding specialized method in specialized repository.

In this demo, I have kept possible common methods like GetById(), Add() in Base Repository. Meanwhile, a more specialized method named as GetContactsPaged() relevant to contact repository, is in Contact Repository.

RepositoryBase.cs (Generic Repository Class)

public abstract class RepositoryBase<T> where T : class
        internal ProgrammingEFDB1Entities _dataContext;
        internal DbSet<T> _dbset;
        public RepositoryBase(ProgrammingEFDB1Entities context)
            this._dataContext = context;
            this._dbset = context.Set<T>();
        public virtual List<T> Get(
            Expression<Func<T, bool>> filter = null,
            Func<IQueryable<T>, IOrderedQueryable<T>> orderBy = null,
            string includeProperties = "")
            IQueryable<T> query = _dbset;

            if (filter != null)
                query = query.Where(filter);

            foreach (var includeProperty in includeProperties.Split
                (new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
                query = query.Include(includeProperty);

            if (orderBy != null)
                return orderBy(query).ToList();
                return query.ToList();

        public virtual void Add(T entity)
        public virtual void Delete(T entity)
        public virtual void Delete(Expression<Func<T, bool>> where)
            IEnumerable<T> objects = _dbset.Where<T>(where).AsEnumerable();
            foreach (T obj in objects)
        public virtual T GetById(long id)
            return _dbset.Find(id);
        public virtual T GetById(string id)
            return _dbset.Find(id);
        public virtual IEnumerable<T> GetAll()
            return _dbset.ToList();
        public virtual IEnumerable<T> GetMany(Expression<Func<T, bool>> where)
            return _dbset.Where(where).ToList();
        public T Get(Expression<Func<T, bool>> where)
            return _dbset.Where(where).FirstOrDefault<T>();


public class ContactRepository : RepositoryBase<Contact>
        public ContactRepository(ProgrammingEFDB1Entities context)
            : base(context)


        public List<Contact> GetContactPaged(int page, int rows, out int totalCount)

            totalCount = _dataContext.Contacts.Count();
            return _dataContext.Contacts.OrderBy(c => c.ContactID).Skip
        (page * rows).Take(rows).ToList();

Unit of Work

A Unit of Work keeps track of everything you do during a business transaction that can affect the database. In my opinion, Unit of Work is somewhat similar to a transaction. It just encapsulates single business operation. In this demo, I make sure that each business operation has a new DBContext. When method is called, it will commit the changes in current DBContext.


public class UnitOfWork : IDisposable
        private ProgrammingEFDB1Entities _context;
        public UnitOfWork()
            _context = new ProgrammingEFDB1Entities();
        private ContactRepository _contactRepository;
        public ContactRepository ContactRepository

                if (this._contactRepository == null)
                    this._contactRepository = new ContactRepository(_context);
                return _contactRepository;
        public void Save()

        private bool _disposed = false;

        protected virtual void Dispose(bool disposing)
            if (!this._disposed)
                if (disposing)
            this._disposed = true;

        public void Dispose()

Business Process Layer

It encapsulates the business logic of the application. In code demo, I have used only a single class in named as ManageContacts.cs for simplicity. It uses Unit of Work pattern for application business operations.


public class ManageContacts
        public IEnumerable<Contact> GetContacts()
            IEnumerable<Contact> contacts;
            using (UnitOfWork unitOfWork = new UnitOfWork())
                contacts = unitOfWork.ContactRepository.GetAll();
            return contacts;

        public bool AddContact(Contact contact)
            using (UnitOfWork unitOfWork = new UnitOfWork())
            return true;

        public bool UpdateContact(Contact contact, int id)
            using (UnitOfWork unitOfWork = new UnitOfWork())
                var contactEntity = unitOfWork.ContactRepository.GetById(id);
                contactEntity.Title = contact.Title;
                contactEntity.FirstName = contact.FirstName;
                contactEntity.LastName = contact.LastName;
                contactEntity.ModifiedDate = DateTime.Now;
            return true;

        public bool DeleteContact(int id)
            using (UnitOfWork unitOfWork = new UnitOfWork())
                Contact contact = unitOfWork.ContactRepository.GetById(id);
            return true;

        public List<Contact> GetContactPaged(int page, int rows, out int totalCount)
            List<Contact> contacts;
            using (UnitOfWork unitOfWork = new UnitOfWork())
                contacts = unitOfWork.ContactRepository.GetContactPaged
                (page, rows, out totalCount);
            return contacts;
        public Contact GetById(int id)
            Contact contact;
            using (UnitOfWork unitOfWork = new UnitOfWork())
                contact = unitOfWork.ContactRepository.GetById(id);
            return contact;


ASP.NET MVC controller coordinates between UI and model (data model).

Following action methods are added in our application.

  • GridDemoData(): It will return contacts data in json format to UI layer for JqGrid binding, handle user input for paging.
  • PerformCRUDOperation(): It handles CRUD inputs from user through JqGrid UI.


public ActionResult GridDemoData(int page, int rows, 
    string search, string sidx, string sord)
            var manageContacts = new ManageContacts();
            int currentPage = Convert.ToInt32(page) - 1;
            int totalRecords = 0;

            var data = manageContacts.GetContactPaged
        (currentPage, rows, out totalRecords);

            var totalPages = (int)Math.Ceiling(totalRecords / (float)rows);
            var jsonData = new
                total = totalPages,
                records = totalRecords,

                rows = (
                           from m in data
                           select new
                               id = m.ContactID,
                               cell = new object[]
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        public ActionResult PerformCRUDAction(Contact contact)
            var manageContacts = new ManageContacts();

            bool result = false;
            switch (Request.Form["oper"])
                case "add":
                    contact.AddDate = DateTime.Now.Date;
                    contact.ModifiedDate = DateTime.Now;
                    result = manageContacts.AddContact(contact);
                case "edit":
                    int id = Int32.Parse(Request.Form["id"]);
                    result = manageContacts.UpdateContact(contact,id);
                case "del":
                    id = Int32.Parse(Request.Form["id"]);
                    result = manageContacts.DeleteContact(id);
            return Json(result);

View (UI Layer)

JqGrid Setup Requirements

The following code is used for JqGrid setup in site.master.

<link href="<%= ResolveUrl("~/Content/themes/flick/ui.jqgrid.css") %>" rel="stylesheet"

        type="text/css" />

Following HTML code need to be added in index.aspx for JqGrid:

<div id="myDiv" style="width: 100%">
        <table id="grid" cellpadding="0" cellspacing="0">
        <div id="pager" name="pager" style="text-align: center;">


Below is the JavaScript code for JqGrid in JqGridCRUD.js.

var lastsel;
$(function () {

        colNames: ['Title', 'First Name', 'Last Name'],
        colModel: [
                        { name: 'Title', index: 'Title', sortable: false, 
                align: 'left', width: '200',
                            editable: true, edittype: 'text'
                        { name: 'FirstName', index: 'FirstName', sortable: false, 
                align: 'left', width: '200',
                            editable: true, edittype: 'text'
                        { name: 'LastName', index: 'LastName', sortable: false, 
                align: 'left', width: '200',
                            editable: true, edittype: 'text'
        pager: jQuery('#pager'),
        sortname: 'FirstName',
        rowNum: 10,
        rowList: [10, 20, 25],
        sortorder: "",
        height: 225,
        viewrecords: true,
        rownumbers: true,
        caption: 'Contacts',
        imgpath: '/Content/jqGridCss/smoothness/images',
        width: 750,
        url: "/Home/GridDemoData",
        editurl: "/Home/PerformCRUDAction",
        datatype: 'json',
        mtype: 'GET',
        onCellSelect: function (rowid, iCol, aData) {

            if (rowid && rowid !== lastsel) {

                if (lastsel)
                    jQuery('#grid').jqGrid('restoreRow', lastsel);
                jQuery('#grid').jqGrid('editRow', rowid, true);
                lastsel = rowid;
    jQuery("#grid").jqGrid('navGrid', '#pager', 
    { edit: false, add: true, del: true, search: false, refresh: true },
            { closeOnEscape: true, reloadAfterSubmit: true, 
            closeAfterEdit: true, left: 400, top: 300 },
            { closeOnEscape: true, reloadAfterSubmit: true, 
            closeAfterAdd: true, left: 450, top: 300, width: 520 },
            { closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });


UI Screen Shot



Find the code in the attached folder, and please don’t forget to rate or vote for this article. Furthermore, do add your comments to make it better.


  • 22nd January, 2012: Initial version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

aamir sajjad
Software Developer (Senior) -
Pakistan Pakistan
i am working as a senior software developer.

You may also be interested in...


Comments and Discussions

QuestionJqGrid Search Functionality Pin
Member 1046873226-Mar-14 19:58
memberMember 1046873226-Mar-14 19:58 
SuggestionGood But Not Working Pin
Sharath.Mitte24-Feb-14 3:10
memberSharath.Mitte24-Feb-14 3:10 
QuestionHow to remove inline editing in your code? Pin
Member 1030892212-Feb-14 2:18
memberMember 1030892212-Feb-14 2:18 
QuestionI`m Can not Restore the database Pin
iamour26-Mar-13 15:58
memberiamour26-Mar-13 15:58 
QuestionEF Code First? Pin
negrito8028-Jan-13 12:21
membernegrito8028-Jan-13 12:21 
QuestionGetting Issues Pin
latif12724-Nov-12 20:13
memberlatif12724-Nov-12 20:13 
AnswerRe: Getting Issues Pin
aamir sajjad24-Nov-12 22:22
memberaamir sajjad24-Nov-12 22:22 
GeneralRe: Getting Issues Pin
latif12725-Nov-12 10:37
memberlatif12725-Nov-12 10:37 
QuestionHelp in implementing paging Pin
Member 321208014-Nov-12 19:30
memberMember 321208014-Nov-12 19:30 
GeneralMy vote of 5 Pin
maximan22-Oct-12 19:34
membermaximan22-Oct-12 19:34 
QuestionRepositories in UoW Pin
billym201011-Jun-12 11:43
memberbillym201011-Jun-12 11:43 
QuestionHow to use method Get Pin
KratosBunbury15-May-12 7:05
memberKratosBunbury15-May-12 7:05 
GeneralSimilar architecture is in Pin
Michael Freidgeim12-May-12 15:23
memberMichael Freidgeim12-May-12 15:23 
QuestionAbout "Unit Of Work" Pin
lGiles26-Apr-12 9:24
memberlGiles26-Apr-12 9:24 
Questionattaching the db Pin
spankbudda11-Apr-12 10:14
memberspankbudda11-Apr-12 10:14 
AnswerRe: attaching the db Pin
aamir sajjad11-Apr-12 14:43
memberaamir sajjad11-Apr-12 14:43 
GeneralRe: attaching the db Pin
Cyclone5529-Jun-12 16:10
memberCyclone5529-Jun-12 16:10 
GeneralRe: attaching the db Pin
aamir sajjad29-Jun-12 19:14
memberaamir sajjad29-Jun-12 19:14 
GeneralMy vote of 5 Pin
rafimag20-Mar-12 2:44
memberrafimag20-Mar-12 2:44 
GeneralRe: My vote of 5 Pin
BJacks5-Apr-12 16:45
memberBJacks5-Apr-12 16:45 
GeneralMy vote of 5 Pin
Ashish Tripathi28-Feb-12 3:09
memberAshish Tripathi28-Feb-12 3:09 
GeneralMy vote of 5 Pin
albertoleon24-Jan-12 22:47
memberalbertoleon24-Jan-12 22:47 
Questionthis is different then yours. like its have different implementation technique of UoW, use of JqGrid etc. Pin
aamir sajjad24-Jan-12 7:05
memberaamir sajjad24-Jan-12 7:05 
AnswerRe: this is different then yours. like its have different implementation technique of UoW, use of JqGrid etc. Pin
Sacha Barber24-Jan-12 11:32
mvpSacha Barber24-Jan-12 11:32 
QuestionAmazing how many of these style articles there are this week Pin
Sacha Barber24-Jan-12 1:36
mvpSacha Barber24-Jan-12 1:36 
I only just published one too : Restful WCF / EF POCO / UnitOfWork / Repository / MEF : 1 of 2

I put that out last week. Must be a demand for this sort of thing I guess

One thing I would say about your UnitOfWork is that I do NOT feel it should know about Repositories, that is a bad separation of concern. I think most implementations pass in UnitOfWork to Repositories.
Sacha Barber
  • Microsoft Visual C# MVP 2008-2012
  • Codeproject MVP 2008-2011
Open Source Projects

Your best friend is you.
I'm my best friend too. We share the same views, and hardly ever argue

My Blog :

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180318.3 | Last Updated 23 Jan 2012
Article Copyright 2012 by aamir sajjad
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid