Formatting Number Fields in an ASP.NET GridView

In Figure 1, we saw fields identified as telephone numbers, salaries, etc. that really didn’t look all that clear. In this section, you learn how to format those fields to make them more usable for your site visitors.

Format a Field as Currency

In Design View, click on the Gridview and click on the arrow pointing to the right to bring up the GridView Tasks pop-up. Then:

1. Choose Edit Columns.
2. Select the number from the Selected fields list.
3. Under BoundField > Behavior properties, set HtmlEncode to False.
4. Under BoundField > Data Properties, setDataFormatString to {0:C2}. (The C means Currency, and the 2 represents the number of positions after the decimal point.)
5. Click OK and preview in browser.

This is what the code looks like:

<asp:boundfield HtmlEncode="False" DataFormatString="{0:C2}" DataField="salary"
 SortExpression="salary" HeaderText="salary"> </asp:boundfield>

Format a Field as a Percent

The field in the Access database was defined as:

Field Size: Single

Format: Percent

Decimals Places: Auto

In Design View, click on the Gridview and click on the arrow pointing to the right to bring up the GridView Tasks pop-up. Then:

1. Choose Edit Columns.
2. Select the percent field from the Selected fields list.
3. Under BoundField > Behavior properties, set HtmlEncode to False.
4. Under BoundField > Data Properties, setDataFormatString to {0:P2}. (The P means Percent, and the 2 represents the number of positions after the decimal point.)
5. Click OK.

This is what the code looks like:

<asp:boundfield HtmlEncode="False" DataFormatString="{0:P2}" DataField="amount"
 SortExpression="amount" HeaderText="amount"> </asp:boundfield>

Formatting a Telephone Number Field in an ASP.NET GridView

This option can work if your telephone number is stored in a Text field in your Access Database. In this example, my field name is “homephone”.

In Design View, click on the Gridview and click on the arrow pointing to the right to bring up the GridView Tasks pop-up. Then:

1. Choose Edit Columns.
2. Select the field containing the phone number from the Selected Fields list.
3. Click the Convert this field into a TemplateField link.
4. Click OK.
5. Switch to Code View.
6. Find the generated code for the phone number field:

<asp:templatefield SortExpression="homephone" HeaderText="homephone">
<EditItemTemplate>
<asp:TextBox runat="server" Text='<%# Bind("homephone") %>' id="TextBox1">
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label runat="server" Text='<%# Bind("homephone") %>' id="Label1">
</asp:Label>
</ItemTemplate>
</asp:templatefield>

1. In the ItemTemplate node (highlighted above in blue), select the code highlighted in yellow and replace it with this code:

<%# String.Format("{0:(###) ###-####}",Convert.ToInt64(DataBinder.Eval
(Container.DataItem, "homephone")))%>

Page.IsValid and Validate

ASP.net ships with a couple of validator controls that allow you to determine whether the value of the input controls they are validating is valid.

Here is a simple example of a TextBox control with a RequiredFieldValidator attached and a Button control.

<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="MyValidationGroup"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
 ErrorMessage="This field is required!" ValidationGroup="MyValidationGroup"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" ValidationGroup="MyValidationGroup" />

 Note that all controls belong to the same ValidationGroup  – a new feature of ASP.net 2.0. With JavaScript turned on, when a user clicks the button, they will see an error message displayed next to the control being validated if they fail to fill in the TextBox. (One could also use a ValidationSummary control)

With JavaScript turned off, what may not be known is that, on the server side, even though the validators fire, it is left to the developer on how to use that information.

You may think you have built a secure application but a hacker could disable JavaScript and bypass *all* your validators! This is where the Page.Validate method and more importantly, the Page.IsValid property come in.

The Validate method is fired automatically by controls that have the CausesValidation property set to true. Note that the Button control’s CausesValidation property is true by default. The Validate method iterates through all enabled validation controls on the page and validates them. This event occurs after the Load event in the page lifecycle.

If the control that raised the event has a ValidationGroup specified, then only enabled validator controls that belong to the same ValidationGroup are validated by calling the Page.Validate(ValidationGroup) overload method. As mentioned previously, this is done automatically for controls that have the CausesValidation property set to true.

The Page.IsValid property tells you whether the validation succeeded or not. It can be called only after the Page.Validiate method is called. By using this property, you can add logic to your page to determine whether to proceed with the PostBack event or not. So, in addition to relying on client side validation, it is also important that you call Page.IsValid when handling the postback event. Here is what the code behind will look like:

protected void Button1_Click(object sender, EventArgs e) {

//Not required since the CausesValidation property of the Button control is true by default.
//Page.Validate("MyValidationGroup");

//Proceed only if the vaidation is successfull
if (!Page.IsValid) {
 return;
}

//Insert data into SQL

}

With the ASP.net declarative programming approach, the Page.IsValid method is something easy to forget.

Since you have reached this point, here is a simple quiz 😉 In the code below, what happens when Button2 is clicked?

<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="MyValidationGroup"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="This 
field is required!" ValidationGroup="MyValidationGroup"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" 
ValidationGroup="MyValidationGroup" CausesValidation="true" />
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server" ValidationGroup="AnotherValidationGroup"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2"
ErrorMessage="This 
field is required!" ValidationGroup="AnotherValidationGroup"></asp:RequiredFieldValidator>
<br />
<asp:Button ID="Button2" runat="server" Text="Button" ValidationGroup="AnotherValidationGroup" 
OnClick="Button2_Click" /> 

protected void Button2_Click(object sender, EventArgs e) {

    Page.Validate("MyValidationGroup");

    if (!Page.IsValid) {
         return;
    }

    Response.Write("Button was clicked at " + DateTime.Now.ToShortTimeString());
}