Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The pages that you create in ASP.NET websites are known as web form pages. Unlike conventional web pages, these are always built as data entry forms which post back to the server for server based processing. Throughout the demonstrations in this chapter, I'll use a set of files that's in a website that's a part of the exercise files provided with the video series. When you create a brand new ASP.NET page, you have the opportunity to either include all of the scripting code for the page in the page itself or to separate the content into two files. One, the HTML page and two, the code file.
In this demonstration, I'll create a page that includes its own scripting code. I'll start by selecting Website > Add New Item. I'll select Web Form from the Templates list and I'll create a new file called PageWithCode.aspx and I'll set the Language to Visual C#. Now for this page, I'm going to deselect the option, Place code in separate file and click Add. The page was created. With the page in Source view, I'll click into the title element and type in PageWithCode and I'll do the same thing in the div tag inside the form. Notice that the page was created with the set of form elements with the runat attribute set to server, meaning that the page was enabled for server-side processing.
Within the div tag, I'll create an h1 tag set, I'll type in less than character then h1 and when I close the tag, the end tag is provided for me. Then once again, I'll type in the text Page with Code. Now I'll switch to Design view and I'm going to add two controls to the page. I'll press Enter to create a new paragraph, then I'll go to the Toolbox and I'll drag in a Label from the Standard section of the Toolbox and I'll place it inside that paragraph that was just created. This is a web form control. Each web form control can have a unique identifier. With the control selected, I'll go to the Properties panel. I'll scroll down to the end then I'll find the id and I'll change the id of the label control to my label. I type in the id and then press Enter to save the change.
Now I'll click right after the labeling that paragraph and press Enter and that creates another paragraph. I'll go back to the toolbox and this time I'll drag in a button control. The button control is essentially a form submit button. When the user clicks it, it causes the page to be posted back to the server and any server-side code that I want to include in the page will be executed. With the button control selected, I'll go back to the Properties panel and I'll locate the Text property. I'll change the Text property of the Button to simply Click me and press Enter. Notice that in the Design view on the left that changes reflected immediately.
Now to make something happen, I'm going to double-click on the control. When I double-click, Visual Web Developer automatically generates a method or a function called Button1_Click. The structure of the function is already appropriately constructed to react to the click event that happens when the user clicks the button. When the user clicks that button, I'm going to react by executing a little bit of server-side code that changes the text property of the label, like this.
I'll type in myl and I'll see myLabel listed in the list of available objects. I'll press the dot character to auto- complete it. Then I'll start typing tex for text and I'll see the Text property with an uppercase T listed there. I will press the spacebar, and then I'll put it an equal sign which in C# is the assignment operator and then I'll complete the programming statement with the literal string of "Value set at server" and then I'll complete the statement with the semicolon.
Let's take a look at all of the code and see how it works. I have the function called Button1_Click. If I scroll down and take a look at the button component, I'll see that it has a runat = server attribute, which means that any code that's being executed is executed at the server level rather than in the browser, and then an attribute called onclick, which names the function that's going to be called Button1_Click. I'll save my changes and I'll run the page by selecting Debug > Start Without Debugging.
When the page first appears, the label displays its default value of label. I'll click the button, the page is posted back to the server and when it's returned, the text property of the label is changed to the literal string "Value set at server". So that's the basic architecture of a web form page. Each web form control that you place on the page has features that can execute certain code at the server level. Not all code is capable of being executed at the ASP.NET server level.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98119 Viewers
61 Video lessons · 85424 Viewers
71 Video lessons · 69396 Viewers
56 Video lessons · 101755 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.