KEMBAR78
Vb.Net Web Forms | PPT
Copyright ©2004 and Distribution Rights Held by DotNetTechnology, LLC. This material is exclusively used by DotNetTechnology, LLC Consultants as a teaching aid.  Any unauthorized usage including teaching, copying, and redistribution is strictly prohibited.  .NET Programming with VB.NET  Dutch Dasanaike November 2004 VB.Net  Dutch Dasanaike  © 2004  DotNetTechnology.com .  All rights reserved.  ASP.NET Web Forms
A Simple ASP.NET Web Form <%@ Page Language=“VB”%> <script runat=“server”> Public Sub Page_Load(Src as Object, E as EventArgs) lblOutput.Text = “This is Label Text.” End Sub </script> <html> <body bgcolor=“#ffffff”> <form id=“frmHW” runat=“server”> <asp:Label id=“lblOutput” runat=“server” /> </form> </body> </html> ASP.NET code HTML code
Web Forms and Code Behind Pages Programming code (VB.NET, C#, etc.) for Web Forms can be placed into one file along with the HTML or stored separately in a code behind file. <HTML> form.aspx Code <HTML> form.aspx Code form.aspx.vb Single file Separate files (Code behind)
Code Behind Directives An ASP.NET code behind page can be referred to by using the following directives: <%@ Page Language=“VB” Src=“form.aspx.vb”  Inherits=“MyNamespace.MyClassName” %> If using Visual Studio.NET you can also use the Codebehind directive: <%@ Page Language=“VB” Codebehind=“form.aspx.vb”  AutoEventWireup=“false”  Inherits=“MyNamespace.MyClassName” %> Only used by VS.NET “ Src” directive causes code behind page to automatically compile when the Web Form is first hit.
Introduction to ASP.NET Server Controls Server controls are software components that can be used in Web Forms to collect, display, and validate data. Server controls have properties, methods, and events that can be programmed against in Web Forms. Four basic types of server controls exist: Web server controls :  Strongly-typed programmable objects HTML server controls : Similar to regular HTML elements, but you control them on the server side Validation controls : Used to validate Web Form submissions User controls : Custom-built controls (Example: login screen, header, etc.)
Web Server Controls Web server controls simplify the processes of collecting user input, displaying data, and showing calendars, as well as other functions. Benefits of Web server controls: Reduce complex code in Web Forms Object-oriented (support for events) Extensible and customizable Support for data binding Simply to use and configure Custom controls can be created Strongly-typed (lblMsg.Text=“Hi There!”) Target multiple browser types
Web Server Controls Hierarchy
Using Web Server Controls ASP.NET Web server controls are used in a Web Form by prefixing the control name with an asp namespace prefix: <asp:Label id=“lblHello” Text=“Hello” runat=“server” /> asp:Textbox web server control examples: Regular textbox: <asp:Textbox id=“txtFirstName” runat=“server” /> Password textbox: <asp:Textbox id=“txtFirstName” TextMode=“Password” runat=“server” /> TextArea textbox (multiline): <asp:Textbox id=“txtFirstName” TextMode=“MultiLine” Rows=“5” Columns=“50” runat=“server” />
Web Server Controls Example <%@ Page Language=&quot;VB&quot;%> <script runat=&quot;server&quot;> Public Sub Page_Load(Src as Object, E as EventArgs) If (Page.IsPostBack) Then   lblMessage.Text = txtFirstName.Text & &quot; &quot; & txtLastName.Text End If End Sub </script> <html> <body bgcolor=&quot;#ffffff&quot;> <form id=&quot;frmName&quot; runat=&quot;server&quot;> <b>Please complete the following:</b><p /> Your Name:  <asp:Label ID=&quot;lblMessage&quot; Runat=&quot;server&quot; /> <p />   First Name:  <asp:TextBox ID=&quot;txtFirstName&quot; Runat=&quot;server&quot; /> <br />   Last Name:  <asp:TextBox ID=&quot;txtLastName&quot; Runat=&quot;server&quot; /> <p />   <asp:Button ID=&quot;btnSubmit&quot; Text=&quot;Submit!&quot; Runat=&quot;server&quot; /> </form> </body> </html> Called each time a page is loaded
Event Handling in ASP.NET ASP.NET controls expose different events that can be wired up to event handlers. 1 2 3 Browser (ShopCart.aspx) Shopping Cart Server (Parse post information) Call appropriate event-handling method btnAddToCart_Click(obj,event) Prod1=Thing:Prod2=Item; Prod3=Gizmo Submit=btnAddToCart3 Add Add Add Thing Item Gizmo
Hooking Up Web Control Events Web server controls expose different events that can be handled in Web Forms. The onClick attribute can be added to hook a control’s Click event to an event handler: <script runat=“server” language=“VB”> Public Sub btnSubmit_OnClick(sender as Object, e as EventArgs)    Response.Write(“You clicked a button!”) End Sub </script> <asp:Button id=“btnSubmit” onClick=“btnSubmit_OnClick”      runat=“server” Text=“Click here” />
Hooking Up Web Control Events:  Example 1 <%@ Page Language=“VB” %> <script runat=&quot;server&quot;> Public Sub btnSubmit_OnClick(sender as Object, e as EventArgs)   lblMessage.Text = txtFirstName.Text + &quot; &quot; + txtLastName.Text End Sub </script> <html> <body bgcolor=&quot;#ffffff&quot;> <form id=&quot;frmName&quot; runat=&quot;server&quot;> <b>Please complete the following:</b><p /> <b>Your Name:</b> <asp:Label ID=&quot;lblMessage&quot; Runat=&quot;server&quot; /><p />   First Name: <asp:TextBox ID=&quot;txtFirstName&quot; Runat=&quot;server&quot; /><br />   Last Name: <asp:TextBox ID=&quot;txtLastName&quot; Runat=&quot;server&quot; /><p />   <asp:Button ID=&quot;btnSubmit&quot; Text=&quot;Submit!&quot; Runat=&quot;server&quot;    onClick=&quot;btnSubmit_OnClick&quot; /> </form> </body> </html>
<%@ Page Language=&quot;VB&quot;%> <script runat=&quot;server&quot;> Public Sub ddStates_IndexChanged(sender as Object,e as EventArgs)  lblMessage.Text = &quot;You selected &quot; & ddStates.SelectedItem.Text & _   &quot; which has a state code of &quot; & ddStates.SelectedItem.Value End Sub </script><html> <body bgcolor=&quot;#ffffff&quot;> <form id=&quot;frmName&quot; runat=&quot;server&quot;>   <b>Select a Western State:</b>   <asp:DropDownList ID=&quot;ddStates&quot; Runat=&quot;server&quot;    OnSelectedIndexChanged=&quot;ddStates_IndexChanged“   AutoPostBack=&quot;True&quot; > <asp:ListItem Value=&quot;&quot; Text=&quot;Select One:&quot; /> <asp:ListItem Value=&quot;AZ&quot; Text=&quot;Arizona&quot; /> <asp:ListItem Value=&quot;CA&quot; Text=&quot;California&quot; /> <asp:ListItem Value=&quot;UT&quot; Text=&quot;Utah&quot; /> <asp:ListItem Value=&quot;WA&quot; Text=&quot;Washington&quot; />   </asp:DropDownList><p /> <b>Selection:</b> <asp:Label ID=&quot;lblMessage&quot; Runat=&quot;server&quot; /> </form> </body> </html> Hooking Up Web Control Events:  Example 2
Introduction to ASP.NET Validation Controls Validation controls allow input submitted through Web Forms to be validated easily. When possible, validation will occur on the client side.  For older browsers (and even new browsers). validation occurs on the server side. Types of validation include: Required entry Validating specific criteria (value range, etc.) Comparing control values (does text1 = text2 ?) Range checking Pattern matching Custom validation
Validation Controls in ASP.NET Validation controls that can be used in ASP.NET Web Forms include: <asp:RequiredFieldValidator> <asp:RangeValidator> <asp:CompareValidator> <asp:RegularExpressionValidator> <asp:CustomValidator> <asp:ValidationSummary>
Validation Controls Example <form id=&quot;frmName&quot; runat=&quot;server&quot;> <b>Please complete the following:</b><p /> <b>Valid Check:</b> <asp:Label ID=&quot;lblMessage&quot; Runat=&quot;server&quot; /><p />   Password: <asp:TextBox ID=&quot;txtPassword&quot; TextMode=&quot;Password&quot; Runat=&quot;server&quot; />   <asp:RequiredFieldValidator ID=&quot;vTxtPassword&quot; runat=&quot;server&quot;  ControlToValidate=&quot;txtPassword&quot;  ErrorMessage=&quot;Enter your password!&quot; />< br />   Re-Type Password: <asp:TextBox ID=&quot;txtPassword2&quot; TextMode=&quot;Password&quot; Runat=&quot;server&quot; />   <asp:RequiredFieldValidator ID=&quot;vTxtPassword2&quot; runat=&quot;server&quot;  ControlToValidate=&quot;txtPassword2&quot;  ErrorMessage=&quot;Re-Enter your password!&quot; />   <asp:CompareValidator ID=&quot;user_pwd_compare_validate&quot;  Runat=&quot;server&quot; ControlToCompare=&quot;txtPassword&quot;  ControlToValidate=&quot;txtPassword2&quot; Type=&quot;String&quot;    ErrorMessage=&quot;Passwords do not match!&quot; />   <p />   <asp:Button ID=&quot;btnSubmit&quot; Text=&quot;Submit!&quot; Runat=&quot;server&quot; /> </form>

Vb.Net Web Forms

  • 1.
    Copyright ©2004 andDistribution Rights Held by DotNetTechnology, LLC. This material is exclusively used by DotNetTechnology, LLC Consultants as a teaching aid. Any unauthorized usage including teaching, copying, and redistribution is strictly prohibited. .NET Programming with VB.NET Dutch Dasanaike November 2004 VB.Net Dutch Dasanaike © 2004 DotNetTechnology.com . All rights reserved. ASP.NET Web Forms
  • 2.
    A Simple ASP.NETWeb Form <%@ Page Language=“VB”%> <script runat=“server”> Public Sub Page_Load(Src as Object, E as EventArgs) lblOutput.Text = “This is Label Text.” End Sub </script> <html> <body bgcolor=“#ffffff”> <form id=“frmHW” runat=“server”> <asp:Label id=“lblOutput” runat=“server” /> </form> </body> </html> ASP.NET code HTML code
  • 3.
    Web Forms andCode Behind Pages Programming code (VB.NET, C#, etc.) for Web Forms can be placed into one file along with the HTML or stored separately in a code behind file. <HTML> form.aspx Code <HTML> form.aspx Code form.aspx.vb Single file Separate files (Code behind)
  • 4.
    Code Behind DirectivesAn ASP.NET code behind page can be referred to by using the following directives: <%@ Page Language=“VB” Src=“form.aspx.vb” Inherits=“MyNamespace.MyClassName” %> If using Visual Studio.NET you can also use the Codebehind directive: <%@ Page Language=“VB” Codebehind=“form.aspx.vb” AutoEventWireup=“false” Inherits=“MyNamespace.MyClassName” %> Only used by VS.NET “ Src” directive causes code behind page to automatically compile when the Web Form is first hit.
  • 5.
    Introduction to ASP.NETServer Controls Server controls are software components that can be used in Web Forms to collect, display, and validate data. Server controls have properties, methods, and events that can be programmed against in Web Forms. Four basic types of server controls exist: Web server controls : Strongly-typed programmable objects HTML server controls : Similar to regular HTML elements, but you control them on the server side Validation controls : Used to validate Web Form submissions User controls : Custom-built controls (Example: login screen, header, etc.)
  • 6.
    Web Server ControlsWeb server controls simplify the processes of collecting user input, displaying data, and showing calendars, as well as other functions. Benefits of Web server controls: Reduce complex code in Web Forms Object-oriented (support for events) Extensible and customizable Support for data binding Simply to use and configure Custom controls can be created Strongly-typed (lblMsg.Text=“Hi There!”) Target multiple browser types
  • 7.
  • 8.
    Using Web ServerControls ASP.NET Web server controls are used in a Web Form by prefixing the control name with an asp namespace prefix: <asp:Label id=“lblHello” Text=“Hello” runat=“server” /> asp:Textbox web server control examples: Regular textbox: <asp:Textbox id=“txtFirstName” runat=“server” /> Password textbox: <asp:Textbox id=“txtFirstName” TextMode=“Password” runat=“server” /> TextArea textbox (multiline): <asp:Textbox id=“txtFirstName” TextMode=“MultiLine” Rows=“5” Columns=“50” runat=“server” />
  • 9.
    Web Server ControlsExample <%@ Page Language=&quot;VB&quot;%> <script runat=&quot;server&quot;> Public Sub Page_Load(Src as Object, E as EventArgs) If (Page.IsPostBack) Then lblMessage.Text = txtFirstName.Text & &quot; &quot; & txtLastName.Text End If End Sub </script> <html> <body bgcolor=&quot;#ffffff&quot;> <form id=&quot;frmName&quot; runat=&quot;server&quot;> <b>Please complete the following:</b><p /> Your Name: <asp:Label ID=&quot;lblMessage&quot; Runat=&quot;server&quot; /> <p /> First Name: <asp:TextBox ID=&quot;txtFirstName&quot; Runat=&quot;server&quot; /> <br /> Last Name: <asp:TextBox ID=&quot;txtLastName&quot; Runat=&quot;server&quot; /> <p /> <asp:Button ID=&quot;btnSubmit&quot; Text=&quot;Submit!&quot; Runat=&quot;server&quot; /> </form> </body> </html> Called each time a page is loaded
  • 10.
    Event Handling inASP.NET ASP.NET controls expose different events that can be wired up to event handlers. 1 2 3 Browser (ShopCart.aspx) Shopping Cart Server (Parse post information) Call appropriate event-handling method btnAddToCart_Click(obj,event) Prod1=Thing:Prod2=Item; Prod3=Gizmo Submit=btnAddToCart3 Add Add Add Thing Item Gizmo
  • 11.
    Hooking Up WebControl Events Web server controls expose different events that can be handled in Web Forms. The onClick attribute can be added to hook a control’s Click event to an event handler: <script runat=“server” language=“VB”> Public Sub btnSubmit_OnClick(sender as Object, e as EventArgs) Response.Write(“You clicked a button!”) End Sub </script> <asp:Button id=“btnSubmit” onClick=“btnSubmit_OnClick” runat=“server” Text=“Click here” />
  • 12.
    Hooking Up WebControl Events: Example 1 <%@ Page Language=“VB” %> <script runat=&quot;server&quot;> Public Sub btnSubmit_OnClick(sender as Object, e as EventArgs) lblMessage.Text = txtFirstName.Text + &quot; &quot; + txtLastName.Text End Sub </script> <html> <body bgcolor=&quot;#ffffff&quot;> <form id=&quot;frmName&quot; runat=&quot;server&quot;> <b>Please complete the following:</b><p /> <b>Your Name:</b> <asp:Label ID=&quot;lblMessage&quot; Runat=&quot;server&quot; /><p /> First Name: <asp:TextBox ID=&quot;txtFirstName&quot; Runat=&quot;server&quot; /><br /> Last Name: <asp:TextBox ID=&quot;txtLastName&quot; Runat=&quot;server&quot; /><p /> <asp:Button ID=&quot;btnSubmit&quot; Text=&quot;Submit!&quot; Runat=&quot;server&quot; onClick=&quot;btnSubmit_OnClick&quot; /> </form> </body> </html>
  • 13.
    <%@ Page Language=&quot;VB&quot;%><script runat=&quot;server&quot;> Public Sub ddStates_IndexChanged(sender as Object,e as EventArgs) lblMessage.Text = &quot;You selected &quot; & ddStates.SelectedItem.Text & _ &quot; which has a state code of &quot; & ddStates.SelectedItem.Value End Sub </script><html> <body bgcolor=&quot;#ffffff&quot;> <form id=&quot;frmName&quot; runat=&quot;server&quot;> <b>Select a Western State:</b> <asp:DropDownList ID=&quot;ddStates&quot; Runat=&quot;server&quot; OnSelectedIndexChanged=&quot;ddStates_IndexChanged“ AutoPostBack=&quot;True&quot; > <asp:ListItem Value=&quot;&quot; Text=&quot;Select One:&quot; /> <asp:ListItem Value=&quot;AZ&quot; Text=&quot;Arizona&quot; /> <asp:ListItem Value=&quot;CA&quot; Text=&quot;California&quot; /> <asp:ListItem Value=&quot;UT&quot; Text=&quot;Utah&quot; /> <asp:ListItem Value=&quot;WA&quot; Text=&quot;Washington&quot; /> </asp:DropDownList><p /> <b>Selection:</b> <asp:Label ID=&quot;lblMessage&quot; Runat=&quot;server&quot; /> </form> </body> </html> Hooking Up Web Control Events: Example 2
  • 14.
    Introduction to ASP.NETValidation Controls Validation controls allow input submitted through Web Forms to be validated easily. When possible, validation will occur on the client side. For older browsers (and even new browsers). validation occurs on the server side. Types of validation include: Required entry Validating specific criteria (value range, etc.) Comparing control values (does text1 = text2 ?) Range checking Pattern matching Custom validation
  • 15.
    Validation Controls inASP.NET Validation controls that can be used in ASP.NET Web Forms include: <asp:RequiredFieldValidator> <asp:RangeValidator> <asp:CompareValidator> <asp:RegularExpressionValidator> <asp:CustomValidator> <asp:ValidationSummary>
  • 16.
    Validation Controls Example<form id=&quot;frmName&quot; runat=&quot;server&quot;> <b>Please complete the following:</b><p /> <b>Valid Check:</b> <asp:Label ID=&quot;lblMessage&quot; Runat=&quot;server&quot; /><p /> Password: <asp:TextBox ID=&quot;txtPassword&quot; TextMode=&quot;Password&quot; Runat=&quot;server&quot; /> <asp:RequiredFieldValidator ID=&quot;vTxtPassword&quot; runat=&quot;server&quot; ControlToValidate=&quot;txtPassword&quot; ErrorMessage=&quot;Enter your password!&quot; />< br /> Re-Type Password: <asp:TextBox ID=&quot;txtPassword2&quot; TextMode=&quot;Password&quot; Runat=&quot;server&quot; /> <asp:RequiredFieldValidator ID=&quot;vTxtPassword2&quot; runat=&quot;server&quot; ControlToValidate=&quot;txtPassword2&quot; ErrorMessage=&quot;Re-Enter your password!&quot; /> <asp:CompareValidator ID=&quot;user_pwd_compare_validate&quot; Runat=&quot;server&quot; ControlToCompare=&quot;txtPassword&quot; ControlToValidate=&quot;txtPassword2&quot; Type=&quot;String&quot; ErrorMessage=&quot;Passwords do not match!&quot; /> <p /> <asp:Button ID=&quot;btnSubmit&quot; Text=&quot;Submit!&quot; Runat=&quot;server&quot; /> </form>