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.
1 thought on “CSS and ASP.NET: How to Convert Numbers from your Database into a Human-Friendly Format”