ASP.NET Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 300,303 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,117 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Using the Standard Controls - ASP.net/C#

Using the Standard Controls - ASP.net/C#, Displaying, Accepting, and Submitting Data

Options

pr4y

31 Jan, 2009 - 11:44 PM

Post #1

Using the Standard Controls - ASP.net/C#
Displaying, Accepting, Submitting, and Organizing Data

The ASP.net framework has two main controls used to display data on a web page. They are the Label and Literal controls. The Label control displays text, along with several other additional formatting properties, while Literal displays plain-text.

For this tutorial, I will be focusing on using C# as the server side script. All pre-processing script must be executed before anything else (as with any other language), so in this case we must prepare our script for processing.

asp


<%@ Page Language="C#" %>
<script runat="server">

	void Page_Load()
	{
		' Some C# script
	}

</script>
<html>

Now that we know where to start coding, lets get into some basic dynamic page content.

Using the Label Control

In ASP.net, whenever you need to modify text in a page dynamically, you can use the Label control. For instance, if we wanted to display the current time, we would code the following:

asp


<%@ Page Language="C#" %>
<script runat="server">

	void Page_Load()
	{
		lblTime.Text = DateTime.Now.ToString("T");
	}

</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="1" runat="server">
	<title>ASP.net / C# Tutorial</title>
</head>
<body>
	<form id="1" runat="server">
	<div>
	<asp:Label
		id="lblTime"
		Runat="server" />
	</div>
	</form>
</body>
</html>

As I mentioned previously, the Label control has an array of physical properties to work with. Here are a few examples:

asp


<%@ Page Language="C#" %>
<script runat="server">

	void Page_Load()
	{
		lblTime.Text = DateTime.Now.ToString("T");
	}

</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="1" runat="server">
	<title>ASP.net / C# Tutorial</title>
</head>
<body>
	<form id="1" runat="server">
	<div>
	<asp:Label
		id="lblTime"
		Runat="server"
		BackColor="#000000"
		ForeColor="#666666"
		BorderColor="#424242"
		BorderStyle="Dotted"
		BorderWidth="4px"
		CssClass="/styles/none_yet.css"
		Font="Arial Black" />
	</div>
	</form>
</body>
</html>

As you can see, the properties of an ASP.net control are similar to those in HTML. Not much difference here, just a bit of new syntax to learn!

Using the Literal control

The Literal control is in many ways similar to the Label control. Unlike the Label control, Literal does not render its content inside of a <span> tag. What are the benefits of this? When we need to use an ASP.net control as plaintext (ex: attributes, values, properties... anything non-graphic), we use Literal controls.

asp


<%@ Page Language="C#" %>
<script runat="server">

	void Page_Load()
	{
		ltlTitle.Text = DateTime.Now.ToString("T");
	}

</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="1" runat="server">
	<title><asp:Literal id="ltlTitle" Runat="server" /></title>
</head>
<body>
	<form id="1" runat="server">
	<div>
		<h1>Check the Title of this page.</h1><br>
		<h3>Now we see when to use a Literal.</h3>
	</div>
	</form>
</body>
</html>

The Literal control does not support any of the standard formatting properties, such as BackColor or CssClass or BorderStyle... Instead, Literal only accepts one property, the Mode property.

- PassThrough - Displays the contents of the control without encoding.
- Encode - Displays the contents of the control after HTML encoding the content.
- Transform - Displays the contents of the control after stripping markup that is not supported by the requesting device.

We do not need to go into great detail about these properties, but I felt as though a reference was due in place of giving the Literal control some more depth.

Accepting User Input

Just as with any other web language, ASP has the ability to accept and send packets of data. So far, I've shown you how to create some basic ASP controls and display information, and we are now ready to take it to the next step. Using what I've taught you so far about basic control structures, we will create a form to accept user input!

The first part of this script that we need to figure out, is how we want to accept the data. Since I've taught you how to use Label controls, we will use them to store information sent to the server. And where do we want to process data ON the server? In the Server script!

In this example, I will teach you the basics of accepting user input from a web form. We are going to ask the user a question, and store the information in temporary memory (In this case, a Label control).

asp


<%@ Page Language="C#" %>
<script runat="server">

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        // We first need our Submit button control to handle
	// the actual sending of our data.  Our code that will
	// store the data must happen when the button is clicked
	// so we will put our code here.
    } 

</script>

Now that we have our button structure, lets look behind the code of actually accepting the data:

CODE

        if (rdCS.Checked)
            lblResult.Text = "C#";
        if (rdJ.Checked)
            lblResult.Text = "Java";
        if (rdP.Checked)
            lblResult.Text = "PHP";

Here we have our Radio Buttons, and some information about what they represent. In this case we are asking the server if the radio button has been checked, and if it has, we will store the information regarding the users response. Simple enough, now we need to put the page together.

