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.)

Comments

Celebrity Blog said…
Online Article...

[...]very few websites that happen to be detailed below, from our point of view are undoubtedly well worth checking out[...]...
I suggest adding a "google+" button for the blog!
hd televisions said…
great, dont like sites, find a lot of the ideas obtain
Adriana said…
thanks for share!
sem calcinha said…
Adoro me mostrar peladinha na web cam
facebook fans said…
Hello. fantastic job. I didnt otherwise this could happen. This is sometimes a remarkable story. Thanks!
Arani said…
this is good my friend, great posts, all the best and success in your future.http://www.magiccampusbrasil.net

Popular posts from this blog

Tic Tac Toe - Using App Inventor Beta

Solved: Ionic ENOENT Invalid device state error when using sudo on Mac

Compared: Xamarin vs Xcode - iOS App Size and Startup Speed