ASP.NET MVC 3 + Entity Framework + Infragistics jQuery Grid

Entity Framework is a quite powerful ORM solution in .NET. Now with the ASP.NET MVC tools refresh, it also got the CodeFirst feature, which is quite handy when you want to generate a model for you data using code and the database automatically gets build up for you based on your model code.  In this blog, I will show you how you can use the Entity Framework as a model for your database and use the Infragistics jQuery Grid to display data in an ASP.NET MVC application. I will be assuming that you are familiar on how to setup your MVC projects so that you can use NetAdvantage for jQuery controls, if not, you can go through this blog to get started.

Creating Entity Framework Data Model:

For this exercise we will pull in the customer information from the NorthWind Database using the Entity Framework Data Model. First of all, we will need to create a new ADO.NET Entity Data Model. To do that, right click on the project and select Add –> New Item…

image

Within the Add New Item dialog, select the data tab from the left, and then select the ADO.NET Entity Data Model. Set NorthWind.emx as the name and click Add. The Entity Framework Data Model Wizard will start.

image

In the first screen, select Generate from database, and click Next.

image

I had dropped an instance of the complete NorthWind database in the App_Data folder. On this screen, choose the NorthWind.MDF table within your App_Data folder from the drop down, and then click Next.

image

Finally, select the Customers table from the table list and click next.

image

You have now successfully created your Entity Data Model, and your edmx designer should look like the following:

image

Now, it’s time to write some code to pull our data form the Entity Model and display within our MVC View.

Model:

In the default AccountModel.cs class, we can create a CustomerModel class, that will have a GetCustomerList() method which when called will go to the Entity Data Model, and return back an IQueryable for Customers.

public class CustomerModel
{
    public static IQueryable<Customer> GetCustomerList()
    {
        NORTHWNDEntities northWindEntities = new NORTHWNDEntities();

        var customers = from c in northWindEntities.Customers
                        orderby c.CustomerID
                        select c;

        return customers.AsQueryable<Customer>();
    }
}

View:

In our View, we can use the Razor syntax to instantiate our grid and bind it to the data coming from the Model. We will have to go through a controller which we will define in the next section. So, the grid will display a set of columns defined using the columns collection. We have also enabled paging, sorting and selection on the grid. Finally we can use the DataSourceUrl method to call our controller action to get use the data, call databind and render.

@( Html.Infragistics().Grid<MVC3EntityFramework.Customer>()
        .AutoGenerateColumns(true)
        .Columns(column =>
        {
            column.For(x => x.CustomerID).DataType("string").HeaderText("Customer ID");
            column.For(x => x.CompanyName).DataType("string").HeaderText("Company Name");
            column.For(x => x.ContactTitle).DataType("string").HeaderText("Contact Title");
            column.For(x => x.ContactName).DataType("string").HeaderText("Contact Name");
            column.For(x => x.Country).DataType("string").HeaderText("Country");
        })
        .Features(features =>
        {
            features.Paging().PageSize(20).PrevPageLabelText("Previous").NextPageLabelText("NEXT");
            features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>
            {
                settings.ColumnSetting().ColumnKey("AccountNumber").AllowSorting(true);

            });
            features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);
        })
        .DataSourceUrl(Url.Action("CustomerList"))            
        .Width("100%")
        .Height("350px")
        .DataBind()
        .Render()
)   

Controller:

Finally, in the default HomeController.cs, we can implement the CustomerList method which will be called by the jQuery grid when requesting for data. This method will internally called the Model to get the CustomersList from the Entity Data Model, and pass that into the view.

[GridDataSourceAction]
public ActionResult CustomerList()
{
    return View(MVC3EntityFramework.Models.CustomerModel.GetCustomerList());
}

Victory!

By doing all of that and running the project, we should get the Infragistics jQuery grid with paging, sorting and selection features, displaying the customer information from the NorthWind database using the Entity Data Model with ASP.NET MVC.

image

You can download the sample from here. Let me know if you any questions: murtazaa@infragistics.com


Comments  (11 )

sby
on Wed, Jun 8 2011 6:13 AM

Hello

Can I use it for editing (CRUD) ?

Thank you

[Infragistics] Murtaza Abdeali
on Wed, Jun 8 2011 10:33 AM

Yes, CRUD is currently a CTP feature. We will RTM it in the next release.

Anthony Queen
on Wed, Jun 8 2011 11:05 AM

Why are the column headers in the grid not aligned with the columns?

Alexander Todorov
on Thu, Jun 16 2011 3:49 PM

Hi Anthony,

I suppose this is because Taz has been using an eariler untested code in order to take the screenshots. You shouldn't worry about this in the RTM release.

Thank you!

Angel

eddietaylor09
on Sat, Jul 2 2011 1:35 AM

can i use CRUD for editing

[Infragistics] Murtaza Abdeali
on Tue, Jul 5 2011 1:07 PM

The grid currently has support for editing, but it is a CTP feature.

tech9
on Wed, Dec 7 2011 2:59 PM

I am sure Infragistics.Web.Mvc was added to reference but I still get error while running

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS0246: The type or namespace name 'Infragistics' could not be found (are you missing a using directive or an assembly reference?)

Source Error:

Line 1:  @using Infragistics.Web.Mvc;

Line 2:  @{

Line 3:      ViewBag.Title = "Home Page";

[Infragistics] Borislav Traykov
on Wed, Dec 7 2011 3:39 PM

Hi tech9,

I've answered your question in the forum (community.infragistics.com/.../320114.aspx) - let me know if any of the proposed solutions work for you.

vaishalibharat
on Thu, Jan 5 2012 1:57 PM

Can we have this on the server side. I am trying to achieve this, but getting error. Here is the question, community.infragistics.com/.../324375.aspx

Taz Abdeali
on Fri, Feb 17 2012 1:01 PM

jQuery is by far the most popular JavaScript framework ever developed. Released by John Resig and first

stefan michev
on Tue, Nov 27 2012 9:05 PM

after download and compile i'm getting following error:

The view 'CustomerList' or its master was not found or no view engine supports the searched locations. The following locations were searched: ...

My environment: Win7 64b., VS 2010

Thanks in advance