Module 4: Creating a Microsoft ASP.NET Web Form

Overview Creating Web Forms Using Server Controls

Lesson: Creating Web Forms What is a Web Form? Creating a Web Form with Visual Studio.NET

What Is a Web Form? Def: Consists of a combination of HTML, code, and controls that execute on a Web server that is running IIS. Web forms display a UI by generating HTML that is sent to the browser, while the supporting code and ctrls that run the UI stay on the Web server..aspx extension (works as containers for the text and ctrls that you want to display on the browser) It comprised of two separate files: .aspx (UI of the Web Form) .aspx.cs or.aspx.vb (“code-behind page” consists of supporting code)

Untitled Page What Is a Web Form? Cont. Page attributes Body attributes Form attributes

What Is a Web Form? The functions of Web form are defined by three levels of attributes: 1. Page attributes (define global functions or page specific attributes that are used by the ASP.Net page parser and compiler. Example : Language, AutoEventWireUp, Codebehind 2. Body attributes (define how a page will be displayed on the client’s browser. Example: style

What Is a Web Form? Cont. Form attributes: defines how groups of ctrls will be processed. Only one server side form on an.aspx.page. Attributes of forms: Method: identifies the method of sending ctrl values back to the server. The option are: Post – data is passed in name/value pairs within the body the HTTP request. Get – Data is passed in query string Runat: A key feature of a web form is that the controls run on the server. runat=“server” attributes causes the form to post control information back to the ASP.Net page on the server where the supporting code runs.If runat not set to server, the form will work as a regular HTML form.

Creating a Web Form with Visual Studio.NET New ASP.NET Web Applications create a default Web Form: Default1.aspx Create additional Web Forms from the Solution Explorer Upgrade existing HTML pages into Web Forms

Lesson: Using Server Controls What is a Server Control? Types of Server Controls Saving View State HTML Server Controls Web Server Controls Selecting the Appropriate Control

What is a Server Control? Def : ASP.Net server controls are components that run on the server and encapsulate UI and other related functionality. Server contrlos are used in ASP.Net pages and ASP.Net code behind classes. Server controls include buttons, text boxes and drop down lists. Runat="server" means run on the server not on user’s browser. Events happen on the server View state saved <asp:Button id="Button1" runat="server" Text="Submit"/> <asp:Button id="Button1" runat="server" Text="Submit"/>

What is a Server Control? Cont. Have built-in functionality The functionality of a control is what happens when the user clicks a button or a list box. These processes are called event procedures. Common object model All have Id and Text attributes Eg: Background color for all controls used the same property: Backcolor property. Create browser-specific HTML When a page is rendered for a browser, the Web server controls determine which browser is requesting the page and then delivers the appropriate HTML

Types of Server Controls HTML server controls HTML elements with attributes that make them visible to and programmable on the server. Web server controls Intrinsic controls Eg: button, list box, text box Validation controls - incorporate logic that allows you to test a user’s input. - Attach a validation control to the input control and specify the conditions of correct user input. - Eg: RequiredFieldValidator, ValidationSummary, RangeValidator

Types of Server Controls ( Cont.) Rich controls – a complex control that include multiple functions - Eg: AdRotator, Calendar ( displays a sequence of advertisement ) List-bound controls – can be used to display lists of data on an ASP.NET web page - to display reformat, sort and edit data - Eg: DataGrid, DataList, DropDownList, RadioButtonList

Saving View State Webforms are stateless. It does not retain any information on prior request. ViewState is a hidden control that helps to solve the problem of webpage. It will store / records the state of the controls ( setting and user inputs ) on a web page as the HTML travels back and forth between the client and server. Hidden ViewState control of name-value pairs stored in the Web Form On by default, adjustable at Web Form and control level

HTML Server Controls Based on HTML elements Exist within the System.Web.UI.HtmlControls namespace

Exist within the System.Web.UI.WebControls namespace Control syntax HTML that is generated by the control Web Server Controls <asp:TextBox id="TextBox1" runat="server">Text_to_Display <asp:TextBox id="TextBox1" runat="server">Text_to_Display <input name="TextBox1" type="text" value="Text_to_Display" Id="TextBox1"/> <input name="TextBox1" type="text" value="Text_to_Display" Id="TextBox1"/>

You need specific functionality such as a calendar or ad rotator The control will interact with client and server script You are writing a page that might be used by a variety of browsers You are working with existing HTML pages and want to quickly add ASP.NET Web page functionality You prefer a Visual Basic-like programming model You prefer an HTML-like object model Use Web Server Controls if: Use HTML Server Controls if: Bandwidth is not a problemBandwidth is limited Selecting the Appropriate Control

Exercise If you were given a Web page with an. aspx extension, what would you look for to verify that it is a Web Form? If you were given a Web page with an. aspx extension, what would you look for to see if there are Web server controls? What type of code or script does a Web server control generate on the client?

Review Creating Web Forms Using Server Controls

~ End of Slides ~