ASP.NET 4.5 – Control display format of Data in Model Binding

I have written few posts on ASP.NET 4.5. One of the best feature I liked that is Model Binding that is almost similar to ASP.NET MVC. This is another feature of Mode binding in ASP.NET 4.5. For better understanding and usage, you should have some knowledge on this basic feature . You can refer my earlier posts on model binding at the links below

Strongly Typed Data Controls and Modal Binding in ASP.NET 4.5- Part 1

Strongly Typed Data Controls and Modal Binding in ASP.NET 4.5- Part 2

Now if your model is getting populated using entity framework or in any other way from the database then normally we apply some kind of formatting before displaying the data on the User Interface. Because the way data is stored in database and the way it is displayed on UI is quite different. We transform the data in a friendly, easy and some time in their Locale before displaying. Like say I have a number 100000 stored in database but we display it is 100,000 or displaying the number in specific format. So let’s take an example

I have created a class Employee as

public class Employee
{
    [Required()]
    public int Id { get; set; }
    [Required(), StringLength(30)]
    public string FirstName { get; set; }
    [Required(), StringLength(30)]
    public string Lastname { get; set; }
    [Required(), StringLength(30)]
    public DateTime DateJoined { get; set; }
    [Required(), Range(5, 1000)]
    public int Salary { get; set; }
}

Now let’s see the aspx page

    <div style="font-family:Verdana; font-size:small">
     <asp:DetailsView ID="detailsViewEmployee" runat="server" SelectMethod="GetEmployees"
       InsertMethod="InsertEmployee"  UpdateMethod="UpdateEmployee" AutoGenerateInsertButton="true"
       AutoGenerateEditButton="true" ItemType="Employee" ></asp:DetailsView>
     <asp:ValidationSummary ID="validationSummary" runat="server" ShowModelStateErrors="true"/>
    </div>

Here I am using details view and provided the ItemType as Employee, SelectMethod, InsertMethod and UpdateEmployee methods. The code behind of the file is as

    List<Employee> employees = new List<Employee>();
    protected void Page_Load(object sender, EventArgs e)
    {
        Employee emp = new Employee()
        {
            Id = 1001,
            FirstName = "Brij",
            Lastname = "Mishra",
            Salary = 100000,
            DateJoined = new DateTime(2012, 12, 12)
        };

        employees.Add(emp);
    }

    public IQueryable<Employee> GetEmployees()
    {
        return employees.AsQueryable();
    }
    public void InsertEmployee(Employee e)
    {
        if (ModelState.IsValid)
        {
            employees.Add(e);
        }
    }
    public void UpdateEmployee(Employee e)
    {
        // Update the employee
    }

Now let’s run the code

WithoutDIf you see the encircled area in above screenshot, one is date format and other is a number. One may want to display it in some friendly format. One way to transform the data before displaying and other is to use DisplayFormat Attribute. DisplayAttribute is applied on model so here I am going to apply it on DateJoined property of Employee class asDateJoinedhere we have added the DisplayFormat attribue and provided DataFormatString. This string is used to format the string before displaying it. Let’s add DisplayFormat attribute to salary property as

salaryHere also, We provided a different format string for number. Now let’s run it

formattedNow if you see that Date and number is properly formatted. We just required to add one attribute and provide the format string that is used to format the data.

DisplayFormat attribute provided some more very useful properties. Few of them

  • ApplyFormatInEditMode- Provide this property in attribute and set it true. It will format the data when the form will be in edit mode as well else you’ll loose the formatting in edit mode.
  • NullDisplayText- If any property is null and you want to show some default text then it is very useful. Just provide the string and it’ll be displayed if that property is null
  • ConvertEmptyStringToNull – If you want to convert empty string treated as null then set it true.

Hope you have enjoyed the post and you’ll use the power of DisplayFormat attribute in your ASP.NET 4.5 projects.

Thanks,
Brij

Advertisement

One thought on “ASP.NET 4.5 – Control display format of Data in Model Binding

  1. Pingback: TechNet Blogs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s