inspiring creative and innovative minds module 4: adding code to a microsoft asp.net web form...
TRANSCRIPT
INSPIRING CREATIVE AND INNOVATIVE MINDS
Module 4: Adding Code to a Microsoft ASP.NET Web Form• Implementing Code-Behind Pages
• Adding Event Procedures to Web Server Controls
• Handling Page Events
Lesson: Implementing Code-Behind Pages
• Methods for Implementing Code• Writing Inline Code• What Are Code-Behind Pages?• How Code-Behind Pages Work
Methods for Implementing Code
• Three methods for adding code:– Put code in the same file as content (mixed)– Put code in a separate section of the content file
(inline code)– Put code in a separate file (code-behind pages)
• Code-behind pages are the Visual Studio 2008 default
Writing Inline Code
• Code and content in the same file• Different sections in the file for code and HTML
[Visual C#]<SCRIPT Language="c#" runat="server"> private void Button1_Click(object sender, System.EventArgs e) { }</SCRIPT>
<html xmlns="http://www.w3.org/1999/xhtml"> <asp:Button ID=“Btn1" runat="server" Text=“Button" /></html>
[Visual C#]<SCRIPT Language="c#" runat="server"> private void Button1_Click(object sender, System.EventArgs e) { }</SCRIPT>
<html xmlns="http://www.w3.org/1999/xhtml"> <asp:Button ID=“Btn1" runat="server" Text=“Button" /></html>
What Are Code-Behind Pages?
• Separation of code from content– Developers and UI designers can work independently
Form1.aspxForm1.aspx Form1.aspxForm1.aspx Form1.aspx.csForm1.aspx.csor Form1.aspx.vbor Form1.aspx.vb
<tags><tags> codecode
codecode
Separate filesSingle file
<%@ Page Language="C#" AutoEventWireup="true“ CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Page Language="C#" AutoEventWireup="true“ CodeFile="Default.aspx.cs" Inherits="_Default" %>
public partial class _Default : System.Web.UI.Page{ private void Button1_Click() { ... }}
public partial class _Default : System.Web.UI.Page{ private void Button1_Click() { ... }}
How Code-Behind Pages Work
• Create separate files for user interface and interface logic• Use @ Page directive to link the two files
– CodeFile– Inherits– AutoEventWireup
• Pre-compile or JIT-compile
Default.aspx Default.aspx.cs
Lesson: Adding Event Procedures to Web Server Controls
• What Are Event Procedures?• Client-Side Event Procedures• Server-Side Event Procedures• Multimedia: Client-Side and Server-Side
Events• Creating Event Procedures• Demonstration: Creating an Event Procedure• Interacting with Controls in Event Procedures
What Are Event Procedures?
• Action in response to a user’s interaction with the controls on the page
Client-Side Event Procedures
Internet
• Implement for only HTML controls
• Interpreted by the browser and run on the client
• No access to server resources
• Use <SCRIPT language="language">
InternetClient-side
.HTM Pages
Server-Side Event Procedures• Implement for both Web and HTML server controls
• Compiled and run on the server
• Access to server resources
• Use <SCRIPT language=“cs" runat="server"> or <SCRIPT language=“vb" runat="server">
InternetInternet
Internet Server-side
.ASPX Pages
Multimedia: Client-Side and Server-Side Events
Creating Event Procedures• Visual Studio 2008 creates an event
procedure template
[Visual Basic]Private Sub Button1_Click(ByVal s As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
End Sub
[Visual Basic]Private Sub Button1_Click(ByVal s As System.Object, _
ByVal e As System.EventArgs) Handles Button1.Click
End Sub
[Visual C#]private void Button1_Click(object s, System.EventArgs e){
}
[Visual C#]private void Button1_Click(object s, System.EventArgs e){
}
Note: Visual Basic uses the Handles keyword so that you can add many event procedures to one eventNote: Visual Basic uses the Handles keyword so that you can add many event procedures to one event
Demonstration: Creating an Event Procedure
• Create a Web Form by using Visual Studio 2008
• Add controls to the Web Form• Add a Click event procedure• Browse the page
Interacting with Controls in Event Procedures• Read the properties of Web server
controls
• Output responses to other Web server controls
[Visual C#]greetingString = "Hello " & nameTextBox.Text;
[Visual C#]greetingString = "Hello " & nameTextBox.Text;[Visual Basic]greetingString = "Hello " + nameTextBox.Text;
[Visual Basic]greetingString = "Hello " + nameTextBox.Text;
[Visual C#]greetingLabel.Text = "new text";[Visual C#]greetingLabel.Text = "new text";
[Visual Basic]greetingLabel.Text = "new text"[Visual Basic]greetingLabel.Text = "new text"
Lesson: Handling Page Events
• The Page Event Life Cycle• Multimedia: The PostBack Process• Demonstration: Handling Events• Handling Page.IsPostback Events• Linking Two Controls Together• Demonstration: Linking Controls Together
The Page Event Life Cycle
Control eventsControl events
Change EventsChange Events
Action Action EventsEvents
Textbox1_ChangedTextbox1_Changed
Page_PreInitPage_PreInit
Button1_ClickButton1_Click
Page_LoadPage_Load
Page_PreLoadPage_PreLoad
Page_InitPage_Init
Page_UnloadPage_Unload
Page is disposedPage is disposed
Multimedia: The PostBack Process
Demonstration: Handling Events• View the page
• Change a check box to a Web server control
• Implement a Page.IsPostBack test
Handling Page.IsPostback Events• Page_Load fires on every request
– Use Page.IsPostBack to execute conditional logic
– Page.IsPostBack prevents reloading for each postback
[Visual Basic]Protected Sub Page_Load(ByVal s As System.Object, _ ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then End IfEnd Sub
[Visual Basic]Protected Sub Page_Load(ByVal s As System.Object, _ ByVal e As System.EventArgs) Handles Me.Load If Not Page.IsPostBack Then End IfEnd Sub
[Visual C#]protected void Page_Load(object sender, EventArgs e){ if (!Page.IsPostBack) { }}
[Visual C#]protected void Page_Load(object sender, EventArgs e){ if (!Page.IsPostBack) { }}
Linking Two Controls Together
• Linking one control to another is useful for taking values from list boxes or drop-down lists
• Data binding
[Visual Basic]Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load selectedValueLabel.DataBind()End Sub
[Visual Basic]Protected Sub Page_Load(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Load selectedValueLabel.DataBind()End Sub
[Visual C#]protected void Page_Load(object sender, EventArgs e){ selectedValueLabel.DataBind();}
[Visual C#]protected void Page_Load(object sender, EventArgs e){ selectedValueLabel.DataBind();}
<form runat="server"><asp:DropDownList id=“occupationList"
autoPostBack="true" runat="server" ><asp:ListItem>Program Manager</asp:ListItem><asp:ListItem>Tester</asp:ListItem><asp:ListItem>User Assistance</asp:ListItem>
</asp:DropDownList><p>You selected: <asp:Label id=“selectedValueLabel"
Text="<%# occupationList.SelectedItem.Text %>"runat="server" />
</p></form>
<form runat="server"><asp:DropDownList id=“occupationList"
autoPostBack="true" runat="server" ><asp:ListItem>Program Manager</asp:ListItem><asp:ListItem>Tester</asp:ListItem><asp:ListItem>User Assistance</asp:ListItem>
</asp:DropDownList><p>You selected: <asp:Label id=“selectedValueLabel"
Text="<%# occupationList.SelectedItem.Text %>"runat="server" />
</p></form>
Demonstration: Linking Controls Together• View the controls
• Link a Label to a ListBox control
• Bind data to the Label control
• Build and browse
Lab: Adding Functionality to a Web Application
• Exercise 1: Creating a Page_Load Event Procedure
• Exercise 2: Creating a Click Event Procedure • Exercise 3: (If Time Permits): Implementing a
Component in a User ControlLogon information
Virtual machine 2310C-LON-DEV-04
User name Student
Password Pa$$w0rd
Estimated time: 45 minutes
Lab Scenario
Medicalmedical.aspxMedicalmedical.aspx
BenefitsHome PageDefault.aspx
BenefitsHome PageDefault.aspx
Life Insurancelife.aspxLife Insurancelife.aspx
Retirementretirement.aspxRetirementretirement.aspx
Dentistsdental.aspxDentistsdental.aspx
Doctorsdoctors.aspx Doctorsdoctors.aspx
Logon Pagelogin.aspxLogon Pagelogin.aspx
Registrationregister.aspxRegistrationregister.aspx
Prospectusprospectus.aspxProspectusprospectus.aspx XML Web
ServiceDentalService1.asmx
XML Web ServiceDentalService1.asmx
Page Headerheader.ascxPage Headerheader.ascx
Lab Web Application
User ControlnameDate.ascxUser ControlnameDate.ascx
Menu ComponentBenefits.cs or Benefits.vbMenu ComponentBenefits.cs or Benefits.vb
Master PagebenefitsMaster.masterMaster PagebenefitsMaster.master
LINQ to SQLClassesDoctors.dbml
LINQ to SQLClassesDoctors.dbml
ASPState
DentistsDoctorsXML Files
Web.config
TempDB
Lab Review
Review Questions• How can you run code only when a Web page
loads for the first time?• Where do the control event procedures occur
in the page event life cycle?• What is the default event procedure for
common controls?• How can you add items to a list in Design
view?
Module Review and Takeaways
• Review Questions• Real-World Issues and Scenarios • Best Practices