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…

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.

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

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.

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

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

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.

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