Multimedia and Advance Web Technologies

By:

Dr. Mohammad Shoab

Week 10 & 11

Introduction to ASP.NET

• ASP.NET is part of the Microsoft .NET framework
• ASP.NET is an effective and flexible technology for creating interactive and dynamic web pages.
• It is a convergence of two major Microsoft technologies:
• Active Server Pages (ASP)
• Active Server Pages is Microsoft’s server side scripting technology for building dynamic web pages.
• .NET Framework
• The .NET Framework is a suite of technologies designed by Microsoft where program development takes place.

​

2

Multimedia and Advance Web Technologies

Department of Computer Science

Introduction to ASP.NET

• It is built on .NET Common Language Runtime
• ASP.NET :
• Provides better user authentication
• Has better language support.
• Has a large set of new controls (web controls)
• Uses compiled code, which increases the performance of the applications
• It is programmable using any of the .NET languages (VB.NET, C#, VJ# etc).
• The ASP.NET pages are saved with the .aspx extension.

​

3

Multimedia and Advance Web Technologies

Department of Computer Science

4

ASP.NET Architecture

Multimedia and Advance Web Technologies

Department of Computer Science

Working of an ASP.NET Application

To execute an ASP.NET file, the following steps are followed:

​

1. A web browser sends a request for an ASP.NET file to the web server by using a URL.

​

• The web server receives the request and retrieves the appropriate ASP.NET file from the disk or memory.

​

• The web server forwards the file to the ASP.NET script engine for processing.

5

Multimedia and Advance Web Technologies

Department of Computer Science

Working of an ASP.NET Application

4. The ASP.NET script engine reads the file from top to bottom and executes it.

​

5. The processed ASP.NET file is generated as an HTML document and the ASP.NET script engine sends the HTML page to the Web server.

​

6. The Web server then sends the HTML code to the client which interprets the output and displays it.

6

Multimedia and Advance Web Technologies

Department of Computer Science

Advantages of ASP.NET

• Easy Programming Model
• Flexible Language Options
• Compiled Execution
• Rich Output Caching
• Web-Farm Session State
• Enhanced Reliability
• Master Pages
• Themes
• Improved Security
• Web Services
• Improved Performance and Scalability

7

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls, Validation Controls, User Controls, Master Pages

8

Multimedia and Advance Web Technologies

Department of Computer Science

Web Controls 

• A control is an object that can be drawn on to the Web Form to enable or enhance user interaction with the application.
• When you create ASP.NET Web pages, you can use these types of controls:
• HTML server controls
• Web server controls
• Validation controls
• User controls

9

Multimedia and Advance Web Technologies

Department of Computer Science

• HTML server controls   HTML elements exposed to the server so you can program them. HTML server controls expose an object model that maps very closely to the HTML elements that they render.

​

• Web server controls   Controls with more built-in features than HTML server controls. Web server controls include not only form controls such as buttons and text boxes, but also special-purpose controls such as a calendar, menus, and a tree view control. Web server controls are more abstract than HTML server controls in that their object model does not necessarily reflect HTML syntax.

10

Multimedia and Advance Web Technologies

Department of Computer Science

• Validation controls  Controls that incorporate logic to enable you to what users enter for input controls such as the TextBox control. Validation controls enable you to check for a required field, to test against a specific value or pattern of characters, to verify that a value lies within a range, and so on. For more information, see Validation ASP.NET Controls.

​

• User controls  Controls that you create as ASP.NET Web pages. You can embed ASP.NET user controls in other ASP.NET Web pages, which is an easy way to create toolbars and other reusable elements. For more information

11

Multimedia and Advance Web Technologies

Department of Computer Science

HTML server controls

• HTML server controls are HTML elements (or elements in other supported markup, such as XHTML) containing attributes that make them programmable in server code. By default, HTML elements on an ASP.NET Web page are not available to the server. Instead, they are treated as opaque text and passed through to the browser. However, by converting HTML elements to HTML server controls, you expose them as elements you can program on the server.

​

• The object model for HTML server controls maps closely to that of the corresponding elements. For example, HTML attributes are exposed in HTML server controls as properties.

12

Multimedia and Advance Web Technologies

Department of Computer Science

HTML server controls

• Any HTML element on a page can be converted to an HTML server control by adding the attribute runat="server". During parsing, the ASP.NET page framework creates instances of all elements containing the runat="server" attribute. If you want to reference the control as a member within your code, you should also assign an id attribute to the control.

​

• The page framework provides predefined HTML server controls for the HTML elements most commonly used dynamically on a page: the form element, the input elements (text box, check box, Submit button), the select element, and so on. These predefined HTML server controls share the basic properties of the generic control, and in addition, each control typically provides its own set of properties and its own event.

13

Multimedia and Advance Web Technologies

Department of Computer Science

Web server controls

• Web server controls are a second set of controls designed with a different emphasis. They do not necessarily map one-to-one to HTML server controls. Instead, they are defined as abstract controls in which the actual markup rendered by the control can be quite different from the model that you program against. For example, a RadioButtonList Web server control might be rendered in a table or as inline text with other markup.
• Web server controls include traditional form controls such as buttons and text boxes as well as complex controls such as tables. They also include controls that provide commonly used form functionality such as displaying data in a grid, choosing dates, displaying menus, and so on.
• Web server controls offer all of the features described above for HTML server controls (except one-to-one mapping to elements) and these additional features:

14

Multimedia and Advance Web Technologies

Department of Computer Science

Web server controls

• A rich object model that provides type-safe programming capabilities.
• Automatic browser detection. The controls can detect browser capabilities and render appropriate markup.
• For some controls, the ability to define your own layout for the control using Templates.
• For some controls, the ability to specify whether a control's event causes immediate posting to the server or is instead cached and raised when the page is submitted.
• Support for themes, which enable you to define a consistent look for controls throughout your site. For details, see ASP.NET Themes and Skins.
• Ability to pass events from a nested control (such as a button in a table) to the container control.

15

Multimedia and Advance Web Technologies

Department of Computer Science

Label

The Label Web Server control The Label Web Server control is used to label other parts of the application. They are used to display text which the user can't change. To display text on a label we use the text property.

16

Multimedia and Advance Web Technologies

Department of Computer Science

Literal

• A Literal Web Server control doesn't have any visual appearance on a Web FormA Literal Web Server control doesn't have any visual appearance on a Web Form but is used to insert literal text into a Web Form. This control makes it possible to add HTML codeA Literal Web Server control doesn't have any visual appearance on a Web FormA Literal Web Server control doesn't have any visual appearance on a Web Form but is used to insert literal text into a Web Form. This control makes it possible to add HTML code directly in the code designer window without switching to design view and clicking the HTML button to edit the HTML.

17

Multimedia and Advance Web Technologies

Department of Computer Science

Buttons

​

A Button Web Server control A Button Web Server control is a control which we click and release to perform some action.

​

​

• Button Event

The default event of the Button is the Click event which looks like this in code:

Private Sub Button1_Click(ByVal sender As System Private Sub Button1_Click(ByVal sender As System.Object,_�ByVal e As System.EventArgs) Handles Button1.Click��'Implementation Omitted��End Sub

18

Multimedia and Advance Web Technologies

Department of Computer Science

Link Button

​

• The LinkButton Web server control is a hyperlink style button control. It looks like a hyperlink control but is actually a button control with click and command events.

19

Multimedia and Advance Web Technologies

Department of Computer Science

ImageButton Control

​

• The ImageButton Web server control is used to display images and responds to mouse clicks on the image.

​

• To set the Image for this control we use the ImageUrl property. Image buttons support both Click and Command events. When we handle Click events, we are passed the actual location of the mouse in the image. We can use Command event handlers to make the image button work like a command button.

20

Multimedia and Advance Web Technologies

Department of Computer Science

DropDownList

The DropDownList Web server control The DropDownList Web server control is same as the ListBox control but it supports only single selection and displays items in a drop-down manner

21

Multimedia and Advance Web Technologies

Department of Computer Science

ListBox

​

• The ListBox Web server controlThe ListBox Web server control displays a list of items from which we can make a selection. We can select one or more items from the list of items displayed.

22

Multimedia and Advance Web Technologies

Department of Computer Science

CheckBox

​

• The CheckBox Web server controlThe CheckBox Web server control gives us an option to select, say, yes/no or true/false. A checkbox is clicked to select and clicked again to deselect some option. When a checkbox is selected, a check (a tick mark) appears indicating a selection.

23

Multimedia and Advance Web Technologies

Department of Computer Science

CheckBoxList

• The CheckBoxList Web server control displays a number of checkboxes at once.
• This control provides a multi selection check box group that can be dynamically generated with data binding.
• It contains an Items collection with members that correspond to individual items in the list.

24

Multimedia and Advance Web Technologies

Department of Computer Science

RadioButtonList

​

• The RadioButtonList Web server controlThe RadioButtonList Web server control is used to display a list of radio buttons.
• This control provides us with a single-selection radio button group that can be dynamically generated via data binding.
• The Items property of this control allows us to add items to the control.

25

Multimedia and Advance Web Technologies

Department of Computer Science

RadioButton

The RadioButton Web server control The RadioButton Web server control is similar to CheckBox but RadioButtons are displayed as rounded instead of box.

26

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• A validation control (or validator) determines whether the data in another web control is in the proper format, before the data is processed.
• When the XHTML for our page is created, the validator is converted into JavaScript that performs the validation.
• JavaScript is a scripting language that enhances the functionality and appearance of web pages and is typically executed on the client.
• Because some clients disable or do not support scripting, ASP.NET validation controls can function on the client,�on the server or both.

​

27

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• Rich, declarative validation
• Validation declared separately from input control
• Extensible validation framework
• Supports validation on client and server
• Server-side validation is always done
• Prevents users from spoofing Web Forms

28

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• <asp:RequiredFieldValidator>
• Ensures that a value is entered
• <asp:RangeValidator>
• Checks if value is within minimum and maximum values
• <asp:CompareValidator>
• Compares value against constant, another control or data type
• <asp:RegularExpressionValidator>
• Tests if value matches a predefined pattern
• <asp:CustomValidator>
• Lets you create custom client- or server-side validation function
• <asp:ValidationSummary>
• Displays list of validation errors in one place

29

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• Validation controls are derived from System.Web.UI.WebControls.BaseValidator, which is derived from the Label control
• Validation controls contain text which is displayed only if validation fails
• Text property is displayed at control location
• ErrorMessage is displayed in summary

30

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• Validation controls are associated with their target control using the ControlToValidate property

​

​

​

​

​

• Can create multiple validation controls with the same target control

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

​

<asp:RequiredFieldValidator id="Req1"

ControlToValidate="TextBox1"

Text="Required Field" runat=server />

31

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• Page.IsValid indicates if all validation controls on the page succeed

void Submit_click(object s, EventArgs e) {

if (Page.IsValid) {

Message.Text = "Page is valid!";

}

}

32

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• Can force down-level option
• Only server-side validation

​

​

​

​

• http://msdn.microsoft.com/en-us/magazine/bb986074.aspx

​

<% @ Page Language="c#"

ClientTarget="DownLevel" %>

33

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• The code-behind file validates the information again in case the client has JavaScript disabled.
• The submission of a form sends its data to the server and causes the current page to be requested again is called a postback.
• The IsPostBack property of class Page determines whether the page is being loaded due to a postback.
• The current Page’s Validate method validates the information as specified by the validation controls in the Web Form.

34

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• Use the IsValid property of class Page to check whether all the validators succeeded.
• You should always call method Validate before using property IsValid.
• When data is posted to the web server, the form’s data becomes accessible to the web application through the properties of the various web controls.

35

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

Examining the Client-Side XHTML for a Web Form with Validation

• If a validation control’s EnableClientScript property is True, the validator performs client-side validation as the user edits the Web Form.
• You do not need to be able to create or even understand the JavaScript validation code—the validators are converted to working JavaScript by ASP.NET.
• The EnableViewState attribute determines whether a web control’s current state is remembered each time a postback occurs.

36

Multimedia and Advance Web Technologies

Department of Computer Science

Server Controls �Validation Controls

• The default value, True, indicates that the control’s state at the last postback is retained.
• A hidden input called __VIEWSTATE stores the controls’ data as an encoded string so the server can determine whether it has changed.

Performance Tip

Setting EnableViewState to False reduces the amount of data passed to the web server with each request.

37

Multimedia and Advance Web Technologies

Department of Computer Science

Validation Controls Example

38

Multimedia and Advance Web Technologies

Department of Computer Science

Validation Controls Example

39

Multimedia and Advance Web Technologies

Department of Computer Science

Validation Controls Example

40

Multimedia and Advance Web Technologies

Department of Computer Science

Validation Controls Example

41

Multimedia and Advance Web Technologies

Department of Computer Science

Project Structure

42

Multimedia and Advance Web Technologies

Department of Computer Science

Master Pages

Creating a Master Page

• The master page defines the elements we want to appear on each page. A master page is like a base class in a visual inheritance hierarchy.
• The master page contains placeholders for custom content created in each content page.
• To create a master page, right click the location of the website in the Solution Explorer and select Add New Item….
• Select Master Page and specify Name.master as the file name.
• Master pages have the file-name extension .master and, like Web Forms, can optionally use a code-behind file to define additional functionality.

​

​

43

Multimedia and Advance Web Technologies

Department of Computer Science

Master Pages

• The markup for a master page is almost identical to that�of a Web Form.
• A master page contains a Master directive, which specifies that this file defines a master page using the indicated Language for any code.
• Next, set the title of the page.
• The master page contains two ContentPlaceHolder controls for content that will be defined by a content page.

​

​

​

44

Multimedia and Advance Web Technologies

Department of Computer Science

Master Pages

• At this point, you can edit the master page in Design mode as if it were an ASPX file.
• The ContentPlaceHolder control appears as a rectangle with a purple outline indicating the control’s type and ID.
• Using the Properties window, change the ID of this control to bodyContent.

​

45

Multimedia and Advance Web Technologies

Department of Computer Science

Master Pages

• Place the cursor to the left of ContentPlaceHolder and select Table > Insert Table.
• In the Insert Table dialog, set Rows to 2 and Columns to 1. In the Layout section, specify a Cell padding and a Cell spacing of 0.
• Set both the width and height of the table to 100 percent. Make sure that the Size value in the Borders section is 0.
• Click OK to create a table that fills the page and contains two rows.
• Modify style’s Block category vertical-align property of the bottom table cell to top and drag the ContentPlaceHolder into this cell.
• Modify style’s Position category Height of the top table cell to 130. Add an Image control named headerImage with its ImageUrl property set to the bug2bug.png file.

46

Multimedia and Advance Web Technologies

Department of Computer Science

Bug2Bug.master page that defines a logo image header for all pages

47

Multimedia and Advance Web Technologies

Department of Computer Science

Master Pages

Creating a Content Page

• Right click the master page in the Solution Explorer and�select Add Content Page. Rename the WebForm1.aspx to ContentPage.aspx, then open it in Source mode
• The Page directive indicates the MasterPageFile that is used as a starting point for this new page’s design.
• The Title property specifies the title that will be displayed in the web browser’s title bar when the content page is loaded.
• This value, which we set to Create a New User, replaces the value (i.e., Bug2Bug) set in the title element of the master page.
• Because CreateNewUser.aspx specifies Bug2Bug.master as the page’s MasterPageFile, it implicitly contains the contents of the master page.

​

48

Multimedia and Advance Web Technologies

Department of Computer Science

Master Pages

• The content page contains Content controls, in which we will place page-specific content that will replace the master page’s ContentPlaceHolders.
• The ContentPlaceHolderID property of the Content control identifies which ContentPlaceHolder the control should replace
• The relationship between a content page and its master page is more evident in Design mode:

49

Multimedia and Advance Web Technologies

Department of Computer Science

Master Pages

Adding a CreateUserWizard Control to a Content Page

• CreateNewUser.aspx is the page in our website that allows first-time visitors to create user accounts.
• To provide this functionality, we use a CreateUserWizard control.
• Place the cursor inside the Content control in Design mode and double click CreateUserWizard in the Toolbox to add it to the page. Open the CreateUserWizard Tasks smart-tag menu and click Auto Format. Select the Professional color scheme.
• Set the CreateNewUser.aspx as the default page by right clicking on it and Set As Start Page.
• When the user clicks the Create User button, ASP.NET verifies that all the form’s requirements were fulfilled and attempts to create the user account. (we will use this next week)
• In CreateNewUser.aspx, the Page directive indicates that this content page inherits content from Bug2Bug.master.

​

​

50

Multimedia and Advance Web Technologies

Department of Computer Science

CreateUserWizard requires 'jquery'

• You will get this error:
• WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).
• Add the following to web.config configuration:

<appSettings>

<add

key="ValidationSettings:UnobtrusiveValidationMode"

value="none"/>

</appSettings>

​

51

Multimedia and Advance Web Technologies

Department of Computer Science

Creating Controls

• ASP.NET provides two ways to create your own server-side controls
• User Controls: Essentially a mini .aspx file
• Custom Controls: You derive a class from System.Web.UI.Control

​

52

Multimedia and Advance Web Technologies

Department of Computer Science

Creating Controls�User Controls

• User controls simplify the reuse of code and UI components within a Web application
• A user control is a user-defined Web server control with an .ascx extension
• Contains HTML, but not the <HTML>, <BODY>, or <FORM> tags
• Enables full encapsulation
• Supports nested controls
• Separate code namespace
• Separate code language
• Can partition work across multiple developers
• Great way to reuse work across multiple pages and applications

53

Multimedia and Advance Web Technologies

Department of Computer Science

Why Use User Controls?

• Reuse user interface and code

Page3.aspx

Application A

Application B

Adding a User Control

• Registers user control for use on a page
• Use the @ Register directive to include a user control in an ASP.NET Page

​

​

​

• Insert the user control in a Web Form�

​

• Use Get and Set properties of the user control

<%@ Register TagPrefix="demo"

TagName="validNum" Src="numberbox.ascx" %>

<demo:validNum id="num1" runat="server"/>

num1.pNum = 5; //uses Set

x = num1.pNum; //uses Get

55

Multimedia and Advance Web Technologies

Department of Computer Science

Example User Control

• Create BeforeUserControl.aspx
• Add 2 Textbox controls with RequiredFieldValidator and RangeValidator
• Add a Button that adds the values in these textboxes and displays the sum in a Label
• Create a Web User Control numberbox.ascx
• Add a Textbox controls with RequiredFieldValidator and RangeValidator
• Create AfterUserControl.aspx
• Register the user control numberbox.ascx
• Add 2 numberbox controls
• Add a Button that adds the pNum properties in these numberboxes and displays the sum in a Label

​

​

56

Multimedia and Advance Web Technologies

Department of Computer Science

Creating Controls�Programmatic Use of User Controls

• Page.LoadControl(string source)
• Dynamically instantiates a user control
• Create an instance:

Control numbox1 = Page.LoadControl("numberbox.ascx");

• Insert into the control hierarchy:

myPanel.Controls.Add(foo);

• CreateDynamicUserControls.aspx

​

57

Multimedia and Advance Web Technologies

Department of Computer Science

Creating Controls�Custom Controls

• Must implement Render() method
• Can expose properties, methods and events
• Should maintain state
• Should handle postback data
• Can generate client-side script to do postback
• Should handle child controls
• Render them
• Handle events
• Can expose and implement templates
• Can handle data binding

58

Multimedia and Advance Web Technologies

Department of Computer Science

Creating Controls�Custom Controls vs. User Controls

59

Multimedia and Advance Web Technologies

Department of Computer Science

The End

60

Multimedia and Advance Web Technologies

Department of Computer Science

Exercise

Q1. Explain ASP.NET.

Q2. Draw the diagram of ASP.NET architecture.

Q3. What are the advantages of ASP.NET

Q4. What is web control? Write the types of web controls.

Q5. Explain HTML server controls.

Q6. Explain web server controls.

Q7. Explain validation controls.

Q8. What is master page?

Q9. What are the differences between custom controls and user controls.

61

Multimedia and Advance Web Technologies

Department of Computer Science

Q10. What is ASP?

1. Alive Server Pages
2. Alternate Server Pages
3. Alias Server Pages
4. Active Server Pages

​

Q11. A web browser sends a request for an ASP.NET file to the web server by using a

1. URI
2. UDP
3. URL
4. UCK

​

62

Multimedia and Advance Web Technologies

Department of Computer Science

Q12. A control is an object that can be drawn on to the

1. Client form
2. Web form
3. Server form
4. AJAX form

​

Q13. When the XHTML for our page is created, the validator is converted into

1. Java Script
2. VB Script
3. Node.js
4. None of the above

​

​

63

Multimedia and Advance Web Technologies

Department of Computer Science

Q14. Validation controls contain text which is displayed only if

1. Validation pass
2. Validation fail
3. Validation terminated
4. None of the above

​

Q15. The master page defines the elements we want to appear on

1. One page
2. Two page
3. Each page
4. None of the above

​

​

64

Multimedia and Advance Web Technologies

Department of Computer Science