ASP.NET Tutorial 6: Outputting Data to the Webpage

by Matt on 2010/01/13 at 12:24 pm

The Toolbox panel can usually be found on the left-most side of the Visual Studio window (unless you’ve relocated it). If it’s not visible, you can bring it back by selecting “View” from the menu, then selecting “Toolbox” in the drop-down list. You can also press Ctrl+W+X on the keyboard to open it up.

You should already be familiar enough with X/HTML to know what an attribute is. If not, then here’s the short-hit:
An attribute is any additional information stored inside an element’s opening tag. An attribute does not necessarily need to have a value, but they almost always do. For instance if we had this code:

42

We can see that the span has an id attribute with a value of "iMembers".

.NET has a useful feature called Master Pages. These are essentially template files that contain the basic HTML structure (header,footer,etc) for any number of pages on your website. This way, your aspx pages simply need to contain the body content only… and if you have the master page attached, the header, footer, and other styling in the Master Page simply falls into place around the content.

We’ll discuss Master Pages in a lot more detail in later tutorials.

Prerequisites: ASP.NET Tutorial 5: Conditionals 2 ( switch constructs )

This article explains the three primary methods of outputting data onto a webpage from the code-behind class: Labels, Literals, and the Response.Write() method. This article is also useful for gaining a basic understanding of how .NET handles communication between elements on the ASPX webpage and the C# code-behind class.

> Labels vs. Literals

This section introduces the two elements that are generally used to display dynamic data on a webpage.

There are 3 primary methods of outputting data onto a webpage from a code behind class. Of those three, the two methods you will almost always use are:

Setting the text property of a <asp:Label> element/object on the aspx page.
Setting the text property of a <asp:Literal> element/object on the aspx page.

Which of the above elements you use depends entirely on how you want your HTML to render out. The major difference between the two elements is this:

• Labels are automatically wrapped in a element. The span is given an id attribute that is the same as the id you set for the Label element.
• Literals are rendered directly to the webpage as-is. No additional HTML is generated.

The following tables show the aspx Label and Literal elements, as well as what they render out to when converted to HTML.

(ASPX/HTML) Label Code Example

ASPX Code:

<asp:Label ID="lblName" runat="server">Matt VanAndel</asp:Label>

Rendered HTML:

Matt VanAndel

(ASPX/HTML) Literal Code Example

ASPX Code:

<asp:Label ID="litName" runat="server">Matt VanAndel</asp:Label>

Rendered HTML:

Matt VanAndel

Both of these aspx elements can be found in Visual Studio’s Toolbox panel. You can add them to your aspx page by either typing them out manually, or by dragging them from your Toolbox onto the webpage (in either Source or Design views), or by double-clicking on them in the Toolbox (which will insert them on the page wherever your cursor is located).

Tip: Labels and Literals both have a Text attribute by default. You can safely delete the Text attribute and add your default text/html between the opening and closing tags of the element to modify it’s text (as in the above ASPX/HTML examples).

Note: There are two attributes that are absolutely required by ANY <asp:> element. These are are runat and id.

runat="server" tells the server that this code needs to be processed into appropriate HTML before being displayed on the page. If this attribute is left out, then the entire <asp:> element will be rendered onto the webpage as if it were plain X/HTML (ie: it will be ignored by the server’s code parser).

The id attribute is used to identify the element to the server (and is also what you use to interact with the element from the code-behind class). The id must always be unique on the page.

> Programmatically Adding Content (C#)

This section discusses how to interact with Labels & Literals via the code-behind class.

Working with Labels and Literals on a webpage is as simple as working with a string variable. To change the content of any Label or Literal, simply access it from the code-behind class using it’s ID, and set it’s Text property as you would set a string variable.

For instance, let’s say we have the following Label code on our ASPX webpage:

(ASPX) Label Example:

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

If we changed nothing in the above example, it would render out as this HTML:

(HTML) Above Example Rendered as HTML:

<span id="Label1">Label</span>

But what if we wanted to dynamically change the above span to something else? To to this, we simply add the following code withing the code-behind class’s Page_Load() method.

(C#) Setting the Labels Text in C#:

Label1.Text = "Bob Marley";

We simply reference the ID of the object we want to change (notice how our Label in the first example has an ID of “Label1″?), and then set the Text property of that object. So long as you know the ID, Visual Studio’s Intellisense feature will show you what properties are available for that object when you type the ID followed by period. Now, the ASPX in our first example will render out as:

(HTML) Above Example Rendered as HTML (updated):

<span id="Label1">Bob Marley</span>

It’s really that simple – and it doesn’t matter if you’re using Literals or Labels, the technique is exactly the same for each.

Note: You can put HTML into the Text property for any Label or Literal, you’re not just limited to plain-text. For instance, if you wanted to include a bold tag in your output, you might give a Literal’s Text property a value of Hello World!. This would render as Hello World! on your web-page – bold text and all!

> The Response.Write() Method

This section discusses the Reponse.Write() method, it’s uses and it’s drawbacks.

In addition to Labels and Literals, there is one other way to put content onto a webpage that doesn’t require any elements at all to be on the ASPX webpage. This is .NET’s Response.Write() method. I will state in advance that it is highly unlikely that you would ever want to use this method over the one described above, but I’m including it for completions-sake (particularly because I see a lot of code examples online that use this, sloppy though it is).

Response.Write() takes a single parameter, usually a string, and then outputs that string directly onto the webpage. For instance, if you added Response.Write("Hello world!"); within the code-behind class’s Page_Load() method, then the text “Hello world!” would rendered onto the webpage before any other HTML.

This is the biggest drawback of outputting content to the page using Response.Write() – it simply places the content directly onto the page before any other rendering takes place (including Master Pages, HTML, etc). Furthermore, it means you can’t use any advanced string formatting on your output since it’s simply written to the page and forgotten (instead of being continually accessible/changeable like the Text properties of Labels and Literals).

The one place where it does become useful is when you an aspx file with no other content, and you want to quickly output raw data that doesn’t need any string manipulation. For instance, you might want to dynamically create a CSV file. In this case, using Response.Write() could be marginally more simple than working with a Label or (more likely in this case) a Literal.

My point is this: Using a Literal is almost always better than using Response.Write()… but you will probably come across this from time to time when scouring the web for code examples, so it’s important for you to know what it is. If you must use it yourself, please do so sparingly.

Our next article will introduce .NET’s basic form handling. In the mean time, I recommend you play around with Labels and Literals a bit to get used to the way that .NET handles communication between ASPX elements and C# code.

• Posted under Tutorials and tagged with @Complexity: Beginner, ASP.NET, ASPX, C#

ASP.NET Tutorial 6: Outputting Data to the Webpage

> Labels vs. Literals

> Programmatically Adding Content (C#)

> The Response.Write() Method

No Comments

Post a Comment