Scribd
Upload
8 views

Unit-4 - ASP - Net and Web Development - Part-3

Uploaded by

msself02
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

Unit-4 - ASP - Net and Web Development - Part-3

Uploaded by

msself02
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 37

UNIT – 4

ASP.Net and Web Development


PART – 3_Themes and Master Pages
Outline
 Creating Consistent Web Site
 Master Page
 Theme
 Skin File
 Grid View Control
Creating Consistent Web Site
 Master Page :
• For the consistent look for the website we need to create layout which
contains header, navigation bar and footer.
• This layout page that provides an overall container for pages on our site.
• The layout page includes a placeholder where the main content goes.
• Then we can define individual content pages that contain the markup and
the code for only that page.
• Content pages are partial HTML pages; they don’t even have to have a
<body> element.
• The <body> contains inside layout page.
• This content page contains only specific code to that page.
Creating Consistent Web Site
 Theme :
• A theme is a collection of property settings that allow us to define the look
means color combination, font etc.. of pages and controls, and then apply
the look consistently across pages in a website.
Master Page
• Master page allows you to create a consistent look and behaviour for all
the pages (or group of pages) in your web application.
• Master page doesn’t mean HomePage.
• Master page support was one of the most popular features introduced with
ASP.NET 2.0, and is one of those features that almost every new ASP.NET
project now uses to deliver consistent layout template support across a web
site.
• A Master page provides a template for other pages, with shared layout and
functionality.
• If you want to display standard header, footer and menu in each page in
your website, then you can create the standard header, footer and menu in a
Master page.
• Master pages help us build consistent and maintainable user interface.
• Remember that it is not related with color-combination concept; it is
related with layout – like frameset of simple HTML.
Master Page
• Microsoft has taken a trick from their PowerPoint application with Master
Pages. In PowerPoint you can create a Master Slide that acts as a template
for all other slides.
• The background and common text on the Master Slide is automatically
used in other slide.
• Likewise the Master Page is used to create the look and feel of an
ASP.NET web application.
• They allow you to layout a page once and use it over and over.
• There are two types of Master Page – Simple and Nested.
• The master page defines placeholders for the content, which can be
overridden by content pages. The output result is a combination of the
master page and the content page.
• The content page contains the content you want to display.
Master Page
• When user request the content page, ASP.NET merges the pages to
produce output that combines the layout of master page with the content of
the content page.

Header Hi
I am Krunal

Footer
Master Page
 Characteristics :
• Extension of MasterPage is ‘.master’.
• Master Page also has a codebehind file.
• We cannot run MasterPage directly.
• It allows you to centralize the common functionality of your pages so that
you can make updates in just one place.
• One website can contain many MasterPages. But at a time one webpage
contain only one MasterPage.
• You can create multiple master pages to define different layouts for parts of
your site, and a different set of content pages for each master page.
• It’s possible to display consistent look for FY student and another look for
SY and TY.
• They make it easily to create one set of controls and code and apply the
results to a set of pages.
Master Page
• For example, you can use controls on the MasterPage to create a menu that
applies to all pages.
• MasterPage should contain at least one ContentPlaceHolder control.
• Runtime we can change the MasterPage.
• The declaration for a MasterPage :
• <%@ Master Language=“C#” AutoEventWireup=“true”
CodeFile=“MasterPage.master.cs” Inherits=“MasterPage” %>
• Runtime MasterPage and Normalpage (ContentPage) will merge.
• We can access any of the control of MasterPage from Contentpage.
• When user associates a master page with a content page, the content page
automatically includes the title attributes.
ContentPlaceHolder
• When a new Masterpage is added a ContentPlaceHolder control is present.
• Content place holders are used to allocate places on the MasterPage that
will be changed on the content pages.
• Content placeholder is a control in MasterPage. The content from the
content page appears in the area made by content place holder control.
• There are two ContentPlaceHolder on any MasterPage.
1. In the Head section
2. In between <form></form>
• The actual Webpage contents will be pasted in the form section.
• You can have multiple ContentPlaceHolders on the same page.
• Example :
<asp:ContentPlaceHolder id =“ContentPlaceHolder1” runat=“server”>
</asp:ContentPlaceHolder>
Content Pages
• The content pages contains the content you want to display.
• For example, Home.aspx, Aboutus.aspx, Contactus.aspx, CheckMail.aspx,
ContentPages.aspx etc are Content Pages.
• We define the content for the master page’s placeholder controls by
creating individual content pages, which are ASP.NET pages that are
bound to a specific master pages.
• When users request the content pages, they merge with the MasterPage to
produce output that combines the layout of the MasterPage with the
content from the content page.
• <%@ Master Language = “C#” AutoEventWireup = “true”
CodeFile=“Stu.master.cs” Inherits= “MasterPage” %>
Content Pages

Master file = “Stu.Master” Content file = “Home.aspx”


<%Master%> <@Page MasterPageFile =
Contains ContentPlaceHolders “Stu.Master” >

Resulting
Page
Content Pages
 Run-time Behaviour of Master Page :
1. Users request a page by typing the URL of the content page.
2. ASP.NET fetches the page.
3. When the page is fetched, the @Page directive is read. If the directive
references a master page, the master page is read as well. If this is the first
time the pages have been requested, both pages are compiled.
4. ASP.NET merges the content into the content placeholders on the
MasterPage.
5. The Masterpage with the updates content is merged into the control tree
of the content page.
6. ASP.NET renders results to the browsers.
Nested Master Page
• We have looked at how one can create a single Master Page and base a
content page on the Master Page.
• They give you the power to customize your web pages but keeping the
same overall look of the website as well.
• When one master page references another as its master, it is said to be a
nested master page.

MainMaster.master NestedMaster.master Aboutme.aspx

Header Menu Hi
I am krunal

Footer
Footer
Nested Master Page
• For example, you can create one Master page for the entire web site and
then nest Master Pages below the site Master Page for individual sections.
• Master pages can be nested, with one master page referencing another as
its master.
• A number of nested masters can be componentized into a single master.
• There is no architectural limitation to the number of child masters that can
be created.
• The depth of nesting also does not impact on performing significantly.
• Just like the parent master page, child masters have the extension .master
too.
• It contains all the controls that are mapped to content place holders on the
parent master page.
• The layout is similar to that of a content page in this respect.
• However, child masters also have content place holders of their own to
display content of its child pages.
Theme
• Themes are an extension of another idea, like Master Page. Theme are
different than Master Pages.
• A Master page enables user to share content across multiple pages in a
website.
• A Theme, on the other hand, enables you to control the appearance of the
content.
• In www.yahoo.com , the theme concept is used.
• A theme is a collection of property settings that allow you to define the
look of pages in a web application, across an entire web application, or
across all web applications on a server.
• Themes can be thought of as a container where you store your style sheets,
images, skin files, etc..
• A theme folder can contain a variety of different types of files.
• Only one theme can be applied to each page.
Theme
• Applying CSS to HTML seems to be simple and easy, but applying the
same to ASP.NET server controls can be confusing, because it is up to the
developer to know which HTML tags are rendered by the control and how
they are rendered.

Skin Style Other


Sheet Resources
Skin File
• A skin generally contains visual properties (for look and feel strategies) for
one or more kinds of ASP.NET controls (server controls).
• A skin file has the file name extension .skin.
• Skin file contains property settings for individual controls such as Button,
Label, TextBox, Calendar etc…
• You can define skins in a separate file for each control or define all the
skins for a theme in a single file.

Skin File

Default Skins Named Skins


Skin File
1. Default Skins :
• A default skin automatically applies to all controls of the same type when a
theme is applied to a page.
• The SkinId is not defined.
• Only one default control skin per control type is allowed in the same
theme.
• For Example,

<asp: Label runat=“server” Fore Color=“#585980” Font-


Size=“0.8em” Font-Names=“Arial” />

• For example, if you create a default skin for a TextBox control, the control
skin applies to all TextBox controls on pages that use the theme.
Skin File
2. Named Skins :
• It is a control skin with a SkinID property set.
• Named skins do not automatically apply to controls by type.
• The SkinId should be uniquely defined because duplicate SkinId’s per
control type are not allowed in the same theme.

• Example :
<asp:GridView runat=“server” SkinId=“gridviewSkin”
BackColor=“White” >

<AlternatingRowStyleBackColor = “Blue” />

</asp:GridView>
Style Sheet
• A Cascading Style Sheet (CSS) may be added to a Theme by planning it
under the named Theme subdirectory.
• When you put a .css file in the theme directory, the style sheet is applied
automatically as part of the theme.
• Extension of the CSS file is .css.
Demo of Named Skin
<%@ Page Language = “C#” AutoEventWireup = “true” CodeFile =
“Default4.aspx.cs” Inherits = “Default4” Theme = “Summer” %>

<head runat = “server”>


<title>Theme Demo</title>
</head>
<body>
<form id=“form1” runat=“server”>
<table>
<tr>
<td>
<asp:TextBox id=“TextBox1” runat=“server” SkinID=“b”></asp:TextBox>
</td>
Demo of Named Skin
<td>
<asp:TextBox id=“TextBox3” runat=“server” SkinID=“r”></asp:TextBox>
</td>
<td>
<asp:TextBox id=“TextBox4” runat=“server” ></asp:TextBox>
</td>
<td>
<asp:TextBox id=“TextBox5” runat=“server” SkinID=“r”></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Button id=“button1” runat=“server” Text=“Button” />
</td>
Demo of Named Skin
<td>
<asp:Button id=“button2” runat=“server” Text=“Button” />
</td>
<td>
<asp:Button id=“button3” runat=“server” Text=“Button” />
</td>
<td>
<asp:Button id=“button4” runat=“server” Text=“Button” />
</td>
</tr>
</table>
</form>
</body>
</html>
GridView Control
• GridView control is a successor to the ASP.NET 1.X DataGrid control.
• It is the only databound control which has inbuilt edit, update, delete, sort,
paging data functionality.
• We can enable these functionalities by setting the properties of GridView
without even writing a single line of code.
• It provide more flexibility in displaying and working with data from your
database in comparison with any other controls.
• The GridView controls enables you to connect to a datasource and display
data is tabular format, however you have bunch of options to customize the
look and feel.
• Using this control is very easy when compared to other databound controls
to display data. Just assigning the DataSource property to a DataTable and
calling DataBind() method will render the data.
GridView Control
• The main disadvantage of GridView control is, it does not have the
flexibility to display data in any other format except table.
• When it is rendered on the page, generally it is implemented through
<table> HTML tag.
• Each column will be rendered as separate TD which makes it not possible
to display data in any other format.

• Code :
<asp:GridView id=“GridView1” runat=“server”>
</asp:GridView>
GridView Control
• Properties :
Property Description
AllowPaging True/False. Indicate whether the control should
support paging.
AllowSorting True/False. Indicate whether the control should
support sorting.
SortExpression Gets the current sort expression that determines the
order of the row.
SortDirection Gets the sorting direction of the column sorted
currently.
DataSource Gets/Sets the data source object that contains the data
to populate the control.
GridView Control
• Events :
Event Description
RowCommand Fires when a button is clicked on any row of GridView.
RowCreated Fires when a new row is created in GridView.
RowDataBound Fires when row is bound to the data in GridView.
RowDeleting , RowDeleted Both events fires when Delete button of a row is
clicked. They fire before and after GridView handles
deleting operation of the row respectively.
RowEditing Fires when an Edit button of a row is clicked but before
the GridView handles the Edit operation.
SelectedIndexChanged Fires when an item is selected in the GridView, after
the selection is complete.
Demo of GridView with stu Table
• Step – 1 : Stu Table Design View
Name DataType
Rno Int
Sname Varchar (20)
Sphoto Varchar (50)
Gender Bit
DOB Date

• Step – 2 : Add SqlDataSource and GridView

SqlDataSource – SqlDataSource1
Column0 Column1 Column2
Abc Abc Abc
Abc Abc Abc
Demo of GridView with stu Table
• Step – 3 : Configure SqlDataSource1 with Stu Table

• Step – 4 : Finish it.

• Step – 5 : Now set SqlDataSource as a DataSource of GridView.

• Step – 6 : Set AutoFormat property of GridView for Colour and Font

• Step – 7 : Set Paging, Sorting and Selection

• Step – 8 : Run it.

• Step – 9 : Paging , Sorting and Selection


Demo of GridView with stu Table
<asp:SqlDataSource id = “sqlDataSource1” runat = “server” ConnectionString
= “<%$ ConnectionStrings:ConnectionString %>” SelectCommand = “Select
* from [stu]” >
</asp: SqlDataSource>

<asp:GridView id = “GridView1” runat=“server” AllowPaging = “True”


AllowSorting = “True” AutoGenerateColumns = “False” CellPadding = “4”
DataKeyNames = “Rno” DataSourceID = “SqlDataSource1” ForeColor =
“#333333” GridLines = “None” >

<AlternatingRowStyle BackColor = “White” />

<Columns>
<asp:CommandField ShowSelectButton = “True” />
Demo of GridView with stu Table
<asp:BoundField DataField = “Rno” HeaderText = “Rno” ReadOnly=“True”
SortExpression = “Rno”>

<asp:BoundField DataField = “Sname” HeaderText = “Sname”


ReadOnly=“True” SortExpression = “Sname”>

<asp:BoundField DataField = “SPhoto” HeaderText = “SPhoto”


ReadOnly=“True” SortExpression = “SPhoto”>

<asp:BoundField DataField = “Gender” HeaderText = “Gender”


ReadOnly=“True” SortExpression = “Gender”>

<asp:BoundField DataField = “DOB” HeaderText = “DOB” SortExpression =


“DOB”>
</Columns>
Demo of GridView with stu Table
<FooterStyle BackColor=“#990000” Font-Bold = “True” ForeColor =
“White” />

<HeaderStyle BackColor=“#990000” Font-Bold = “True” ForeColor =


“White” />

<PagerStyle BackColor=“#FFCC66” ForeColor = “#333333”


HorizontalAlign=“Center” />

<RowStyle BackColor = “#FFFBD6” ForeColor = “#333333” />

<SelectedRowStyle BackColor = “#FFCC66” ForeColor = “Navy” Font-Bold


= “True” />
Demo of GridView with stu Table
<SortedAscendingCellStyle BackColor = “#FDF5AC” />
<SortedAscendingHeaderStyle BackColor = “#4D0000” />

<SortedDecendingCellStyle BackColor = “#FDF6C0” />


<SortedDecendingHeaderStyle BackColor = “#820000” />

</asp:GridView>
Question
1. Explain the concept of master pages in ASP.NET with example. (Summer
2016 , Summer 2014 , Winter 2013)
2. Explain data binding with GridView control related to ADO.NET
Technology. (Summer 2016)
3. Write a note on Master Page in ASP.NET (Winter 2015 , Summer 2015)
4. Explain master page and theme of ASP.NET. (Winter 2014)
5. What is Theme? Create skin file to format various controls and give code
to apply theme in ASP.NET webpage. (Summer 2014, Summer 2018)
6. How can you implement Master page in Web Base? Explain clearly with
example. (Winter 2016)
7. Explain the concept of master pages in ASP.NET with example. (Summer
2017 , Winter 2018)
8. Differentiate between Master Page and Theme Page in ASP.NET. (Winter
2017)
Question
1. Write a program which gets data from ‘uses’ table and shows on console
in tabular format. (Summer 2015)
2. Give demo of Master page – 5 pages
3. Give demo of Theme.
4. Create one emp table which contains column Sid, Sname, Gender, Std
and display student records in GridView with select, update and delete.
5. Create one emp table which contains column Sid, Sname, Gender, Std
and display student records in GridView and Create one dropdown which
contains DeptName on selected DeptName display record in GridView.
You
a n k
T h

You might also like