Using our basic knowledge of a few ASP.net controls, it is time to add another one. I've already mentioned the RadioBox, but there is a chance you might not know what this is. A radio box is the little tiny circle button that you can check off on some forms. They are sometimes used to mark your response to a multiple choice question.

A Radio Box has the same structure as any other control, so without any more delay lets start setting up the page for rendering.

asp


<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        if (rdCS.Checked)
            lblResult.Text = "C#";
        if (rdJ.Checked)
            lblResult.Text = "Java";
        if (rdP.Checked)
            lblResult.Text = "PHP";
    }
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>ASP.net/C# Tutorial</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>What is your favorite Programming Language?</h1>
        
        <ul>
            <li>
            <asp:RadioButton
                id="rdCS"
                text="C#"
                GroupName="Source"
                Runat="server" />
            </li>
            <li>
            <asp:RadioButton
                id="rdJ"
                text="Java"
                GroupName="Source"
                Runat="server" />
            </li>
            <li>
            <asp:RadioButton
                id="rdP"
                text="PHP"
                GroupName="Source"
                Runat="server" />
            </li>
        </ul>
        
        <asp:Button
            id="btnSubmit"
            Text="Submit"
            Runat="server" OnClick="btnSubmit_Click" />
            
        <hr />
        
        <h3>Result:</h3><br />
        
        <asp:Label
            id="lblResult"
            Runat="server" />
            
    </div>
    </form>
</body>
</html>

One thing you should note is the RadioButton control property, GroupName="Source". You must know that RadioButton operate in groups. Only one RadioButton may be selected for each group, so in this circumstance we must keep the same GroupName.

Submitting and Organizing Data

Okay, we've come a long way so far... and we just have a little bit more to go. Now that we understand how to accept user data, create ASP.net controls, and design the C# backend of our script... we are on to the next level. Submitting data in a sense is very similar to accepting user data. The only difference is that instead of the script asking the user what it wants, the user tells the script what they want.

For this example, we will demonstrate organization of Data by creating functions that sort the data in an Ascending or Descending pattern. We will also cover how to submit data to the server, and display it as a member of the rest of the data collection.

First things first, lets get our header on the file:

asp


<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>

Notice how we added a second line to our code. This line tells the page that the system needs to include some extra processing information to be able to work properly. More specifically, System.Collections.Generic is the required header to use the next thing we must complete, which is our list of data.

asp


<script runat="server">

    private List<String> things = new List<String>();
    
    void Page_Load()
    {
        things.Add("aaa");
        things.Add("bbb");
        things.Add("ccc");
        things.Add("ddd");
        things.Add("eee");
        things.Add("fff");
    }

    protected void SortList_Command(object sender, CommandEventArgs e)
    {
        if (e.CommandName == "SortList")
        {
            switch (e.CommandArgument.ToString())
            {
                case "ASC":
                    things.Sort(SortASC);
                    break;
                case "DESC":
                    things.Sort(SortDESC);
                    break;
            }
        }
    }
    
    protected void AddData_Command(object sender, CommandEventArgs e)
    {
        if (e.CommandName == "AddData")
        {
            things.Add(txtAdd.Text);
        }
    }

    void Page_PreRender()
    {
        lstThings.DataSource = things;
        lstThings.DataBind();
    }

    int SortASC(string x, string y)
    {
        return String.Compare(x, y);
    }

    int SortDESC(string x, string y)
    {
        return String.Compare(x, y) * -1;
    }
    
</script>

Now, lets break that down so you can better understand what is going on.

The first thing we want to do is tell the page that we have a list of data, and we need to add things to it.

csharp



    private List<String> things = new List<String>();

    void Page_Load()
    {
        things.Add("aaa");
        things.Add("bbb");
        things.Add("ccc");
        things.Add("ddd");
        things.Add("eee");
        things.Add("fff");
    }

The next step is to create a Command that will determine which function to call during data organization.

csharp


    protected void SortList_Command(object sender, CommandEventArgs e)
    {
        if (e.CommandName == "SortList")
        {
            switch (e.CommandArgument.ToString())
            {
                case "ASC":
                    things.Sort(SortASC);
                    break;
                case "DESC":
                    things.Sort(SortDESC);
                    break;
            }
        }
    }

Now just as the previous Command, we need to declare our button's actions to ADD DATA to our list.

csharp


    protected void AddData_Command(object sender, CommandEventArgs e)
    {
        if (e.CommandName == "AddData")
        {
            things.Add(txtAdd.Text);
        }
    }

The next part of our script is a required part to make things work correctly. The function void Page_PreRender() tells the page right before it starts processing that our lstThings.DataSource = things;. Remember creating the private List<string> things = new List<string>();? This is where we tell the page that our list of strings is going to be used in our Bulleted List.

csharp


    void Page_PreRender()
    {
        lstThings.DataSource = things;
        lstThings.DataBind();
    }

