inspiring creative and innovative minds

18
INSPIRING CREATIVE AND INNOVATIVE MINDS Module 3: Creating a Microsoft ASP.NET Web Form •Creating Web Forms •Adding Server Controls to a Web Form •Creating Master Pages

Upload: talor

Post on 25-Jan-2016

33 views

Category:

Documents


3 download

DESCRIPTION

Module 3: Creating a Microsoft ASP.NET Web Form. Creating Web Forms Adding Server Controls to a Web Form Creating Master Pages. INSPIRING CREATIVE AND INNOVATIVE MINDS. Lesson: Creating Web Forms. What Is a Web Form? Creating a Web Form by Using Visual Studio 2008. What Is a Web Form?. - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

INSPIRING CREATIVE AND INNOVATIVE MINDS

Module 3: Creating a Microsoft ASP.NET Web Form

•Creating Web Forms

•Adding Server Controls to a Web Form

•Creating Master Pages

Page 2: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Lesson: Creating Web Forms

• What Is a Web Form? • Creating a Web Form by Using Visual Studio

2008

Page 3: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

What Is a Web Form?

Web Forms have the following features:

• .aspx extension

• Page attributes @ Page directive

• Body attributes

• Form attributes

<%@ Page Language=“C#" CodeFile=“NewForm.aspx.cs" Inherits=“NewForm" %><html>

<body> <form id=“form1" runat="server"> </form></body>

</html>

<%@ Page Language=“C#" CodeFile=“NewForm.aspx.cs" Inherits=“NewForm" %><html>

<body> <form id=“form1" runat="server"> </form></body>

</html>

Page 4: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Creating a Web Form by Using Visual Studio 2008

• Create a new Web application – Default Web Form for a new application:

Default.aspx

• Add additional Web Forms to an existing application– In Solution Explorer user the Add New Item dialog

box

Page 5: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Lesson: Adding Server Controls to a Web Form

• What Is a Server Control?• Types of Server Controls• Saving View State • HTML Server Controls • Web Server Controls • Discussion: Selecting the Appropriate Control

Page 6: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

What Is a Server Control?

Server controls:• Contain runat="server" attribute

–Events happen on the server–View state saved

• Provide built-in functionality• Provide a common object model

–All have ID and Text attributes

• Create browser-specific HTML

<asp:Button ID="Button1" runat="server" Text="Submit"/><asp:Button ID="Button1" runat="server" Text="Submit"/>

Page 7: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Types of Server Controls

• HTML server controls• Web server controls

– Intrinsic controls– Validation controls– Rich controls– List-bound controls– Login controls

Page 8: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Saving View State

• View state

• Control state

Use view state to maintain the control's contents

Use control state to maintain the core behavior of the control

• HiddenField control

<asp:ListBox ID="ListName" EnableViewState="true" runat="server">

</asp:ListBox>

<asp:ListBox ID="ListName" EnableViewState="true" runat="server">

</asp:ListBox>

Page 9: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

HTML Server Controls

• Based on HTML elements

• Exist in the System.Web.UI.HtmlControls namespace

<input type="text" id="txtName" runat="server" /><input type="text" id="txtName" runat="server" />

Page 10: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Web Server Controls

• Exist in the System.Web.UI.WebControls namespace

Control syntax

HTML that is generated by the control

<asp:TextBox id="TextBox1" runat="server">Text_to_Display </asp:TextBox>

<asp:TextBox id="TextBox1" runat="server">Text_to_Display </asp:TextBox>

<input name="TextBox1" type="text" value="Text_to_Display" Id="TextBox1"/><input name="TextBox1" type="text" value="Text_to_Display" Id="TextBox1"/>

Page 11: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Discussion: Selecting the Appropriate Control

• Is it ever appropriate to use HTML server controls instead of Web server controls?

Page 12: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Lesson: Creating Master Pages

• What Are Master Pages? • Content Pages• Runtime Behavior of Master Pages• Discussion: Advantages of Master Pages

Page 13: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

What Are Master Pages?

• Master pages provide a simple method to create a consistent layout across a Web site

• Master pages have the following features:

File extension of .master instead of .aspx

@ Master directive instead of the @ Page directive

ContentPlaceHolder controls, which define the areas where the replaceable content appears

Top-level HTML elements for a page, such as html, head, and form

• Master pages can be nested

Page 14: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Content Pages

• Content pages are Web pages that reference a master page

MasterPageFile attribute in @ Page directive

• Content pages have their own page-specific content

<%@ Page Language="C#" MasterPageFile="~/benefitsMaster.master" AutoEventWireup="true" CodeFile="contentPage.aspx.cs" Inherits="contentPage" %>

<%@ Page Language="C#" MasterPageFile="~/benefitsMaster.master" AutoEventWireup="true" CodeFile="contentPage.aspx.cs" Inherits="contentPage" %>

Page 15: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Runtime Behavior of Master Pages

Master Page Content Page

Resulting Web Page

Page 16: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Discussion: Advantages of Master Pages

• What are the advantages of master pages in a Web application?

Page 17: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

Lab: Creating a Microsoft ASP.NET Web Form

• Exercise 1: Creating the Default.aspx Web Form

• Exercise 2: Creating the benefitsMaster Master Page

• Exercise 3: Creating the life.aspx Web Form

Estimated time: 30 minutes

Page 18: INSPIRING CREATIVE AND  INNOVATIVE  MINDS

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