Format phone number using Eval

Formatting Phone Numbers in ASP.NET Using Eval

Learn how to dynamically format phone numbers within ASP.NET data-bound controls using the Eval method, ensuring consistent and readable output.

When working with ASP.NET web forms, especially with data-bound controls like GridView, Repeater, or DetailsView, you often need to display data in a user-friendly format. Phone numbers, in particular, benefit greatly from consistent formatting (e.g., (XXX) XXX-XXXX). This article explores how to achieve this using the Eval method directly within your ASP.NET markup, providing a clean and efficient solution.

Understanding the Eval Method

The Eval method is a powerful feature in ASP.NET data binding. It allows you to retrieve the value of a data field from the current data item and, crucially, apply formatting to it. The basic syntax is <%# Eval("FieldName", "FormatString") %>. The FormatString parameter is where you define how the data should be presented. While commonly used for dates and currencies, it can also be leveraged for custom formatting like phone numbers.

flowchart TD
    A[Data Source] --> B{Data-bound Control (e.g., GridView)}
    B --> C{ItemTemplate / FieldTemplate}
    C --> D["Eval(\"PhoneNumber\", \"{0:(000) 000-0000}\")"]
    D --> E[Formatted Output]

Data flow for formatting phone numbers using Eval

Basic Phone Number Formatting with Eval

For a standard 10-digit phone number, you can use a custom numeric format string directly within the Eval method. The (000) 000-0000 format string tells ASP.NET to display the number with parentheses around the first three digits, a space, and a hyphen after the next three digits. This assumes your phone number data is stored as a numeric type or a string that can be implicitly converted to a number.

<asp:Label ID="PhoneNumberLabel" runat="server" Text='<%# Eval("PhoneNumber", "{0:(000) 000-0000}") %>'></asp:Label>

Example of formatting a phone number in an ASP.NET Label control.

Handling Missing or Incomplete Phone Numbers

What if your PhoneNumber field might be null or contain fewer than 10 digits? Directly applying the format string might lead to errors or undesirable output. In such cases, you can use a conditional check within the Eval method, often by calling a helper function or using a ternary operator if the logic is simple enough. However, for more robust handling, a custom method is usually preferred.

public string FormatPhoneNumber(object phoneNumber)
{
    if (phoneNumber == null || string.IsNullOrWhiteSpace(phoneNumber.ToString()))
    {
        return "N/A"; // Or an empty string
    }

    string phoneString = phoneNumber.ToString();
    // Remove any non-digit characters if necessary
    phoneString = new string(phoneString.Where(char.IsDigit).ToArray());

    if (phoneString.Length == 10)
    {
        return string.Format("{0:(000) 000-0000}", Convert.ToInt64(phoneString));
    }
    else if (phoneString.Length == 7)
    {
        return string.Format("{0:000-0000}", Convert.ToInt64(phoneString));
    }
    else
    {
        return phoneString; // Return as is if not 7 or 10 digits
    }
}

A C# helper method to format phone numbers with null/length checks.

<asp:Label ID="FormattedPhoneLabel" runat="server" Text='<%# FormatPhoneNumber(Eval("PhoneNumber")) %>'></asp:Label>

Using the custom FormatPhoneNumber method in ASP.NET markup.