CSS and ASP.NET: How to Convert Numbers from your Database into a Human-Friendly Format

This is a short post to show how to make numerical data coming from your database more human readable. This means separating a large number by commas every three digits, adding two decimal places, and maybe even a dollar sign if you are displaying money amounts. The solution I show is a mix of CSS and ASP.NET.

Just to be specific, here’s what the conversion should look like:

Before: 1234567890 <– Not so easy to read
After:    1,234,567,890.00 <– Much clearer now

The nicely formatted ‘After’ version of the number is much friendlier to the eye and is undoubtedly more human-readable. Obviously this is desirable for various kinds of numeric output in apps you are putting together. Luckily there is a simple syntax in ASP.NET that will get you what you want quickly and easily. Specifically:

Format(Convert.ToDecimal(Eval("MonthlySpace")), "#,##0.00")

Depending on your needs, you can juggle around the above syntax, but this should give you a working idea of how to output nicely formatted numbers. In this case I’m going for currency notation with commas every three digits, and two decimal places.

Using CSS to Add a Dollar Sign:

Tip: If you also want to output a currency symbol with your number, you can either code this into the string you are outputting in code-behind, or you can use a CSS class to do it… for example, to get a gray dollar sign in front of your number you might use:

.MoneyInfo::before{
content:"$";
color:#606060;
}

or if you don’t want to see the dollar sign if there is no number, you’d use the CSS not(:empty) like so:

.MoneyInfo:not(:empty)::before{
content:"$";
color:#606060;
}

ASP.NET Example Code:

So for example, taking the ASP.NET formatting code I mentioned earlier, let’s say you have a .NET WebForms App with a GridView Control on it and you want to format some of the numbers in the GridView inline. Here’s a simple example of how you’d do this:

<asp:GridView>
<Columns><asp:TemplateField>
<asp:Label ID="lblNumberInGridView" runat="server" Text='<%# Format(Convert.ToDecimal(Eval("MyMoneyValue")), "#,##0.00") %>' CssClass="MoneyInfo"></asp:Label>

Conversely, if you were just wanting to add the formatted number to a label on your form, this is how you would add and format your number programmatically:

lblMoneyField.Text = String.Format("Money Total: ${0} ", Format(Convert.ToDecimal(strMoneyTotalFromDb), "#,##0.00"))

Use Bootstrap to Format your Form Fields Nicely

Ok, so all of this is really great for displaying nicely formatted numbers, but how about when you are putting together a form to input new numbers? Wouldn’t it be nice to have a cool effect where you glue a dollar sign into a textbox that will handle your money information? Bootstrap lets you do this easily using HTML markup like this:

<div class="input-group">
<i class="input-group-addon glyphicon glyphicon-usd"></i>
<input type="text" class="form-control" ID="addDollarSignHere" ext="100.00" />
</div>

Just to review: to get this to work, you have to add the input-group class to a div that surrounds the input field of your choice, then you can add a tag to add a dollar-sign glyphicon (but remember to also add it to the CSS class: input-group-addon. Then finally, add your input type = text form field to the mix and give it the CSS class form-control.

Awesome, now you have a nicely formatted Bootstrap form field with a dollar in front!

I hope this information has been helpful. Feel free to add a comment if you have any other tips you’d like to share.