ASP.NET Lesson 2 - Processing Forms

In this tutorial you will learn how to process a form using ASP.NET. You should have already been through the first tutorial at this point.



Creating a Form

1. A form was actually already created for you by this point. If you look at the code you should see: <form id="form1" runat="server">


2. Now you need to add an input box to the form. Keep reading.

Switch to Design Mode

1. On the bottom left of Visual Web Developer, click on "Design".


2. This will put you in the visual editor mode.


3. Once you see the words "Hello World" in the visual editor mode, then continue.


4. Click on "Toolbox" on the left sidebar.


5. These are the components that you can add to your page.


6. Make sure you have the "Standard" components expanded. (Important: You will also see a set of components under "HTML". It may be tempting, but do not use those ones for this tutorial.)

Adding Elements to the Form

1. Drag a "Textbox" component onto the visual editor.


2. Click on the textbox that you added to the visual editor.


3. On the bottom right of Visual Web Developer you will see a "Properties" frame.


4. Scroll down in the Properties frame to the property called "ID" and change the value to "FirstName" instead of "TextBox1".


5. Using the Toolbox, add a "Button" component to the form and using the Properties frame change the "Text" property this time to read "Submit" instead of "Button".


6. Select the button in the visual editor and, in the properties frame, scroll down to "PostBackUrl" and type "form_process.aspx".

Create the Page to Process the Form

1. In the Solution Explorer frame at the top right, right-click on the very top item. (It should be the directory of your website.)


2. Choose "Add New Item".


3. Chose the "Web Form" template. (Don't press Add yet!)


4. Select Visual C# as the language.


5. Specify "form_process.aspx" as the name.


6. Make sure you have checked "Place code in separate file". (You will see what this is for later in the tutorial.)


7. Press "Add".


8. You should now have a new page.

Setup the Page for Displaying the Submitted Field Value

1. Between the <div></div> tags, write "Your first name is:".


2. Instead of switching to design mode, this time stay in "Source" mode to add a component.


3. Add a "Label" component by opening the toolbar and dragging the "Label" component right after the words "Your first name is:".


4. Now, instead of using the Properties frame to change the ID, just change it right there in the source code. Call it "lblFirstName".

Finally, Process the Form

1. In the Solution Explorer, click the expand icon next to "form_process.aspx".


2. You will see a file called "form_process.aspx.cs". This is what is called a "code-behind" file. (The cs stands for C#.) It is there for you to put C# code that will do processing, so that you can keep that kind of from mixing in with the HTML code.


3. Double-click that file to open it.


4. Go to line 18. (It should be a blank line, ready for you to add code there.)


5. Press CTRL-SPACE.


6. You will see a list of all the things you can use.


7. Type "this." (with the period). After you type the period, a list of things you can reference in the web page will show up.


8. Now type "lbl". Since you are typing the first letters of the label component on the web page it will go down and highlight that. Press enter to choose lblFirstName.


9. Eventually you want to write out this whole line: this.lblFirstName.Text = Request["FirstName"];


10. The Request object holds the form values that get submitted.

Test The Form

1. Right click on the "Default.aspx" file in the Solution Explorer.


2. Choose "View in Browser".


3. When your browser comes up, type a name into the form and submit it.


4. You should see: Your first name is: (The name you entered.)