And last but not least, we have our sort functions. The SortList_Command was designed to handle both button requests for DESC and ASC order... but now that we know which order we want, we need to know what to do. This is where our functions come in handy. All we have here is basic String.Compare statements that compare two variables and return the given sequence order.

csharp


    int SortASC(string x, string y)
    {
        return String.Compare(x, y);
    }

    int SortDESC(string x, string y)
    {
        return String.Compare(x, y) * -1;
    }

Now that we have our Server Script complete, we need to create our actual ASP web layout.

asp


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>ASP.net/C# Tutorial</title>
</head>
<body>
    <form id="form1" runat="server" ondblclick="return form1_ondblclick()">
    <div>
        <h1>Organizing and Submitting Data</h1>
        
        <asp:Button
            id="btnSubASC"
            Text="Sort ASC"
            Runat="server"
            CommandName="SortList"
            CommandArgument="ASC"
            OnCommand="SortList_Command" />
            
        <asp:Button
            id="btnSubDESC"
            Text="Sort DESC"
            Runat="server"
            CommandName="SortList"
            CommandArgument="DESC"
            OnCommand="SortList_Command" /> 
        
        <h3>Data:</h3>
        
        <asp:BulletedList
            id="lstThings"
            Runat="server" />
            
        <br />
        
        <asp:TextBox
            id="txtAdd"
            Runat="server" />
        
        <asp:Button
            id="btnAdd"
            Text="Add Data"
            Runat="server"
            CommandName="AddData"
            CommandArgument="Add"
            OnCommand="AddData_Command" />
            
    </div>
    </form>
</body>
</html>

As a finished product, we should end up with:

asp


<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    private List<String> things = new List<String>();
    
    void Page_Load()
    {
        things.Add("aaa");
        things.Add("bbb");
        things.Add("ccc");
        things.Add("ddd");
        things.Add("eee");
        things.Add("fff");
    }

    protected void SortList_Command(object sender, CommandEventArgs e)
    {
        if (e.CommandName == "SortList")
        {
            switch (e.CommandArgument.ToString())
            {
                case "ASC":
                    things.Sort(SortASC);
                    break;
                case "DESC":
                    things.Sort(SortDESC);
                    break;
            }
        }
    }
    
    protected void AddData_Command(object sender, CommandEventArgs e)
    {
        if (e.CommandName == "AddData")
        {
            things.Add(txtAdd.Text);
        }
    }

    void Page_PreRender()
    {
        lstThings.DataSource = things;
        lstThings.DataBind();
    }

    int SortASC(string x, string y)
    {
        return String.Compare(x, y);
    }

    int SortDESC(string x, string y)
    {
        return String.Compare(x, y) * -1;
    }
    
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>ASP.net/C# Tutorial</title>
</head>
<body>
    <form id="form1" runat="server" ondblclick="return form1_ondblclick()">
    <div>
        <h1>Organizing and Submitting Data</h1>
        
        <asp:Button
            id="btnSubASC"
            Text="Sort ASC"
            Runat="server"
            CommandName="SortList"
            CommandArgument="ASC"
            OnCommand="SortList_Command" />
            
        <asp:Button
            id="btnSubDESC"
            Text="Sort DESC"
            Runat="server"
            CommandName="SortList"
            CommandArgument="DESC"
            OnCommand="SortList_Command" /> 
        
        <h3>Data:</h3>
        
        <asp:BulletedList
            id="lstThings"
            Runat="server" />
            
        <br />
        
        <asp:TextBox
            id="txtAdd"
            Runat="server" />
        
        <asp:Button
            id="btnAdd"
            Text="Add Data"
            Runat="server"
            CommandName="AddData"
            CommandArgument="Add"
            OnCommand="AddData_Command" />
            
    </div>
    </form>
</body>
</html>

That is it for today! I hope you enjoyed learning a thing or two about C# and ASP.net. I'll be working on another tutorial for C# very soon on how to make a working Scientific Calculator for use on a web page (Using ASP.net).

If you have any questions or concerns AT ALL... Please feel free to comment or send me a Private Message!

Register to Make This Ad Go Away!

pr4y

2 Feb, 2009 - 04:07 PM

Post #2

If anybody has any questions about how to do these same procedures using a language other than C#, I can help you out with that. I chose C# because that is the language I use most often.

There wasn't many ASP.net tutorials, which is why I wrote this. I'd like to get a feel of the people who do develop in ASP.net, which language they use in the .NET framework?

I do know C++ and VB aswell, but not nearly as thoroughly as I know C#.

So again, if anybody has any questions regarding translating this or anything else, just send me a PM or leave a comment!

Also, let me know how you liked this tutorial if you read it. I am working on my next tutorial right now!

This post has been edited by pr4y: 2 Feb, 2009 - 04:08 PM