ASP.net Web Forms | NET | Trickcode

ASP.NET WEBFORM

W eb forms are what ASP.NET websites and applications are composed of. Web forms are created using HTML markup, server controls, and .NET code that provides the server-side logic for it. The term web form got its name because working with them is similar to Windows Forms. In windows forms, you drag different controls to the screen and you can create graphical user interfaces with a minimum amount of time and effort. It centralizes on event-driven programming where event handlers are executed when certain events such as mouse click occurred. Web forms use the same similar concept. With Visual Web Developer, you can simply drag server controls such as a Label or a TextBox to the web form instead of typing the actual markup for them. You can also attach event handlers to server controls or to the page itself.

Creating an Empty Web Application

Open up Windows Web Developer and create a new Empty Web Site project (File > New Website). The New Web Site Window will show up. Go to the Visual C# category and then choose ASP.NET Empty Web Site. In the Web location, the last part is the name of the folder where your site will be created. Change it to WebFormsDemo. Click OK to create an empty website.

You will see that web.config is the only file that was created. Web.config is a very important file that contains all the configurations and values that will be needed by your whole website.

Creating A Web Form

• To create a web form, right-click on any blank space of the solution explorer and choose Add New Item.
• The Add New Item window will appear. Choose Web Forms from the list of a template and leave the name to Default.aspx. Web forms are just text files with file extensions of .aspx.
• The name Default.aspx tells the server that this is the default web page when the user types the URL. So instead of typing http://example.com/default.aspx, the user can omit the file name and just type http://example.com. You can configure more default web page names in the server but Default.aspx is one of the most commonly used.

The checkbox "Place code in a separate file" tells whether the code for the page will use a code-behind file or inline code. If you check this checkbox, when you create the web form, a corresponding code file will be created. The language for the code file depends on what language you chose. It could either be C# or VB.NET. Since this is a C# site, you should choose C# as the language and the code-behind file will have the same name as the webform but has a .cs extension. If you uncheck the checkbox, then your web page will use an inline code in which the C# code will be included in the markup of the web page. I will use the code-behind approach throughout the tutorials that will follow. This is because code-behind is easier to manage as it provides a separation of concerns. You do all the markup on the web form and all the C# code in the code behind. So leave the checkbox checked.

The "Select master page" checkbox allows you to select a Master page. You will learn more about master pages in a later lesson. Click the Add button to create the web form.

The webform will be created and you will be welcomed by the Code Editor of Visual Web Developer. Inside the Code Editor, you will see the markup for the web form we have created. Write now, the main body of it is empty and you can start adding HTML code to it inside the <div> tags but we are not doing that just yet.

There are three tabs below the code editor which allows you to change the view for your web form. We are currently in the Code Editor which can be accessed by clicking the Source tab at the bottom. The main content of the page is everything inside the body tags. Right now, you can see a <form> element and a <div> element inside it. It is recommended to always provide a form element in an ASP.NET web form. You will see the <form> elements role in a later lesson. The div tag is simply a wrapper for the main content of the page. Inside this div tag, you can type HTML and ASP.NET tags that will be rendered in the browser.

Clicking the Design tab will show up the Designer which shows how your web page will look like once it is run. Go ahead and click the Design tab.

Since the body of our HTML markup has no visible element yet, nothing has been shown. The Designer in Visual Web Developer shows some guides on what element the cursor is placed in the code editor. The cursor is automatically positioned inside the <div> tag. Even though the <div> tag cannot be seen in a real browser, the Designer of VWD allows you to see it as a bordered rectangular area and it also adds a label at the top part of the element so you can see what element you are at.

There is also a Split tab that allows you to see both the Designer and the Code Editor at the same time.

You can also look at the bottom part of the Designer to see a tag navigator that shows the tags in a hierarchical order. You can click a tag here and it will be selected in the designer. This is helpful when you have a hard time selecting elements in the actual designer. For example, if you want to select the <body> tag, simply click the <body> tag in the navigation and it will be selected. You cannot select the <body> tag by merely relying on the designer.

Also, when you hover on a tag in the tag navigator, you will see an arrow to the right of it. Clicking it will show a menu that allows you to Select the Tag or just select its Content. This is again a very useful feature. You won't need to go to the Code editor and manually select the contents of a tag.

                                       Share this article with your friends