Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you build a data entry form using an ASP.NET web form page, you can choose between standard HTML controls and ASP. NET server controls. In this video, I'm going to demonstrate how to create a data entry form using ASP.NET's web form controls, which allow you to react to particular events using server-side code. I am going to open a file called AuthorForm.aspx. That's a part of the create pages website. This file contains a simple HTML table with two columns and four rows. The first three rows have labels in the first column and I'm going to be adding controls to the form placing them in the second column.
If you look at the file in Source View and I'll open it up Full Screen view, so we can see as much code as possible. You will see that there is a certain amount of style code up at the top in the Head section and then within the body tag, there is form created by Visual Web Developer when the page was created. And then the HTML table, that contains the table rows and table data cells. That's all there is in the file so far. Now I'll go back to Design View and I'll get out of Full Screen View, so I can see all of my panels. I'll open up the Toolbox on the left and then pin it into place by clicking the little pin icon. That causes the Toolbox to be pinned on the left and then I'll unpin the solution explorer and the Properties panel, so that I reclaimed that visual space over on the right.
Now it will be easy to drag controls into the environment. I'm going to be using a TextBox control. This is the ASP.NET server control that's the equivalent of an HTML text input control. I'll drag the TextBox into place, dropping it into the first row, second column. When you are working in Visual Web Developers Design View, you can easily resize the control just by clicking and dragging. I'll set the text boxes width at 200 pixels.
Now I'll go to the Properties view and assign an id down at the bottom of the Properties view. I'll assign it the id as fnameinput. Now I'll do the same thing for the last name control, so that the controls are exactly of the same size, I'll simply copy this control to the clipboard, place the cursor in the second row second column and paste. Then I'll select the new control that I have just created and if you look right above the control, you will see a visual indicator that the new control's id was assigned as fnameinput0 to distinguish it from the simple fnameinput.
Now with the control selected, I'll go to the Properties panel and I'll change the id of this control from fnameinput0 to lnameinput. I'll create a TextBox for the Date of Birth. I'll drag and drop the control. I'll press F4 to go to the Properties panel and I'll change the id to DOB for Date of Birth input. Finally I'm going to add a button to the form. I created this HTML table originally with four rows so that I'd have a place to put the button and make it a line right under the other controls. I'll drag an ASP.NET button control into the form and I'll drop it into the fourth row second column.
Once again, I'll go to the Properties panel, I'll change the text of the control to submit and that changes automatically in the Design View when I press Enter. I don't need to worry about the id of the button, I don't care about its data. So I'll just leave it with its default of Button1. So now, I'll save and display the form in the browser. I'll press Ctrl+S to save then I'll go to the menu and select Debug > Start without debugging.
When the form opens on the screen, you will see that it has three control. The labels and the controls are properly aligned because they are wrapped inside HTML table,, rows, and columns. I'll be able to click into the controls and type values in but right now the form isn't really doing anything. When I click the Submit button, the form is submitted to the server and when it comes back the controls are still displaying the data that I typed in. That's one of the ways in which the ASP.NET web form controls differ from basic HTML controls.
ASP.NET is tracking the data that the user types into the controls and when the page is returned back from the server, it repopulates the controls for you automatically. If you are curious about how the form is actually constructed, in order for the browser to be able to interpret it, you can right-click on the browser and select View Source. That's assuming of course that you are using Internet Explorer. If you are using another web browser, the technique for viewing the source will differ. Take a look at the code that's in the page. You will see that the TextBox controls that I've created in Asp.NET will interpret it as HTML input controls and your values were automatically populated as the page was returned to the browser when I clicked the Submit button.
So that's basically how you create a data entry form. In other videos, I'll show you how to process the data from the form when the user submits it using server-side code.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101058 Viewers
61 Video lessons · 87839 Viewers
71 Video lessons · 71720 Viewers
56 Video lessons · 103597 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.