Working With Client ID In ASP.NET 4

ASP.NET 4 allows developers to customize Client Id which gets generated by ASP.NET. Up until now Client Id generated by ASP.NET has been ummm just plain ugly. Other than aesthetics they are also hard to work with in client side scripts. ASP.NET solves this issue to a degree by providing ClientIDMode property. In this post we will look at different ways to work with this new feature of ASP.NET 4.

ClientIDMode can be set at Page level or at Control level. Let’s follow with an example of a GridView control. We will set it’s ClientIdMode property to all available options and view the markup. We will bind our GridView to a collection of cities. A city class looks like this.

public class City
{
  public string Name { get; set; }
  public string Country { get; set; }
}

The collection itself can be initialized using this code.

List<City> cities =
        new List<City>
        {
            new City{ Name = "Sydney", Country = "Australia" },
            new City{ Name = "New York", Country = "USA" },
            new City{ Name = "Paris", Country = "France" },
            new City{ Name = "Milan", Country = "Spain" },
            new City{ Name = "Melbourne", Country = "Australia" },
            new City{ Name = "Auckland", Country = "New Zealand" },
            new City{ Name = "Tokyo", Country = "Japan" },
            new City{ Name = "New Delhi", Country = "India" },
            new City{ Name = "Hobart", Country = "Australia" }
        };

Source for our GridView looks like this.

<asp:GridView runat="server" ID="gridViewCities" AutoGenerateColumns="False">
  <Columns>
    <asp:TemplateField>
      <ItemTemplate>
        <asp:Label runat="server" ID="Label1" Text='<%# Bind("Name") %>' />
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
      <ItemTemplate>
        <asp:Label runat="server" ID="Label2" Text='<%# Bind("Country") %>' />
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

ClientIDMode = “AutoID”

Using this mode will generate the IDs as it has in earlier versions of ASP.NET.

<asp:GridView
        runat="server"
        ID="gridViewCities"
        AutoGenerateColumns="False"
        ClientIDMode="AutoID">

HTML generated by AutoID (showing only relevant part).

ClientIDMode = “Static”

Static mode outputs the same ID in HTML as specified in ASP.NET source.

<asp:GridView
        runat="server"
        ID="gridViewCities"
        AutoGenerateColumns="False"
        ClientIDMode="Static">

Static Mode is not the best for controls such as GridView or any other data control which displays lists of data. As you can see above that all span tags have same IDs. Static Mode is best to be used with other common controls or User Controls.

ClientIDMode = “Predictable”

Predictable mode concatenates the ID of parent control with the bound value supplied by assigning ClientIDRowSuffix property.

<asp:GridView
        runat="server"
        ID="gridViewCities"
        AutoGenerateColumns="False"
        ClientIDMode="Predictable"
        ClientIDRowSuffix="Name">

Here we see that our span elements have been named by concatenating the name of GridView + value of Name property. Rather than setting ClientIDRowSuffix to Name property a better candidate would have been an ID property which could be some sort of unique field. But you get the idea, right?

ClientIDMode = “Inherit”

Inherit is the default mode for all controls. Assigning this mode a control will use the same setting as its parent control. This gives us an idea that we can have different settings for parent and children. Here we are setting ClientIDMode for our first label to be static while the GridView is using AutoID.

<asp:GridView runat="server" ID="gridViewCities" AutoGenerateColumns="False" 

  ClientIDMode="AutoID">
  <Columns>
    <asp:TemplateField>
      <ItemTemplate>
        <asp:Label runat="server" ID="Label1" Text='<%# Bind("Name") %>' 

          ClientIDMode="Static" />
      </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
      <ItemTemplate>
        <asp:Label runat="server" ID="Label2" Text='<%# Bind("Country") %>' />
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

We see that our first span uses static client ID but the second span uses inherited scheme for client ID.

Conclusion

In this post we saw a new feature of ASP.NET 4 which let’s you customize IDs generated in HTML elements. This feature is useful when we need to access controls from client scripts. ASP.NET has been lacking such a feature. Not any more.