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#] private void Button1_Click(object sender, System.EventArgs e) { } [Visual C#] private void Button1_Click(object sender, System.EventArgs e) { }

What Are Code-Behind Pages? Separation of code from content –Developers and UI designers can work independently Form1.aspxForm1.aspx Form1.aspx.cs Form1.aspx.cs or Form1.aspx.vb code code Separate filesSingle file

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 Page directive to link the two files –CodeFile –Inherits –AutoEventWireup Pre-compile or JIT-compile Default.aspxDefault.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 Internet Client-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 or 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 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

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

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 events Change Events Action Events Textbox1_Changed Page_PreInit Button1_Click Page_Load Page_PreLoad Page_Init Page_Unload Page 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

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

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 If End 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 If End 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(); } <asp:DropDownList id=“occupationList" autoPostBack="true" runat="server" > Program Manager Tester User Assistance You selected: <asp:Label id=“selectedValueLabel" Text=" " runat="server" /> <asp:DropDownList id=“occupationList" autoPostBack="true" runat="server" > Program Manager Tester User Assistance You selected: <asp:Label id=“selectedValueLabel" Text=" " runat="server" />

Demonstration: Linking Controls Together View the controls Link a Label to a ListBox control Bind data to the Label control Build and browse

Notes Page Over-flow Slide. Do Not Print Slide. See Notes pane.

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 Control Logon information Virtual machine 2310C-LON-DEV-04 User name Student Password Pa$$w0rd Estimated time: 45 minutes

Lab Scenario Medical medical.aspx Benefits Home Page Default.aspx Life Insurance life.aspx Retirement retirement.aspx Dentists dental.aspx Doctors doctors.aspx Logon Page login.aspx Logon Page login.aspx Registration register.aspx Registration register.aspx Prospectus prospectus.aspx XML Web Service DentalService1.asmx Page Header header.ascx Lab Web Applicati on User Control nameDate.ascx Menu Component Benefits.cs or Benefits.vb Master Page benefitsMaster.master LINQ to SQL Classes Doctors.dbml ASPState Dentists Doctors XML 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