DarioSantarelli.Blog(this);

Experimenting with Ext.NET support for Razor: a GridPanel with AJAX proxy

Posted by dariosantarelli on June 2, 2012

In these days I’m having fun experimenting the Razor View Engine support introduced in Ext.NET v.2.0 (Beta3 at the time of writing) and I’m appreciating how fluently you can configure any Ext.NET component. Nowadays there isn’t a good documentation about these new features (on Ext.NET official site you can read “Server-side Ext.NET API documentation is being worked on”) so if you want more info about Razor support please have a look at the Ext.NET official forum (I’ve found this thread particularly helpful!). Moreover, in the Ext.NET Examples Explorer you can try to get the necessary knowledge for translating WebForms code examples into Razor views.
In this post I’d like to show one of my first tests: a simple GridPanel supporting server-side data paging via AJAX proxy.
Here the interesting Razor syntax:

@Html.X().ResourceManager()
@(Html.X().GridPanel()
        .Title("Customers")
        .Store(store => store.Add(Html.X().Store()
            .AutoLoad(true)
            .RemoteSort(false)
            .IsPagingStore(true)
            .RemotePaging(true)
            .PageSize(20)
            .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                            .Url("/Customers/GetCustomers")
                            .Reader(reader => reader.Add(Html.X().JsonReader()
                                                                   .Root("data")
                                                                   .TotalProperty("total")
                                                                   .IDProperty("CustomerID")))))
            .Model(model => model.Add(Html.X().Model()
                        .Fields(fields =>
                        {
                            fields.Add(Html.X().ModelField().Name("CustomerID"));
                            fields.Add(Html.X().ModelField().Name("ContactName"));
                            fields.Add(Html.X().ModelField().Name("CompanyName"));
                            fields.Add(Html.X().ModelField().Name("Phone"));
                            fields.Add(Html.X().ModelField().Name("Fax"));
                            fields.Add(Html.X().ModelField().Name("Region"));
                        })))))
        .ColumnModel(columnModel =>
        {
            columnModel.Columns.Add(Html.X().Column().Text("ContactName").DataIndex("ContactName").Flex(1));
            columnModel.Columns.Add(Html.X().Column().Text("CompanyName").DataIndex("CompanyName").Flex(1));
            columnModel.Columns.Add(Html.X().Column().Text("Phone").DataIndex("Phone"));
            columnModel.Columns.Add(Html.X().Column().Text("Fax").DataIndex("Fax"));
            columnModel.Columns.Add(Html.X().Column().Text("Region").DataIndex("Region"));
        })
        .BottomBar(bar => bar.Add(Html.X().PagingToolbar()
                                          .DisplayInfo(true)
                                          .DisplayMsg("Displaying customers {0} - {1} of {2}")))
        .View(view => view.Add(Html.X().GridView())))

 

The output is shown in the following image…

First of all, please note the Html.X() helper method. This is the entry point for configuring any Ext.NET component. As requisite for getting started, you can call the Html.X().ResourceManager() helper method. Like the counterpart of Ext.NET for WebForms, it automatically injects every script and stylesheet you need into your page. The output should be something like this:

<link type="text/css" rel="stylesheet" href="/extjs/resources/css/ext-all-gray-embedded-css/ext.axd?v=25767" />   
<link type="text/css" rel="stylesheet" href="/extnet/resources/extnet-all-embedded-css/ext.axd?v=25767" />
<script type="text/javascript" src="/extjs/ext-all-js/ext.axd?v=25767"></script>
<script type="text/javascript" src="/extnet/extnet-all-js/ext.axd?v=25767"></script> 

OK, now through the Html.X() helper you can start configuring the GridPanel. In my example I have an AjaxProxy which calls a controller action in order to get back some JSON data to bind to the GridPanel. Some point of interest:

  • start and limit are the two standard ExtJs querystring parameters sent by the proxy to the remote data source in order to tell it how to page data.
  • AjaxProxy can process the resulting JSON via a JsonReader. In particular, pay attention to the Root() and TotalProperty() methods. They tell the reader respectively which root property in the JSON response contains the data rows and which property contains the total results count. They are two fundamental info for the right grid rendering.

Finally, the controller action code:

public ActionResult GetCustomers(int start, int limit)
{
    IEnumerable dtoArray;
    int total;

    using (var unitOfWork = _unitOfWorkFactory.Create())
    {
        var customerRepository = _repositoryFactory.CreateCustomerRepository(unitOfWork);
        var customers = customerRepository.Query()
                                          .Skip(start)
                                          .Take(limit);

         dtoArray = (from customer in customers
                        select new
                                {
                                    customer.CustomerID,
                                    customer.CompanyName,
                                    customer.ContactName,
                                    customer.Phone,
                                    customer.Fax,
                                    customer.Region
                                }).ToArray();

         total = customerRepository.Query().Count();
    }

    return Json(new { data = dtoArray, total = total }, JsonRequestBehavior.AllowGet);
}

 

About these ads

4 Responses to “Experimenting with Ext.NET support for Razor: a GridPanel with AJAX proxy”

  1. Ish said

    Simply Awesome ..
    how do i make Html.X().GridPanel() as an extension method , just to reduce the complexity of view ?
    Ish

  2. rahul said

    Could you provide a code sample for ” _unitOfWorkFactory.Create()”, _repositoryFactory.CreateCustomerRepository(unitOfWork)
    I am not sure with data type it returns.

    • In this example I’m assuming that the _unitOfWorkFactory and the _repositoryFactory members are simply abstractions and they are injected into the controller constructor via an IoC container. As you may know, a UnitOfWork keeps track of everything you do during a business transaction that can affect the database (e.g.: the NHibernate session or the Entity Framework ObjectContext/DbContext). The Repository factory simply creates a collection-like interface for accessing domain objects. In this example the factory could create a concrete implementation of IRepository in order to expose an IQueryable interface over the LINQ features of the data layer.

  3. alon said

    i try to use the code
    and there is problem with the _unitOfWorkFactory and _repositoryFactory

    it’s better if you can add the misiing code or tell the readers what to do.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: