1

2

3

4

5

6

7

8

Note:

1. In this example a Web form contains a TextBox server control, Label server control and a Button server control.

2. Next to the text box, a RequiredFieldValidator server control is placed, whose job is to check whether user entered any data in the text box or not.

3. When the page is run the user is expected to enter some text in the TextBoxcontrol

4. If the button is clicked without entering anything in the TextBox control, RequiredFieldValidator control will display the error message

5. Otherwise, the Label control displays the data entered in the text box control.

9

10

11

Note:

1. In this example a Web form contains two TextBox server controls. One to accept a password and another to retype the same password from the user. Also a Button and a Label server control are placed on the page

2. Next to the second text box (for retyping the password), a CompareValidator server control is placed. It’s job is to compare the password entered in the second text box with that of the first text box.

3. When the page is run the user is expected to enter same password in both the text boxes.

4. If user clicks the button after entering two different passwords in those text boxes, then CompareValidator control will display the error message

5. Otherwise Label control will display a message “Password match”

12

13

Note:

1. In this example a Web form contains a TextBox server control, a Button server control and a Label server control.

2. Next to the text box, a RangeValidator server control is placed, whose job is to check whether the age entered by the user falls between 30 and 40 or not.

3. When the page is run the user is expected to enter age between 30 and 40 and not outside the mentioned range in the TextBox control

4. If the user button clicks the button, after entering an age, which falls outside the mentioned range, in the TextBox control, RangeValidator control will display the error message

5. Otherwise Label control will display “VALID PAGE”.

14

15

16

Note:

1. In this example a Web form contains a TextBox server control to accept an user id, Label server control and a Button server control.

2. Next to the text box, a RegularExpressionValidator server control is placed, whose job is to check whether user entered user id is in the email address format or not

3. When the page is run the user is expected to enter user id in the TextBox control

4. If user clicks the button after an user id, which does not match the email address format, in the TextBox control, RegularExpressionValidatorValidator control will display the error message

5. Otherwise, the Label control displays a message, “Thanks for entering email address…”.

17

18

19

Note:

1. In this example a Web form contains a TextBox server control to accept a number, Label server control and a Button server control.

2. Next to the text box, CustomValidator server control is placed, whose job is to check whether user entered number is divisible by 5 or not

3. When the page is run the user is expected to enter a number in the TextBox control

4. If user clicks the button after entering any number, which is not divisible by 5, in the TextBox control, CustomValidatorValidator control will display the error message

5. Otherwise, the Label control displays a message, “VALID NUMBER..”

6. In this case, the custom validation code has been written in JavaScript in Source part of the .aspx file.

7. ClientValidationFunction property of CustomValidator control is used to accept the JavaScript function name.

8. When the submit button is clicked, even before page submission, the JavaScript method is called by the CustomValidator control and validation is done on the text box control.

9. If validation fails, then the page is not submitted to the server.

20

Note:

1. In this example a Web form contains a TextBox server control to accept a number, Label server control and a Button server control.

2. Next to the text box, CustomValidator server control is placed, whose job is to check whether user entered number is divisible by 5 or not

3. When the page is run the user is expected to enter a number in the TextBox control

4. If user clicks the button after entering any number, which is not divisible by 5, in the TextBox control, CustomValidatorValidator control will display the error message

5. Otherwise, the Label control displays a message, “VALID NUMBER..”

6. In this case, the custom validation code has been written in server side C# code in Code-behind file (.aspx.cs file).

7. ServerValidate event of CustomValidator control has been handled by an event-handler, which accepts one argument of type ServerValidateEventArgs (inherited from EventArgsclass). This class represents the argument (i.e., the number entered in the text box control) to be validated. It has a property Value to represent the argument to be validated and a property IsValid to check whether the argument is validated or not.

8. When the submit button is clicked, after page submission, the onServerValidate method invokes ServerValidate event of CustomValidator control and passes the number entered in the text box to the event handler and then validation is done on the text box control.

9. Validation has succeeded or not, is checked under Click event of the Button control, using IsValid property of the Page class.

21

22

23

Note:

1. In this example a Web form contains two TextBox server control to accept fisrtname and last name of a person and a Button server control.

2. Next to the text boxes, two RequiredFieldValidator server controls are placed, whose job is to check whether user entered anything in those text boxes or not.

3. Also, Text property of those two RequiredFieldValidator controls have been set to a special character (*), so that error messages are not directly displayed besides the text boxes.

4. A ValidationSummary control has been placed at the bottom of the page, to encapsulate all the error messages originating due to different validation failure.

5. When the page is run the user is expected to first and last names in those two TextBox controls

6. If user clicks the button without entering anything in those TextBox controls, RequiredValidator controls will display the special characters

7. And, ValidationSummary control will display both error messages supplied by RequiredFieldValidator controls.

8. In this case DisplayMode property of ValidationSummary control has been used to set the display style of those error messages for ValidationSummary control

9. Possible values of DisplayMode property are “List”,”BulltedList” and “SingleParagraph”.

24

25

26

27

Note:

1. In this web site a WebUserControl, Header.ascx has been added and designed properly

2. Header.ascx has been built

3. Using Register directive the user control has been registered with HomePage.aspx

4. In the body section of the page, the control has been manually added on the Form.

28

29

30

31

32

33

Note:

1. In this example, a Master Page has been added in a web site

2. In the Master Page one ContentPlaceHolder control (Footer) has been added apart from the existing one (renamed as Main)

3. Common style have been added before and after the ContentPlaceHolder controls

34

35

36

Note:

1. This is the continuation of the previous example.

2. An web page has been added (ContentPage1) in the web site

3. While adding the page from “New Item” dialog box, “Select master Page” checkbox has been selected.

4. So, Master Page (Professional.master) has been applied on the page.

5. There are two content Content controls present on the page.

6. Content control, with ID, Content1 has been linked with ContentPlaceHolder1 of the Master Page through ContentPlaceHolderID property

7. Similarly, Content2 Content control has been linked with ContentPlaceHolder2 of the Master Page through ContentPlaceHolderID property

8. So, the content or design in the Content controls will be filling up the ContentplaceHolders of the Master page, while being displayed in the browser.

37

38

39

40

41

42

43

44

Notes:

1. The theme folder can contain .skin files which can have several skins for various controls within them.

2. Default skins are matched exactly by control type - so a LinkButton control skin is applied to all LinkButton controls, but not to ImageButton controls

45

Notes:

1. The following is an example of a control skin for a Button control: <asp:buttonrunat="server" BackColor="lightblue" ForeColor="black" />

2. You can define only one default skin per control.

3. Use the SkinID attribute in the skin's control declaration to create a named skin that you can apply to specific instances of a control.

4. If the SkinID property of a control skin is set, then it is a named skin.

5. Named skins have to be explicitly applied to a control by setting its SkinID property.

6. The advantage of using named skins is that different instances of the same control can be applied with different skins.

46

47

Notes

1. The example on this slide shows a default control skin and a named skin for a Button control, defining the color and font for all Button controls in the theme

48

Notes:

1. When a theme is set at the web site level, the styles and skins are applied to all the pages in that web site or application unless it overridden by specifically specifying another theme at the @page attribute in any individual page.

2. Themes can be made to apply only to the settings that have not been explicitly set on a control in a page by specifying the theme as a style sheet theme.

49

50

51

52

53

54

55

56

57

58

59

Note:

1. Use DataTextField property to display on one column value in the DropDownListBox

2. Use DataValueField property to keep another column value as hidden but linked with the corresponding text value

60

Note:

1. Use table tag (<table>) in the HeaderTemplate, single table row tag (<tr>) in the ItemTemplate, and end table tag (</table>) in the FooterTemplate to create a table using templates

