Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you present dynamic data on a webpage using the GridView or the DataList components, you can use formatting expressions to format data such as numbers and date time values. For this demonstration, I'll use the file Titles.aspx that's part of the chapter's Exercise Files. Let's start off taking a look at the page in Design View. In this page there is a DataList control that's bound to the SqlDataSource component at the bottom of the page and the SqlDataSource component is retrieving data from the server -side database's Titles table.
Now let's take a look at the source code. You will see that this version of the Item Template uses an ASP panel wrapped around the set of labels. Each of the labels is displaying a value from one column of the table. The title, the price and the publication date. Binding expressions are being passed into the text properties of each of the labels. Now I'll run the page in the browser so we can see the results so for. So in the initial display we are seeing the title of each item and then we are seeing the price in raw numeric format and also the data publication in raw date format.
In this first step, I'm going to show you how to apply formatting expressions in the binding expressions that are displaying that data. I will close the browser and I'll go back to the page in Source View. I'll look at the page in Full Screen pressing Alt+Shift+Enter and now I'll place the cursor inside the Eval function for the price. The Eval function and other function such as the Bind function can take more than a single argument. When you are passing the second argument you are saying how you want to format the value.
Here is the syntax that you use. Put in a comma and then a pair of quotes. Within the quotes put in pair of curly braces. Now you are going to pass in two parts of the expression. The first part indicates which item in the list you want to format. A value of zero means the item at index zero. In array terms we are talking about the first item in the array being passed in. Then put in a colon and then you are going to indicate what kind of formatting you want.
For numeric values, a string of f2 means that you wanted to be treated as a floating number with two characters after the decimal. So again the zero before the colon means the first item in the list, using zero based array offsets. That means item zero or item number one in human terms. And then after that is the string that indicates how you want to format the value. I will save my changes and press Ctrl+ F5 and then show you result that the numeric value has been formatted with two characters after the decimal regardless of whether the real data has those values.
So for example a raw number of 20 is displayed as 20.00. So to turn that value into a currency value, I'll go back to the code, I'll place the cursor inside the quotes but before the curly brace, and I'll just put in a currency symbol, the $ sign. I'll save my changes and run the page again and there is the currency value fully formatted. Now let's try a similar thing with the date time value, the pubdate. The pubdateLabel has a binding expression with the Eval function and it's outputting the value of the pubdate column for the current data item as a literal string.
Once again, I'll place the cursor inside the Eval function after the name of the column that I'm outputting and I'll add a comma then quote, braces and a closed quote. As with the price I'll be evaluating the value of the first item in the list, the pubdate. So I'll put in a value of zero, a colon and for this first example I'll use an uppercase D. The uppercase D means a long date and you can see the ASP.NET documentation for other known formats. I'll save my change and I'll run the page and you will see that the date is now displayed as a full date including the day of the week, Wednesday, January 01, 2003.
Now that's not really what I wanted; I wanted the short version of the date. So I'll close the browser. I'll return to the code and I'll change from an uppercase D to a lowercase D, which in ASP.NET means a short date. I'll run the page again and now the dynamic dates are displayed in Month-Day-Year format. Now I'm going to apply some visual formatting to the rest of the template. I'll close the browser and return to the code. First I'll handle the label that's displaying the title. This is the only time that this label is going to be displayed. So this is a circumstance where I'm going to use the properties of the Label control. I'll set Font-Bold="true" and I'll set Font-Italic to true as well. I'll save and run the page pressing Ctrl+S and then Ctrl+F5 and now I'm seeing the titles appear as Bold and Italic. Now the prices are output as simple literal strings.
So here I'll just use standard HTML mark up. I'll wrap each of the literal strings with the strong element. I'll add that to Price and then I'll do the same thing for Published. I'll save the change and once again, I'll run the page pressing Ctrl+F5 and now I'm seeing a display that makes a little more visual sense. If you want to create additional formatting you could then create a Cascading Style Sheet class, say it with a class name title div, and then you could apply that class to the ASP Panel container that's wrapping all of the content.
Another thing worth knowing about is that you can add something called an AlternatingItemTemplate. The AlternatingItemTemplate, which is also wrapped inside the DataList, determines how every other presentation of data is displayed. So you could create an AlternatingItemTemplate that repeats this output, but for example sets a background color on that panel. So that's a look at how to apply formatting to dynamic data that's retrieved from the server. There are a lot of other options than the simple formatting expressions I showed here and again, if you want some more options take a look at the ASP.NET documentation for all of the variations in formatting strings that are available.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101672 Viewers
61 Video lessons · 88422 Viewers
71 Video lessons · 72266 Viewers
56 Video lessons · 103990 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.