Telerik blogs

Using ViewModel objects to improve the Ajax performance of Telerik Grid for ASP.NET MVC

by Atanas Korchev
November 10, 2009 Web, ASP.NET MVC 0 Comments


In this blog post I will demonstrate how to squeeze the most from Telerik Grid for ASP.NET MVC when using Ajax binding.

Lets start with a simple grid bound to the Northwind Orders table:

View:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<UsingDto.Models.Order>>" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.OrderID).Width(100);
            columns.Add(o => o.Customer.ContactName).Width(200);
            columns.Add(o => o.ShipAddress);
            columns.Add(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
        })
        .Ajax(ajax => ajax.Action("_AjaxBinding", "Home"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
%>
<%= Html.Telerik().ScriptRegistrar() %>
</asp:Content>
Controller:
public class HomeController : Controller
{
 public ActionResult Index()
    {
 return View(GetOrders());
    }

    [GridAction]
 public ActionResult _AjaxBinding()
    {
 return View(new GridModel
        {
            Data = GetOrders()
        });
    }

 private IEnumerable<Order> GetOrders()
    {
        NorthwindDataContext northwind = new NorthwindDataContext();

 return northwind.Orders;
    }
}

Let’s try this setup and go to the second page of the grid. FireBug reports that 6418 bytes have been transferred:

BeforeDto

This is because all the properties of the Order object are serialized in JSON. Since we have a column which is using the Customer property of the Order all properties of the Customer object are serialized as well. Let’s improve the payload size using the following ViewModel object:

public class OrderViewModel
{
 public int OrderID
    {
        get;
        set;
    }

 public string ContactName
    {
        get;
        set;
    }

 public string ShipAddress
    {
        get;
        set;
    }

 public DateTime? OrderDate
    {
        get;
        set;
    }
}

It contains only the properties relevant in this particular grid configuration. By using it we will serialize only the important data thus improving the total size of the Ajax request. Here is

the updated configuration:

View:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<UsingDto.Models.OrderViewModel>>" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.OrderID).Width(100);
            columns.Add(o => o.ContactName).Width(200);
            columns.Add(o => o.ShipAddress);
            columns.Add(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
        })
        .Ajax(ajax => ajax.Action("_AjaxBinding", "Home"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
%>
<%= Html.Telerik().ScriptRegistrar() %>
</asp:Content>
The type of the model and the ContactName column are changed.

Controller:

public class HomeController : Controller
{
 public ActionResult Index()
    {
 return View(GetOrders());
    }

    [GridAction]
 public ActionResult _AjaxBinding()
    {
 return View(new GridModel
        {
            Data = GetOrders()
        });
    }

 private IEnumerable<OrderViewModel> GetOrders()
    {
        NorthwindDataContext northwind = new NorthwindDataContext();

 return from o in northwind.Orders
               select new OrderViewModel
               {
                   OrderID = o.OrderID,
                   ContactName = o.Customer.ContactName,
                   ShipAddress = o.ShipAddress,
                   OrderDate = o.OrderDate
               };
    }
}
The only thing that is changed is the GetOrders method. It is now projecting the Order object to OrderViewModel.
Let’s check if this made any difference:
AfterDto  
Nice! Now the total amount of data transferred during paging is 1223 bytes. We can improve that further if we enable gzip compression in IIS7 for the JSON content type:
 

AfterGzip

GZIP compression introduces two times smaller payload and almost ten times than the initial implementation.

Find attached the sample project used in the blog post.

I hope this helps!

Extensions
About the Author

Atanas Korchev

 is Team Leader in Kendo UI Team

Comments

Comments are disabled in preview mode.