Adding MetaKeyword and MetaDescription Using Page object

Meta keywords and description are most important components of a page when we want to make it search engine friendly. Every search engine will look for these tags to know more information of the page contents. ASP.Net 2.0 introduced a new feature where one can add these tags from the code behind using HtmlMeta class. It would have been better if we are able to do this through Page directive (Page class).  ASP.Net 4.0 added 2 new properties on the Page object to let you define the Meta keywords and Description.

Refer the code below,

protected void Page_Load(object sender, EventArgs e)

    {

        Page.MetaKeywords = "asp.net,C#";

        Page.MetaDescription = "This is an asp.net site that hosts asp.net tutorials.";

    }

OR

<%@ Page Language="C#" AutoEventWireup="true" MetaKeywords="asp.net,C#" MetaDescription="This is an asp.net site that hosts asp.net tutorials" CodeFile="Default.aspx.cs" Inherits="_Default" %>

The above code will add the meta tags in the output html.

Note

We can still do this in earlier version by defining a BasePage class. Read more here.

More Control on Controls ViewState

ViewState is one of the important factors if we start looking at improving the performance our asp.net site.  Till ASP.Net 3.x, we have EnableViewState property both at Page level and server control level to control the view state. Disabling the ViewState at page level will disable the viewstate to all the page controls. In order to improve the performance, one need to switch off the viewstate for individual control for which saving the viewstate is not necessary and hence disabling viewstate at page level is not a suitable option.  To overcome this difficulty, asp.net 4.0 added a new property to Page object and controls called ViewStateMode.

This property can take 3 values,

1.      Enabled

This value will enable the view state. This is the default value for the Page object.

2.      Disabled

This value will disable the viewstate

3.      Inherit

      This value will make the control to inherit the setting of the parent. This is the default value for a control.

With this property, we can disable the viewstate for the page and enable it for the control if only required.

Consider the following code,

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ViewStateTest.aspx.cs" ViewStateMode="Disabled" Inherits="ViewStateTest" %>

    <form id="form1" runat="server">

    <div>

        <asp:Label ID="Label1" runat="server" ViewStateMode="Enabled" Text="Default Text"></asp:Label>

        <br />

         <asp:Label ID="Label2" runat="server" Text="Default Text"></asp:Label><asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

     </div>

    </form>

CodeBehind

protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            Label1.Text = "Text Assigned in CodeBehind";

            Label2.Text = "Text Assigned in CodeBehind";          

        }

    }

When the page executed we will get the following output,

Text Assigned in CodeBehind

Text Assigned in CodeBehind

When the button is clicked,

Text Assigned in CodeBehind

Default Text

Since, the viewstate is disabled at page level (Page object) and the viewstate is enabled for “Label1” we will get the above output on Button click. Please note that if we have not set the value, the default will be “inherit” (for Label2).

Note

If we disabled the viewstate through EnableViewState property, setting any values for ViewStateMode property will make no impact.

ClientID Generation for ASP.Net Controls

In order to access a server control from a client side script, a developer will require getting its client id. Predicting the ClientID of any control that is packed inside a parent like UserControls, MasterPage or any DataBound controls is a challenging task till day. For example, if we have 2 TextBox control inside a page that have an associated MasterPage then the ClientID will be similar to,

<input name="ctl00$ContentPlaceHolder1$TextBox2" type="text" id="ctl00_ContentPlaceHolder1_TextBox2" />

<input name="ctl00$ContentPlaceHolder1$TextBox3" type="text" id="ctl00_ContentPlaceHolder1_TextBox3" />

This is done to make the ID of the control unique in the page.

In earlier versions for asp.net, we can register a server side hidden control which can hold the ClientID of the server control to access it from client side. Read more here.

ASP.Net 4.0 addresses this difficulty by providing a new property called ClientIDMode for every controls and Page object. We can also set the property in configuration files.

This property will take the following 4 values,

1.      Static

Setting this value will make the ClientID same as the ID. It will not concatenate ID of the parent naming containers.

2.      Predictable

This will be useful to predict the ClientID of child controls in data controls. Setting this property will prevent the “ctlxxx” prefix in the ClientID. We will see more about this value later in this section.

3.      Legacy

This value will make the ClientID generation same as earlier versions of ASP.Net

4.      Inherit

            This value will make the control to inherit the parent control’s setting. This is the default value for this property.

For example,

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" ClientIDMode="Static"  AutoEventWireup="true" CodeFile="ClientIDs.aspx.cs" Inherits="Default2" %>

This setting will make all the page controls to have ClientID same as ID. For example, if we have 2 Textbox control, the output will be similar to,

<input name="ctl00$ContentPlaceHolder1$TextBox2" type="text" id="TextBox2" />

<input name="ctl00$ContentPlaceHolder1$TextBox3" type="text" id="TextBox3" />

To set this property in Web.Config file/Machine.config file,

<pages clientIDMode="Static"></pages>

The above setting should be inside <System.Web> section.

Child Control’s ClientID in Data Control

For example, if we have child controls inside a ListView control the ClientID will be generated like below by default.

<div id="ListView1_itemPlaceholderContainer" style="font-family: Verdana, Arial, Helvetica, sans-serif;">               

            <span style="background-color: #DCDCDC;color: #000000;">EmpNo:

            <span id="ListView1_ctrl0_EmpNoLabel">1</span>

            <br />

            EmpName:

            <span id="ListView1_ctrl0_EmpNameLabel">Satheesh</span>

            <br />

            Address:

            <span id="ListView1_ctrl0_AddressLabel">2n Cross</span>

            <br />

            City:

            <span id="ListView1_ctrl0_CityLabel">Bangalore</span>

            <br />

            Country:

            <span id="ListView1_ctrl0_CountryLabel">India</span>

            <br />

Because the ListView control has Label control to display data in each column of every row we have SPAN tag with ClientID’s generated.

To make this ID’s predictable from clientside; we can set the ClientIDMode of the ListView control to "Predictable" and ClientIDRowSuffix to one or more number of the columns from the database.  Multiple column names should be a comma separated value. Please note that Repeater control will not support ClientIDRowSuffix property.

Consider the below,

<asp:ListView ID="ListView1" runat="server"

        DataSourceID="SqlDataSource1" ClientIDMode="Predictable" ClientIDRowSuffix="EmpName">

The above setting will remove the prefix “ctlxx” and will append the value of the column specified in ClientIDRowSuffix. This will generate the ClientID’s like,

<div id="ListView1_itemPlaceholderContainer" style="font-family: Verdana, Arial, Helvetica, sans-serif;">

            <span style="background-color: #FFF8DC;">EmpNo:

            <span id="ListView1_EmpNoLabel_Arun">2</span>

            <br />

            EmpName:

            <span id="ListView1_EmpNameLabel_Arun">Arun</span>

            <br />

            Address:

            <span id="ListView1_AddressLabel_Arun">3rd Cross</span>

            <br />

            City:

            <span id="ListView1_CityLabel_Arun">Bangalore</span>

            <br />

            Country:

            <span id="ListView1_CountryLabel_Arun">US</span>

The above HTML is for single row. Next row will have the next employee’s name appended at the end.