Web Forms Basics: .NET Server Controls

This is going to be a deep dive into the markup, or view, side of a page. If you recall in an earlier post, we took a very high level look at the different components that make up a page.

These pages allow you to enter special server-side controls, which can be modified or acted upon on the server, through a code behind file, typically.

Please note that this will not be a tutorial on how to use Visual Studio or how to File > New Project something. This will be an exploration into server controls in ASP.NET.

With that said, in an empty project, right-click the project in Solution Explorer and Add a new Web Forms page. You can name it whatever you like.

The first thing you see when you create it is, what looks like a static html page, only with an “aspx” extension.

The first line is the page directive, which tells .NET how it should handle certain things for this page. We did a very brief overview of that in the previous post.

Further down you should see plain ole html. Nothing fancy, just static markup.

To add a server control, you can either open up the Toolbox, which is on the left-side of the screen, and click and drag the control over to the markup or design surface, or put your cursor anywhere in the markup and start typing away.

Let’s add a button. We’ll first do the HTML version and then the ASP.NET version so that we can see what new features .NET controls affords us over static HTML controls.

To demonstrate interacting with a page using html controls, we need to add two buttons, a span tag, and a bit of javascript. I am using jQuery to make it easier. jQuery is just a wrapper around the javascript language. Anything you can do in jQuery you can do it plain vanilla javascript. jQuery just makes it a lot easier and faster.

image

In this example, the script looks like so:

image

So what does this contrived example do?

Looking at the script, when the button with the id of “btnHtmlButton” is clicked, “You clicked me!” is displayed inside the span tag. When “btnHtmlButtonClear” is clicked, elements inside the span tag are removed.

Pretty simple, right?

Now, let’s do the same thing, only this time with .NET controls.

Remove the html controls and javascript we added.

On the first line after the opening div tag, place an ASP.NET Button control. To do this, in the Source view, just type <asp: Button (without the space between the “:” and the “B”) and intellisense will begin to kick in, providing you with attributes you can add to the button control.

We need to give it a unique ID, specify that it will runat server, and give it some text to display on the button.

image

Every .NET control must have runat=”server”.

Now go ahead and add the button that will clear something (just like in the previous example when we were using html controls).

image

Next, we need a container to display some text in. In the html version, we used a span tag. We don’t need a span tag in the .NET controls version. Here we will use an ASP.NET Label control, which simply displays some sort of text to the screen.

image

Notice we don’t have a Text attribute here in its declaration. This is because we will be setting its text when either button is clicked.

To wire up the OnClick event handler for the first button, select “Design” view and double-click the button. Do the same for the second button.

Your codebehind file should look like this:

image

When “btnClickMe” is clicked, we need to display “You clicked me!” in the label. To access .NET controls in the codebehind, you access them via their ID. In this example, our label’s ID is “lbResult”. Then we need to set its text property to “You clicked me!”. Simply type lbResult.Text = “You clicked me!”; inside the btnClickMe_Click event handler method:

image

Now, build and run the application. Click the button. Notice that the page is refreshed and “You clicked me!” is displayed next to the “btnClickMeToClear” button.

Last, we need to clear the text that is displayed in the label when the user selects the “btnClickMeToClear” button.

I will leave that up to the reader to figure out. How would you do it?

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s