|
|
|
CREATING A NEW WEB SITE In Visual Studio.NET, a Web application is also known as a Web site. When you open the new Web site dialog box you can choose the location of your Web site as well as the programming language you wish to use. There are three different location types:
When you create a new Web site, a solution file is created for you in a directory separate from your Web site files. The default location is My Documents\Visual Studio 2005\Projects. The folders and files used to create your Web site are known as a Web project. However, unlike previous versions of VS.NET, project files are no longer used to store metadata about a project. Instead, this information is stored in the Web.config file, an XML file included in every project. To find out where your aspx files are stored, look for the value of the Full Path property in the properties window.
You can add additional folders to your project by right clicking on the Web site name in the solution explorer and choosing "new folder". There are also special ASP.NET folders that can be added to your project.
You can open an existing Web site by choosing file-->Open Web site. A dialog box then opens allowing you to choose the type of Web site you'd like to open as well as its location. If you choose Local IIS, you'll be able to choose from a directory in C:\inetpub\wwwroot\, the default location for all Web folders run by IIS.
Web server controls are derived from ASP.NET classes and are analagous to the ones used in windows applications. Web control tags begin with asp: followed by the name of the control class. They provide a rich object model. There are Web controls that have no HTML equivalent. The benefit of this is that some Web controls can contain greater functionality since they consist of more than one control. The calendar control and ad rotator control are two examples of Web controls that consist of multiple controls. You can add both HTML Server Controls as well as Web Server controls to your form. Each set of controls is contained in its own tab on the toolbox. The Web Server controls are located in the standard tab and the HTML Server controls are located in the HTML tab. HTML server controls are almost identical to their traditional HTML counterparts except that they contain a "runat" attribute with its value set to "server". You also need to give each control an ID attribute/value so that the control can be referred to in code by its name. If you add an HTML Server control, you must right click on it in the Web page and choose Run As Server Control. This will add the runat="server" attribute/value pair. Otherwise VS.NET will treat it as a static traditional HTML tag.
In design view, the new server control will now have a green arrow in the top left corner of the page. This indicates that it's a server control.
Both types of controls have properties, methods, and events. You can set properties in the properties window just as you can for Windows controls. If you have the option of choosing between the two types of controls, you should use Web controls since they use an object model consistent with Windows applications. For example, you would access the text inside of a label using the control's text property in BOTH a Windows application and a Web application providing that the Web application used a Web control. However, if it used an HTML server control, then you would access the value using the value property. So why do HTML server controls exist? They are great for converting traditional HTML pages into ASP.NET applications. All you have to do is add the runat attribute to any HTML tag and set its value to server, and that HTML tag is now a server control. It's worth noting that you can use BOTH types of controls in a Web project. The following is a short example that uses HTML Server controls:
As you can see, the code strongly resembles traditional HTML. However, the form, textbox and submit buttons all contain the RUNAT attribute set to server. THE FUTURE VALUE FORM The form on page 39 calculates the future value of a fixed monthly investment. The entire application is made up of this single Web form with its corresponding code behind file. The form uses six Web server controls. When you click on a button in a Web form, it automatically starts a postback to the server.
GRID LAYOUT VS. FLOW LAYOUT By default, VS.NET arranges controls in flow layout where objects flow from left to right, top to bottom. You can then use tables to perfect your design since you're limited in what you can do with spaces and line breaks. This allows control position to change depending on the browser size and screen resolution. You can insert literal text directly into the designer window and use controls on the formatting toolbar and the commands in the format menu to change the font styles. Grid layout can also be used to create ASP.NET Web forms in VS.NET. This means that you can drag and drop controls anywhere on the form. Absolute positioning via stylesheets is used to render the controls in the browser using X and Y coordinates. When using grid layout you need to make sure that your objects don't overwrite each other since their positioning is not relative to one another. You can use grid layout by choosing layout-->position-->auto position objects from the menu bar.
The control in source view will now contain the x and y coordinates. <asp:Image ID="Image1" runat="server" Style="z-index: 101; left: 98px; position: absolute;
top: 42px" />
A page can be in both layout modes because you can change the auto position options so that future controls use a different positioning. Every time you add a Web control, VS.NET automatically adds the corresponding tag to your .aspx file.
HOW TO ADD SERVER CONTROLS TO A FORM You add controls much like you do in a Windows application, by dragging the control from the toolbox or double clicking on it. You also set properties in the same manner. Many Web server controls have a smart tag menu that allows you to set common properties or perform common tasks. To display the smart tag menu, click the smart tag icon in the upper right of the control.
If you drag an image file from the server explorer to the form, an HTML image control is created. COMMON PROPERTIES FOR ASP.NET CONTROLS Many ASP.NET properties share the same name and functionality as their Windows equivalents. Some differences are worth noting, however. An ASP.NET control's ID property is the equivalent of the Windows control's NAME property. The inherent statelessness of the Web is the reason behind the AutoPostBack, EnableViewState, and CausesValidation properties (only available in Web server controls) AUTOPOSTBACK AutoPostBack is available with Web controls that are capable of posting back to the server whenever the user performs an action on the control. For example, if a drop down list control's autoPostBack property is set to true (false is the default), selecting an item from the drop down list will cause the form to be submitted to the server. Autopostback requires a round trip to the server every time the event is fired. When buttons are clicked, they always post back to the server. This is why they don't have an AutoPostBack property. Obviously non-interactive controls such as labels do not have an AutoPostBack property. All input controls, for the most part, support automatic postback. The event related to an autopostback event is fired AFTER the Init and load events but BEFORE the PreRender event.
The following code demonstrates the order in which the events fire when the listbox item is selected and AutoPostBack occurs. Me.IsPostBack is true if the page is being posted back to the server. This property of the page is checked so the label text doesn't appear until the user chooses an item from the listbox. Me refers to the page object. Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
If Me.IsPostBack = True Then Label1.Text &= "page init" & "<BR>"
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Me.IsPostBack = True Then Label1.Text &= "page load" & "<BR>"
End Sub
Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
If Me.IsPostBack = True Then Label1.Text &= "pre render" & "<BR>"
End Sub
Protected Sub ListBox1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Handles ListBox1.SelectedIndexChanged
If Me.IsPostBack = True Then Label1.Text &= "auto postback" & "<BR>"
End Sub
End Class
Every page event is fired EVERY time that page is loaded! HOW POSTBACK EVENTS WORK AutoPostBack uses a JavaScript function named __doPostBack that's automatically generated in the client code when AutoPostBack is set to True. The control that has its AutoPostBack property set to True is connected to the function by the JavaScript onchange attribute which is set to __doPostBack. <select size="4" name="ListBox1" onchange="javascript:setTimeout('__doPostBack(\'ListBox1\',\'\')', 0)" id="ListBox1">
As you can see, ASP.NET changes a JavaScript event on the client into an ASP.NET event on the server. The JavaScript is necessary because there's no way that ASP.NET code can run from the client. JavaScript is designed to be a client side scripting language. The best part is that the JavaScript is generated by ASP.NET. You don't have to learn another language! ENABLEVIEWSTATE If EnableViewState is set to true (the default) any changes made to the control THROUGH CODE will remain on subsequent post backs. If you set a text box's EnableViewState property to false, any text entered into the text box will STILL remain in the textbox after the page has posted because the information is sent in the HTTP request and HTTP response. You should set a control's EnableViewState property to false when its properties will never be changed in code or you always want the values reset to what they were initially. Doing so will cause your page to load faster since less processing must occur on the server. In addition, your page size will be smaller since ViewState information is embedded into the HTML source code. ViewState is encrypted. You can view a page's encrypted viewstate by choosing view-->source from your Web browser and finding the hidden ViewState form field. The first time a page is loaded only the page properties are stored in ViewState. Afterwards, both the page properties and the control properties are stored in ViewState. As a result, the ViewState is larger after the subsequent loading. CAUSESVALIDATION CausesValidation is useful when you include validation controls on your Web form. We'll learn more about the validation controls later in the course.
SOURCE VIEW The <form></form> tags mark the start and end of the HTML code for a Web form. Source code is a combination of HTML and ASP tags. It's known as ASPX code. ASPX CODE FOR THE FUTURE VALUE FORM NOTE: The ALT tag is required in an image tag so the author manually added this attribute value since the tag was generated by dragging an image from solution explorer to the browser. The code below is an image and cannot be copied and pasted into VS.NET.
ADDING CODE TO A FORM Code is added to the code behind file. It responds to user events or those fired as the page loads. Just like in Windows applications, the Code Editor is used to add code.
VB CODE FOR THE FUTURE VALUE FORM
TESTING A WEB APPLICATION When you run your application, VS.NET opens the Error List window to display any errors that occur during the compilation process. Warning messages also appear. These require your attention but will not prevent the application from compiling. If you double click a message in the Error List, you'll be taken to the corresponding line of code. The first time you run an ASP.NET app, you'll be asked if you want to modify the Web.config file to enable debugging. You should choose yes. If an exception is fired you can stop debugging by hitting Shift-->F5. THE HTML THAT'S SENT TO THE BROWSER Use view-->source inside your browser window to view the HTML generated by ASP.NET. You should notice that the code doesn't contain any ASP: tags. You should also notice that the ViewState information is stored in a hidden form field named __VIEWSTATE. Also, HTML was generated on the server so selected list box items are still selected after posting back to the server. In Classic ASP, the programmer had to write code so that selected items would remain selected. CHAPTER TWO QUESTIONS
|