2. To process control events that are raised from the templates to the control, use the ItemCommand event

61

62

Note:

1. In this example the data is retrieved from Category table present in SQL Server database in this page (See the next slide)

2. Repeater control is bound to the data source using DataSource property

3. Using ItemTemplate and AlternatingItemTemplate different item are being displayed

4. Each and every text box is being bound to a particular column of data source (dataset) table.

63

64

65

Note:

The above example shows how connection is made with the database, the way data is accessed and then displayed in DetailsView data control.

1. In the page load, connection with database has been made through the SqlConnection class object.

2. Then Command String is created which is the SQL query

3. Connection is opened

4. Then instantiate the dataset and SqlDataAdapter classes are created.

5. Fill method of the SqlDataAdapter has been used to fill up the DataSet

6. Then use the DataSource and DataBind properties of GridView to bind data to DetailsView

7. DetailsView thus displays the data bound to it, during runtime.

66

67

68

69

Notes:

Paging:

1. The AllowPaging property when set to true, enables users to page through records one at a time

2. You can programmatically access the GridView object model to dynamically set properties, handle events, and so on

70

71

72

73

Notes:

The above example shows how connection is made with the database, the way data is accessed and then displayed in customizable format using the GridView.

1. In the page load, connection with database has been made through the SqlConnection class object.

2. Then Command String is created which is the SQL query

3. Connection is opened

4. Then instantiate the dataset and SqlDataAdapter classes are created.

5. Fill method of the SqlDataAdapter has been used to fill up the DataSet

6. Then use the DataSource and DataBind properties of GridView to bind data to GridView\

74

75

Note:

1. To create columns manually for GridView,

1. first, set AutoGenerateColumns property to ‘false’ and

2. then add ‘BoundField’ in the GridView and attach them with

appropriate columns from data source

76

77

78

79

80

Note:

1. When your Web application runs, ASP.NET exposes a SiteMap object that reflects the site-map structure.

2. All of the members of the SiteMap object are static.

3. The SiteMap object, in turn, exposes a collection of SiteMapNode objects that contain properties for each node in the map. (When you use the SiteMapPathcontrol, the control works with the SiteMap and SiteMapNode objects to render the appropriate links automatically.)

4. You can use the SiteMap, SiteMapNode, and SiteMapProvider objects in your own code to traverse the site-map structure or create a custom control to display site-map data.

5. You cannot write to the site map, but you can alter site-map nodes in the instance of the object

81

82

83

Note:

1. Create a web site and configure the Default.aspx to be the frames page for the Web site.

2. Configure the Default.aspx page to have a top frame, a left frame, and a main frame. Remove Page directive as well as the code-behind page (Default.aspx.cs).

84

Note:

1. Add a new Web page called TitlePage.aspx for the top frame and design it.

2. Add a new Web page called MenuPage.aspx for the left frame.

3. On the MenuPage.aspx page, add a TreeView control.

4. Select the TreeView control and click the symbol in the upper-right corner of the control to reveal the TreeView Tasks window. Click the drop-down list for the Choose Data Source option and click New Data Source. Click Site Map as the data source and click OK.

5. In the Source View window, locate the <head> element and add <base target=“MainFrame”/> to specify that the hyperlinks use the MainFrame as their target window

85

Note:

1. Add the following Web pages to the Web application: Home.aspx, Support.aspx, Faqs.aspx, Products.aspx, Hardware.aspx, Software.aspx, Consulting.aspx, Training.aspx

2. Add a Site Map file to the Web application by right-clicking the Web application in the Solution Explorer and clicking Add New Item.

3. Click Site Map, keep the default file name of Web.sitemap, and click Add.

4. Change the Web.sitemap file to look like one in t he slide

5. On each of these pages, add a SiteMapPath control

6. Built the web site

7. View the page in browser

86

87

88

89

90

91

92

Reference

93

94