The NetAdvantage for jQuery product contains a client-side jQuery grid with an ASP.NET MVC Html Helper. The Helper makes it easy to new up the grid within your MVC views connecting to data form your model. In this blog, you will learn how to create a simple grid using the Razor syntax in your ASP.NET MVC view and connect to the data source.

Setting up the project

In order to get the grid to show up you will need the necessary JavaScript and CSS file on the client so that when the MVC helper generates the jQuery grid initialization code on the client, everything needed for the grid to display is available. When you create a new ASP.NET MVC 3 project it comes with Scripts and a Content folders where all the default JavaScript files and CSS contents are located respectively. We will use the same folder and insert the Infragistics Scripts & CSS.

Note: These Scripts & CSS can be found under the Install location of NetAdvantage for jQuery.

Next you want the project to be able to consume these references. You have two choices, use _Layout.cshtml and put everything there, or add reference on every page that uses an Infragistics control. I prefer to use the _Layout.cshtml because that way, I can just put this code at one place and don’t have to worry about it anymore in any other views I create that use Infragistics controls.  The following code in the head section of _Layout.cshtml will be needed:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="@Url.Content("~/Scripts/IG/ig.ui.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/IGStyles/base/ig.ui.editors.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/IGStyles/base/ig.ui.grid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/IGStyles/ig/jquery.ui.custom.css")" rel="stylesheet" type="text/css" />

You will also have to add reference to the Infragistics.Web.Mvc assembly that contains the Html Helper we will use in our Razor view. This contains definitions for all the MVC helpers, so once you have added this to your project, you will be able to work with all the controls throughout the project.

The project is now setup and we can build out MVC view with any Infragistics controls using the appropriate HTML Helper. For this blog, we will be using the Helper for the grid and have it display data coming from our Model.

Model

The ASP.NET MVC project has a default Model class called AccountModel.cs. In the same Model class, we will add a BankAccount object with some properties and a new AccountModels class that has a GetAccountList method which creates a list of BankAccout objects and returns them as a list of IQueryable objects. Using IQueryable object, the grid is able to natively perform operations like sorting, filtering and paging on the collection. You can use any type of collections, even web services to connect data and operate on the grid. The code we will add to AccountModel.cs class would be:

public class BankAccount
{
    public int AccountNumber { get; set; }
    public string AccountName { get; set; }
    public DateTime AccountDate { get; set; }
    public string AccountType { get; set; }
    public decimal AccountBalance { get; set; }
}

public class AccountModels
{
    public static IQueryable<BankAccount> GetAccountList()
    {
        List<BankAccount> accountList = new List<BankAccount>();
        DateTime date = DateTime.Now;
        for (int i = 1; i < 1001; i++)
        {
            accountList.Add(new BankAccount()
            {
                AccountNumber = i,
                AccountName = "Test" + i.ToString(),
                AccountDate = date,
                AccountType = "chk",
                AccountBalance = 12345678.90M
            }
            );
        }
        return accountList.AsQueryable<BankAccount>();
    }
}

View

We have already referenced the JavaScript & CSS in _Layout.cshtml, so now we can get directly to writing our view code. We will be using the Razor syntax to create the grid in the Index.cshtml page that gets generated when you create a new ASP.NET MVC 3 project, and binding it to the BankAccount object collection in the model. In order to be able to do that, we will need to insert the following lines right at the top of our view.

@using Infragistics.Web.Mvc;
@using Mvc3WebApp.Models;

Once we have these lines, we also get Visual Studtio intellisense that will make it easy to work with the helper and create views with the Infragistics jQuery grid or any other control. We can use the Html Helper to define grid properties, enable features and setup up the initial layout. We will begin with setting up column object, and setting some properties on it, enable paging, sorting & selection feature of the grid and use the “DataSourceUrl” property to connect it to the GetAccountList method which returns the list of BankAccount object. Finally we will call databind & render which is needed so that the grid can bind to its data source and render on the page. With all that, the helper will look like the following:

@( Html.Infragistics().Grid<BankAccount>()
    .ID("igGrid1")
    .Columns(column =>
    {
        column.For(x => x.AccountNumber).DataType("int").HeaderText("Account Number");
        column.For(x => x.AccountName).DataType("string").HeaderText("Account Name");
        column.For(x => x.AccountDate).DataType("date").HeaderText("Account Date");
        column.For(x => x.AccountType).DataType("string").HeaderText("Account Type");
        column.For(x => x.AccountBalance).DataType("number").HeaderText("Account Balance");
    })
    .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);
    })
    .ClientDataSourceType(ClientDataSourceType.JSON)
    .DataSourceUrl(Url.Action("GetAccountList"))
    .Width("100%")
    .Height("350")
    .LocalSchemaTransform(true)
    .DataBind()
    .Render()  
)

Controller

The grid MVC helper above will call the GetAccountList() method in the controller to get the data to display in the grid. We can setup the method, make the call to the GetAccountList in our Model and return the view back to the grid, so that it has what it needs. The Controller method do so will be:

[GridDataSourceAction]
public ActionResult GetAccountList()
{
    return View(Models.AccountModels.GetAccountList());
}

That is it. You can run the project and it will show the Infragistics jQuery grid control, connected to the data coming from our Model. You can perform operations like paging, sorting and selection, and the grid will function as expected.

Summary

In this article, you learned how to get started with the Infragistics ASP.NET MVC Html Helper for the jQuery grid control. Add project references, use the new Razor syntax for the MVC view, you can connect the grid to the data in the model and have it perform paging and sorting operations on that data.

You can download the sample code from here. If you have any questions on this blog, or questions in general about the Netadvantage for jQuery product, feel free to reach out to me. murtazaa@infragistics.com