WebGrid Helper and Complex Types

    Introduction:



          WebGrid helper makes it very easy to show tabular data. It was originally designed for ASP.NET Web Pages(WebMatrix) to display, edit, page and sort tabular data but you can also use this helper in ASP.NET Web Forms and ASP.NET MVC. When using this helper, sometimes you may run into a problem if you use complex types in this helper. In this article, I will show you how you can use complex types in WebGrid helper.

 

    Description:

 

          Let's say you need to show the employee data and you have the following classes,

 

view sourceprint?
01public class Employee
02{
03    public string Name { get; set; }
04    public Address Address { get; set; }
05    public List<string> ContactNumbers { get; set; }
06}
07public class Address
08{
09    public string City { get; set; }
10}

 

 

          The Employee class contain a Name, an Address and list of ContactNumbers. You may think that you can easily show City in WebGrid using Address.City, but no. The WebGrid helper will throw an exception at runtime if any Address property is null in the Employee list. Also, you cannot directly show ContactNumbers property. The easiest way to show these properties is to add some additional properties,

 

view sourceprint?
01public Address NotNullableAddress
02{
03    get
04    {
05        return Address ?? new Address();
06    }
07}
08public string Contacts
09{
10    get
11    {
12        return string.Join("; ",ContactNumbers);
13    }
14}

 

 

          Now you can easily use these properties in WebGrid. Here is the complete code of this example,

 

view sourceprint?
01@functions{
02        public class Employee
03        {
04            public Employee(){
05                ContactNumbers = new List<string>();
06            }
07            public string Name { get; set; }
08            public Address Address { get; set; }
09            public List<string> ContactNumbers { get; set; }
10            public Address NotNullableAddress
11            {
12                get
13                {
14                    return Address ?? new Address();
15                }
16            }
17            public string Contacts
18            {
19                get
20                {
21                    return string.Join("; ",ContactNumbers);
22                }
23            }
24        }
25        public class Address
26        {
27            public string City { get; set; }
28        }
29    }
30    @{
31        var myClasses = new List<Employee>{
32              new Employee   { Name="A" ,
33                  Address = new Address{ City="AA" },
34                  ContactNumbers = new List<string>{"021-216452","9231425651"}},
35              new Employee   { Name="C" ,
36                  Address = new Address{ City="CC" }},
37              new Employee   { Name="D" ,
38                  ContactNumbers = new List<string>{"045-14512125","21531212121"}}
39    };
40        var grid = new WebGrid(source: myClasses);
41    }
42    @grid.GetHtml(columns: grid.Columns(
43        grid.Column("NotNullableAddress.City", header: "City"),
44        grid.Column("Name"),
45        grid.Column("Contacts")))

        

 

        Summary:

          You can use WebGrid helper to show tabular data in ASP.NET MVC, ASP.NET Web Forms and  ASP.NET Web Pages. Using this helper, you can also show complex types in the grid. In this article, I showed you how you use complex types with WebGrid helper. Hopefully you will enjoy this article too.

 

No Comments