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:

        .Store(store => store.Add(Html.X().Store()
            .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                            .Reader(reader => reader.Add(Html.X().JsonReader()
            .Model(model => model.Add(Html.X().Model()
                        .Fields(fields =>
        .ColumnModel(columnModel =>
        .BottomBar(bar => bar.Add(Html.X().PagingToolbar()
                                          .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()

         dtoArray = (from customer in customers
                        select new

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

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



8 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 ?

  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.

  4. christian said

    im trying to save a master-detal object as a invoice-itemsInvoice, y want to show itemsInvoice records in GridPanel and this offer me excellent cell editing but, how to post to the controller action the master-detail model including detail data in the gridPanel..??

  5. anggun perpatih said

    i’m still getting error
    Compiler Error Message: CS1061: ‘System.Web.Mvc.HtmlHelper’ does not contain a definition for ‘X’ and no extension method ‘X’ accepting a first argument of type ‘System.Web.Mvc.HtmlHelper’ could be found (are you missing a using directive or an assembly reference?)

    Source Error:

    Line 1:
    Line 2:
    Line 3: @(Html.X().Window()
    Line 4: .Title(“Hello World”)
    Line 5: .Icon(Icon.Application)

  6. anggun perpatih said

    where can i get all this files


  7. Mene & Moy said

    Hi there everyone, it’s my first pay a quick visit at this website, and
    piece of writing is actually fruitful for me, keep up posting such posts.

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: