DarioSantarelli.Blog(this);

Archive for June, 2012

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())))

 

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);
}

 

Posted in AJAX, ASP.NET, ASP.NET MVC, C#, Programming, Web Development | 8 Comments »