Scribd
Upload
17 views41 pages

Unit 3 Asp

A master page is a template that defines common layout and styling elements for a website. It allows separating common elements like headers, footers, and navigation from page content. CSS describes how documents are presented and styled. It is recommended to define styles in external CSS files and reference them in pages to keep styling separate from content. Layout and styles can be applied across pages by using a common master page or linking to a shared CSS file.

Uploaded by

shreyaspardhi01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views41 pages

Unit 3 Asp

A master page is a template that defines common layout and styling elements for a website. It allows separating common elements like headers, footers, and navigation from page content. CSS describes how documents are presented and styled. It is recommended to define styles in external CSS files and reference them in pages to keep styling separate from content. Layout and styles can be applied across pages by using a common master page or linking to a shared CSS file.

Uploaded by

shreyaspardhi01
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

UNIT 3 ASP.

NET
What is a master page?
An HTML page comprises three elements: content, layout, and styling. For
single sourcing, it is best to separate content from layout and styling. Although CSS
files separate styling from content, layout remains embedded in the HTML code. By
using master pages, separate layout and styling from content.
A master page contains layout information and is associated with a CSS file. A
master page is a template for HTML topics. You can define the placeholders for
header, footer, and topic. You can include breadcrumbs, snippets, variables, fields,
and symbols. You can also apply condition tags to a master page.
You can create a topic using a master page or associate an existing topic with a
master page. When you create a topic using a master page, the topic placeholder
content is placed in the resulting topic. If you apply a master page to an existing
topic, the topic placeholder content is ignored. In this case, actual content of the
topic replaces the topic placeholder in the master page at the time of preview and
generation.
The layout information defined in master pages is not visible in Author view.
You can see the layout when you generate output or preview an associated topic.
The topic content is placed in the topic placeholder, and the layout is inherited from
the master page. All placeholders defined in the master page are also populated with
relevant information when you generate output.
Master Page In Asp.net
A master page provides the layout and functionality to other pages. Creating a master page
in ASP.NET is very easy. Let's start creating master page step by step.

Step 1: Open new project in visual studio

New project->Installed->Web->ASP.NET Web Application (shown in the picture),


After clicking OK button in the Window, select Empty (shown in the picture),

After clicking OK button, project "masterpage" opens but no file is there (shown in the
picture),
Step 2: Add new file in to our project.

Add the master page into our project.

Right click Project->Add->New item (shown in the picture),

After clicking on new item, Window will open, select Web Form->Web Forms Master Page
(shown in the picture),
After clicking the add button, master page 'site1.master' adds to our project.

Click on site1.master into Solution Explorer (shown in the picture),

Step 3: Design the master page, using HTML.

HTML code of my master page is,


<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs"
Inherits="masterpage.Site1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>c# corner</title>
<link href="css/my.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>my layout</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<header id="header">
<h1>c# corner</h1>
</header>
<nav id="nav">
<ul>
<li><a href="home.aspx">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Article</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<aside id="side">
<h1>news</h1>
<a href="#"><p>creating html website</p></a>
<a href="#"><p>learn css</p></a>
<a href="#">learn c#</a>
</aside>
<div id="con">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>
</div>
<footer id="footer">
copyright @c# corner
</footer>
</body>
</html>
<form id="form1" runat="server">

</form>
</body>
</html>
CSS Code
#header{
color: #247BA0;
text-align: center;
font-size: 20px;
}
#nav{
background-color:#FF1654;
padding: 5px;
}
ul{

list-style-type: none;
}
li a {
color: #F1FAEE;
font-size: 30px;
column-width: 5%;
}
li
{
display: inline;
padding-left: 2px;
column-width: 20px;
}
a{
text-decoration: none;
margin-left:20px
}
li a:hover{
background-color: #F3FFBD;
color: #FF1654;
padding:1%;
}
#side{
text-align: center;
float: right;
width: 15%;
padding-bottom: 79%;
background-color: #F1FAEE;
}
#article{
background-color: #EEF5DB;
padding: 10px;
padding-bottom: 75%;
}
#footer{
background-color: #C7EFCF;
text-align:center;
padding-bottom: 5%;
font-size: 20px;
}
#con{
border:double;
border-color:burlywood;
}
Our master page is designed. Move to the next step.

Step 4: Add web form in to our project.

Right click on the project->Add->New item (shown in the picture),

Select Web form with the master page.


After clicking on that, add the button Window, open the selected masterpage->site1.master
and click OK.

Now, design our homepage.

Here, we write home page only,

Home.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireu
p="true" CodeBehind="home.aspx.cs" Inherits="masterpage.home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="ser
ver">
<h1>Home page</h1>
</asp:Content>
Finally, our Master page is created; build and run the project.

The master page looks aas shown in the picture:

Style sheet
Style sheets describe how documents are presented on screens, in print, or perhaps how
they are pronounced.
Cascading Style Sheets, or CSS, is the recommended way to control the presentation layer
in a web document. The main advantage of CSS over presentational HTML markup is that the
styling can be kept entirely separate from the content. For example, it's possible to store all the
presentational styles for a 10,000-page web site in a single CSS file. CSS also provides far better
control over presentation than do presentational element types in HTML.
How to make style sheet,
Step 1
Right-click on solution explorer - Add New Item - Add StyleSheet.css
Step 2
In the body class of StyleSheet.css just give the property which has to be set for any page in
the project.
Source code: StyleSheet.css
body
{
background-color :Silver ;
}
Step 3
Drag n drop StyleSheet.css from solution explorer

Step 4

Write the classes defining the style which has to be applied

Example: textbox background color has to be the same in all the pages so we define a class
.txtbox with the background-color.

Source code: StyleSheet.css


body
{
background-color :Silver ;
}
.txtbox
{
widows:20;
height:10;
background-color:Aqua;
}
.Dropdownlist
{
width:auto;
background-color :Lime;
}

Step 5
Drag a textbox and give txtbox class as CSS class in the property.
Source code: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inher
its="_Default" %>
<!DOCTYPE html PUBLIC "-
//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<br />
<br />
<asp:TextBox ID="TextBox1" runat="server" CssClass="txtbox"></asp:TextBox>
</form>
</body>
</html>
Step 6
Add a new form and the same StyleSheet.css can be used for any textbox place in the
project.

How to apply style sheet to web page?


Working with Layout
So, here we'll add the layout page using the following steps:
Step 1: Create a CSHTML page named _LayoutPage.

Step 2: Replace the HTML code with the code below:


<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cricketer Site</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>My Cricketer Site</h1>
</div>
<div id="content">
@RenderBody()
</div>
<div id="footer">
© @DateTime.Now.Year My Cricketer Site
</div>
</div>
</body>
</html>
In the code above are the three sections header, content and footer in the container. In the
head part of the page a reference of the CSS file (to be created later) is added. In the
header part the site name is placed. In the content part the @RenderBody() is used that is
the placeholder where the content will go when this layout is merged with the another
page. In the footer part the Razor code is used to get the current date and year.
Working with CSS
So, here we'll add the CSS file for presenting the layout theme. So, proceed with the
following.
Step 1: Create a New Folder to add the Styles Folder to contain the CSS.
Step 2: Just right-click on that folder to add a CSS file.

Step 3: Select the CSS file and enter the named as Site.

Step 4: Replace the content with the following code:


Html
{
height:100%; margin:0; padding:0; }
body {
height:60%;
font-family: 'Segoe UI', 'Times New Roman', 'Helvetica', 'sans-serif';
font-size:10pt;
background-color: LightGray;
line-height:1.6em;
}
h1{ font-size:1.6em; }
h2{ font-size:1.4em; }
#container{
min-height:100%;
position:relative;
left:10%;
}
#header{
padding:8px;
width:80%;
background-color:#4b6c9e;
color:White;
}
#content{
width:80%;
padding: 8px;
padding-bottom:4em;
background-color:White;
}
#footer{
width:80%;
height:2em;
padding:8px;
margin-top:-2em;
background-color:LightGray;
}
.head { background-color: #0ff; font-weight: bold; color: #FFF; }
.grid th, .grid td { border: 1px solid #C0C0C0; padding: 10px; }
.alt { background-color: #E8E8E8; color: #000; }
.selected {background-color:Yellow;}
span.caption {width:100px;}
span.dataDisplay {font-weight:bold;}

Add CSS with Page:

Now we need to create the CSS file and Layout page. In this section we add the layout page
to our main page.
Open the Cricketers.cshtml page and add the following code at the top of the code block:
Layout = "~/_LayoutPage.cshtml";
In the code above, we merged the Layout page to the Cricketers Page. You can remove the
<!DOCTYPE>, <html>, <body> opening and closing tags because this page now uses the
layout page. I didn't remove them in my site.
Run the Site Page
Its time to check out the new page with the layout page and CSS. Launch
the Cricketers.cshtml page in the browser.
Edit the Update Page
If you added any CSS in the CreateCricketer.cshtml page then remove it and add the
following code at the top inside the code block:
Layout = "~/_LayoutPage.cshtml";
Run the page in the browser.

Pass Title to Layout Page


We have written the title in the main page as "Cricketer Site". Most browsers display it as
shown below:
Add the following code in the Cricketer.cshtml page
Page.Title = "Cricketers List";
Now modify the title in the _LayoutPage.cshtml with the highlighted code below:
<title>@Page.Title</title>
You will see the updated title in the browsers as shown below:

Now add the Page.title code in the remaining pages like DeleteCricketer.cshtml,
UpdateCricketer.cshtml and so on.

Advantages of Style Sheets


Multiple Styles - A single document can be presented in multiple styles by using multiple style sheets.
Re-styling - The use of style sheets (which are separate to the HTML files) allows the quick re-styling of
any document, without modifying the original HTML.
Document maintenance - The ability to re-style many documents allows us to easily make changes to the
appearance of many Web pages without separately editing each one.
Consistency - Style sheets guarantee consistency throughout website.
Optimal file size - The smaller the files the faster the download. Using style sheets can help minimize file
sizes, since, for example, every < font > tag, is defined in one place in a style sheet, rather than in multiple
places in the HTML file.
Style and structure - When first developed, HTML was only concerned with document markup and not
with the document's formatting. This eventually changed, with more and more functionality being added
to HTML to allow for formatting. With the introduction of style sheets, the HTML document is again
concerned only with structural document markup — all formatting is now placed in the style sheet.

Multiple form wizards


The data a Web application accepts from the user is too much, splitting the entire Web
form into multiple logical sections is a desirable solution. To accomplish this in classic ASP
or even ASP.NET 1.x, developers used to create a wizard: multiple Web forms each
containing a part of the total information. However, this approach often proved complex
and time consuming. ASP.NET 2.0 provides a new control called Wizard that allows
hassle-free development of such Web forms. This article demonstrates how to use this
control in a typical user registration.
Creating a Web Form with Wizard Control (how to add steps to wizards)
Begin by creating a new Web site in VS.NET 2005. Drag and drop a Wizard control on the
default Web form. The Wizard control is represented by a <asp:Wizard> tag in the
markup and by a Wizard class in the code. Figure 1 shows the Wizard control in action.
Figure 1: Structure of Wizard Control
On the left-hand side you have a set of navigation links (Account Details, Contact
Information, etc.). This region of the Wizard is called a side bar. The area where the actual
data entry controls appear is often called a view. At the top you have a header, and at the
bottom you have a navigation bar.
Formatting the Wizard Control
The easiest way to apply formatting to the Wizard control is via the “Auto Format”
feature. Select the Wizard control and from its smart tag select “Auto format” to open the
Auto Format dialog (see Figure 2).

Figure 2: Auto Format Dialog


Here you can select a formatting theme that will quickly apply to the Wizard. You, of
course, can customize various formatting attributes manually via various “styles” of the
control. Figure 3 shows all the available styles.
Figure 3: Styles of Wizard Control
Adding Wizard Steps

The main job in using the Wizard control is managing Wizard steps, which act as
containers for a set of controls. Each step is represented by the <asp:WizardStep> markup
tag.
In order to add or remove steps to the Wizard control, select the “Add/Remove
WizardSteps…” option from its smart tag (see Figure 4).

Figure 4: Smart Tags of the Wizard Control


This will open “WizardStep Collection Editor” as shown in Figure 5
Figure 5: WizardStep Collection Editor
Add in all three steps as shown in Figure 5. Set the Title property of each set to Account
Details, Contact Information, and Confirmation, respectively. Also, set the ID property of
the three steps to step1, step2, and step3, respectively. The ID property identifies a specific
wizard step in the code.
Now, let’s design the three wizard steps. Go to the Web form designer and click on the
“Account Details” step. This will make that step the active step. Design the step as shown in
Figure 6.

Figure 6: Designing Account Details WizardStep


The step consists of three Labels, three TextBoxes, and the validator controls attached to
them. The TextBoxes accept the user ID and password. Each of the three TextBoxes has a
RequiredFieldValidator attached. Additionally, a CompareValidator ensures that the
value entered in the password TextBox matches the one in the confirm password TextBox.
Now click on the “Contact Information” step and design it as shown in Figure 7.

The “Contact Information” wizard step consists of two Labels, two TextBoxes, and the
validator controls attached to them. The TextBoxes accept the user’s email address and
telephone number. The RequireFieldValidator and RegularExpression validator controls
attached to them ensure that the end user enters the correct input. Note how this step
automatically displays Previous and Next buttons.
The following is the complete markup for your Web form:
<%@ Page Language=”C#” AutoEventWireup=”true”
CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<html >

<head runat=”server”>

<title>Untitled Page</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<asp:Wizard ID=”Wizard1″ runat=”server” ActiveStepIndex=”2″

BackColor=”#EFF3FB” BorderColor=”#B5C7DE”

BorderWidth=”1px” Font-Names=”Verdana” Font-Size=”0.8em”

HeaderText=”Cool Wizard control”

OnActiveStepChanged=”Wizard1_ActiveStepChanged”

OnFinishButtonClick=”Wizard1_FinishButtonClick”>

<StepStyle Font-Size=”0.8em” ForeColor=”#333333″ />

<SideBarStyle BackColor=”#507CD1″ Font-Size=”0.9em”

VerticalAlign=”Top” Width=”150px”

Wrap=”False” />
<NavigationButtonStyle BackColor=”White” BorderColor=”#507CD1″

BorderStyle=”Solid”

BorderWidth=”1px” Font-Names=”Verdana” Font-Size=”0.8em”

ForeColor=”#284E98″ />

<WizardSteps>

<asp:WizardStep ID=”step1″ runat=”server”

Title=”Account Details”>

<table style=”width: 100%”>

<tr>

<td nowrap=”nowrap”>

<asp:Label ID=”Label1″ runat=”server” Text=”User ID :”>

</asp:Label>

</td>

<td>

<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator1″

runat=”server” ControlToValidate=”TextBox1″

Display=”Dynamic” ErrorMessage=”Please enter User ID”>


</asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td nowrap=”nowrap”>

<asp:Label ID=”Label2″ runat=”server” Text=”Password :”>

</asp:Label>

</td>

<td>

<asp:TextBox ID=”TextBox2″ runat=”server” TextMode=”Password”>

</asp:TextBox>

<br />

<asp:RequiredFieldValidator ID=”RequiredFieldValidator2″

runat=”server” ControlToValidate=”TextBox2″

Display=”Dynamic” ErrorMessage=”Please enter Password”>

</asp:RequiredFieldValidator>

<asp:CompareValidator ID=”CompareValidator1″

runat=”server” ControlToCompare=”TextBox2″
ControlToValidate=”TextBox3″ Display=”Dynamic”

ErrorMessage=”Passwords do not match “>

</asp:CompareValidator>

</td>

</tr>

<tr>

<td nowrap=”nowrap”>

<asp:Label ID=”Label3″ runat=”server” Text=”Confirm Password :”>

</asp:Label>

</td>

<td>

<asp:TextBox ID=”TextBox3″ runat=”server” TextMode=”Password”>

</asp:TextBox>

<br />

<asp:RequiredFieldValidator ID=”RequiredFieldValidator3″

runat=”server” ControlToValidate=”TextBox3″

Display=”Dynamic” ErrorMessage=”Please enter password again”>

</asp:RequiredFieldValidator>
</td>

</tr>

<tr>

<td nowrap=”nowrap” style=”height: 26px”>

&nbsp;</td>

<td style=”height: 26px”>

&nbsp;&nbsp;

</td>

</tr>

</table>

<br />

</asp:WizardStep>

<asp:WizardStep ID=”step2″ runat=”server”

Title=”Contact Information”>

<table style=”width: 100%”>

<tr>

<td nowrap=”nowrap”>

&nbsp;<asp:Label ID=”Label4″ runat=”server” Text=”Email :”>


</asp:Label>

</td>

<td>

<asp:TextBox ID=”TextBox4″ runat=”server”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator4″

runat=”server” ControlToValidate=”TextBox4″

Display=”Dynamic” ErrorMessage=”Please enter email”>

</asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID=”RegularExpressionValidator1″

runat=”server” ControlToValidate=”TextBox4″

Display=”Dynamic” ErrorMessage=”Invalid email format”

ValidationExpression=”w+([-+.’]w+)*@w+([-.]w+)*.w+([-.]w+)*”>

</asp:RegularExpressionValidator>

</td>

</tr>

<tr>

<td nowrap=”nowrap”>

<asp:Label ID=”Label6″ runat=”server” Text=”Telephone Number :”>


</asp:Label>

</td>

<td>

<asp:TextBox ID=”TextBox5″ runat=”server”></asp:TextBox>

<asp:RequiredFieldValidator ID=”RequiredFieldValidator5″

runat=”server” ControlToValidate=”TextBox5″

Display=”Dynamic” ErrorMessage=”Please enter email”>

</asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID=”RegularExpressionValidator2″

runat=”server” ControlToValidate=”TextBox5″

Display=”Dynamic” ErrorMessage=”Invalid tel. no.”

ValidationExpression=”(((d{3}) ?)|(d{3}-))?d{3}-d{4}”>

</asp:RegularExpressionValidator>

</td>

</tr>

<tr>

<td nowrap=”nowrap”>

</td>
<td>

</td>

</tr>

</table>

</asp:WizardStep>

<asp:WizardStep ID=”step3″ runat=”server” Title=”Confirmation”>

<table style=”width: 100%”>

<tr>

<td nowrap=”nowrap”>

<asp:Label ID=”Label5″ runat=”server” Font-Bold=”True”

Text=”User ID :”></asp:Label>

</td>

<td>

<asp:Label ID=”Label9″ runat=”server” Font-Bold=”True”

Text=”Label”></asp:Label>

</td>

</tr>

<tr>
<td nowrap=”nowrap”>

<asp:Label ID=”Label7″ runat=”server” Font-Bold=”True”

Text=”Email :”></asp:Label>

</td>

<td>

<asp:Label ID=”Label10″ runat=”server” Font-Bold=”True”

Text=”Label”></asp:Label>

</td>

</tr>

<tr>

<td nowrap=”nowrap”>

<asp:Label ID=”Label8″ runat=”server” Font-Bold=”True”

Text=”Telephone Number :”></asp:Label>

</td>

<td>

<asp:Label ID=”Label11″ runat=”server” Font-Bold=”True”

Text=”Label”></asp:Label>

</td>
</tr>

</table>

</asp:WizardStep>

</WizardSteps>

<SideBarButtonStyle BackColor=”#507CD1″ Font-Names=”Verdana”

ForeColor=”White” />

<HeaderStyle BackColor=”#284E98″ BorderColor=”#EFF3FB”

BorderStyle=”Solid” BorderWidth=”2px”

Font-Bold=”True” Font-Size=”0.9em” ForeColor=”White”

HorizontalAlign=”Center” />

</asp:Wizard>

<br />

<asp:Label ID=”Label12″ runat=”server” EnableViewState=”False”

Font-Size=”Large”
ForeColor=”Red”></asp:Label>&nbsp;</div>
</form>
</body>
</html>

ASP.Net MultiView Control


MultiView Control is an asp.net web server control. Multiview Control is a same as Tab control. If you want make
a complex designing on one web forms then you have to use multiview control.
MltiView control is a container of several view control. In a multiview control there are many view control for
designing separation of view for user.
The View control is a container of several web server controls. Using the multiview control we can feel the multiple
page view design on a single web page.
We can also say multiview control allow user to create different view on single web page.There are many view
control in a multiview control, each view control has a some web server control for design web page. we can see
single view at a time on web page by specify the ActiveViewIndex property of multiview control.
All view control assign automatically index to all it, the index always start from zero. The first view1 index is zero,
second is one and so on….
If we want to display first view on web page, then we need to write MultiView1.ActiveViewIndex=0.
Here we take an example to understand how to use multiview control in asp.net c#.
First create a asp.net web application and design web forms like below.
Design the web form with a multiview control and three view control within it along with three button control.

How to navigate view with Multiview controls in web page


The HTML Design code for multiview is :
<body>
<form id="form1" runat="server">
<div>

<table align="center" class="style1" style="border: thin solid #008080">


<tr>
<td class="style2"
style="text-align: center; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color:
#008080;">
MultiView Control in ASP.Net</td>
</tr>
<tr>
<td style="text-align: center">
<asp:Button ID="btnview1" runat="server" onclick="btnview1_Click"
style="font-weight: 700" Text="View1" />

<asp:Button ID="btnview2" runat="server" onclick="btnview2_Click"


style="font-weight: 700" Text="View2" />

<asp:Button ID="btnview3" runat="server" onclick="btnview3_Click"


style="font-weight: 700" Text="View3" />
</td>
</tr>
<tr>
<td>
<asp:MultiView ID="MultiView1" runat="server">
<asp:View ID="View1" runat="server">
<table border="1" class="style3">
<tr>
<td class="style5" style="text-align: center">
View -1</td>
</tr>
<tr>
<td class="style4">
MEERA ACADEMY</td>
</tr>
</table>
</asp:View>
<asp:View ID="View2" runat="server">
<table border="1" class="style3">
<tr>
<td class="style7" style="text-align: center">
View -2</td>
</tr>
<tr>
<td class="style6">
MICRO EDUCATION</td>
</tr>
</table>
</asp:View>
<asp:View ID="View3" runat="server">
<table border="1" class="style3">
<tr>
<td class="style9" style="text-align: center">
View -3</td>
</tr>
<tr>
<td class="style8">
MEERA SOFTWARE</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
</td>
</tr>
</table>

</div>
</form>
</body>
Example of MultiView Control in ASP.Net
After Design asp.net web forms take a multiview control on web forms from toolbox.
Now, add some view control in multiview control as per your needs, here we use three view control to
understand this multiview control example. The three view View1, View2 and View3, after taking views on web
page design the all view control with some web server control.

Below screen shows the final designing of web page. here we take three view control in multiview control
and design all three view control as per our requirement. There are three button on web page for display
view control on page
Here, is the out put of multiview example, when we run the application, by default we can not see any view
on web page. we just see the three button control on web page for display the view control.

When we click to button View1 then the view1 is displaying on web page.
Here we need to write below code for display view1 in button control.

protected void btnview1_Click(object sender, EventArgs e)


{
MultiView1.ActiveViewIndex = 0;
}
When we click button View2 then the view2 is displaying on web page.
Here we need to write below code for display view2 in button control.
protected void btnview2_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
}

When we click to button View3 then the view3 is displaying on web page.
Here we need to write below code for display view3 in button control.
protected void btnview3_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 2;
}

Here, is the code behind C# code for MultiView Control all three buttons controls.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default4 : System.Web.UI.Page


{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnview1_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 0;
}
protected void btnview2_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 1;
}
protected void btnview3_Click(object sender, EventArgs e)
{
MultiView1.ActiveViewIndex = 2;
}
}

ASP.NET State Management:


When user request same page or different page then server cleans up all the created variable and object
after serving that page to the user. State management is the process by which we store information between
multiple requests for the same page or different pages.
In ASP.NET, We can use following three type of state management system.
1)View State
2)Session
3)Application
ViewState:
It is a client side page level state management technique i.e. as long as the user is on the current page, state
is available and when user redirect to the next page then state is lost.
It is used when user needs to preserve data temporarily after a post back then the ViewState stores data in the
generated HTML using hidden field.
View State can store any type of data because it is object type. View state is enabled by default for all
ASP.NET controls.
Syntax: ViewState["Variable_Name"]
We can create a number of ViewState variables.
Example: Count number of button's click
<%@ Page Language="C#" %>
<script runat="server"> void Button1_Click(object sender, EventArgs e)
{
Label1.Text = ViewState["count"].ToString();
} void Page_Load(object sender, EventArgs e)
{ if (IsPostBack)
{ if (ViewState["count"] == null)
{
ViewState["count"] = "1";
} else { int i = Convert.ToInt32(ViewState["count"]) + 1;
ViewState["count"] = i.ToString();
}
}
}
</script>

<html>
<head><title>ViewState Page</title></head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" /> <asp:Button ID="Button1" runat="server"
Text="ok"
OnClick="Button1_Click" />
</div>
</form>
</body>
</html>

Session:
It is a server side state management technique i.e. as long as the user is on current page or next page, state
is always available and when user idles up to specified session time then session state lost. The server maintains
the state of user information by using a session ID.
When user makes a request without a session ID, ASP.NET creates a session ID and sends it with every request
and response to the same user.
Syntax: Session["Variable_Name"]
Session Events: We can executes codes when session starts or end using Session_Start and Session_End
events. Session events are defining in Global.asax file that creates into root folder of website.
void Session_Start(object sender, EventArgs e)
{
// Write code that runs when a new session is started
}
void Session_End(object sender, EventArgs e)
{
// Write code that runs when a active session is expired
}
The Session_End event is raised when session ends either because of a time out expiry or explicitly by
using Session.Abandon().
Set Session Time: Add <sessionState> into web.config file of root folder.
<configuration>
<system.web>
<sessionState timeout="10" mode="InProc" />
</system.web>
</configuration>
The Session_End event is raised only in the case of InProc mode not in the state server and SQL Server
modes.
Example: Assign name into one page and display into next page. Set 1 minute for session time.

void Session_Start(object sender, EventArgs e)


{
Session["username"] = "none"; }
web.config
<sessionState timeout="10" mode="InProc" />
session.aspx
<%@ Page Language="C#" %>
<script runat="server">
Button1_Click(object sender, EventArgs e)
{
Session["username"] = TextBox1.Text;
Response.Redirect("~/nextPage.aspx");
}
</script>
<html>
<head><title>Session Page</title></head>
<body>
<form id="form1" runat="server">
<div>
Input Name
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Button ID="Button1" runat="server"
Text="Submit" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>

4. nextpage.aspx
<%@ Page Language="C#" %>
<script runat="server"> void Page_Load(object sender, EventArgs e)
{
Label1.Text = Session["username"].ToString();
}
</script>
<html>
<head><title>Next Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" />
</div>
</form>
</body>
</html>

Application:
Application state is a server side state management technique. The data stored in application state is
common for all users of that particular ASP.NET application and can be accessed anywhere in the application. It
is also called application level state management. Data stored in the application should be of small size.
Syntax: Application["Variable_Name"]
Application Events:
Application events are defining in Global.asax file that creates into root folder of website.
Application_Start: It is raised when the first request is made using domain(www.LRsir.net) of web site.
void Application_Start(object sender, EventArgs e)
{
// Write code
}
Application_End: It is raised just before the domain ends, server restart, when the first request is made
using domain(www.LRsir.net) of web site.
void Application_End(object sender, EventArgs e)
{
// Write code
}
Application_Error: It is raised when an exception is occurs then it can be handles using this event.
void Application_Error(object sender, EventArgs e) {
// Write code
}
Example: Count total number of clicks of button by all users.

Global.aspx
void Application_Start(object sender, EventArgs e)
{
Application["count"] = 0;
}
Application.aspx
<%@ Page Language="C#" %>
<script runat="server"> void Button1_Click(object sender, EventArgs e)
{
int i=Convert.ToInt32(Application["count"]) + 1;
Application["count"] = i.ToString();
Label1.Text = i.ToString();
}
</script>
<html>
<head><title>Application State Page</title></head>
<body>
<form id="form1" runat="server">
<div>
Total clicks by all users
<asp:Label ID="Label1" runat="server"/>
<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="Submit" />
</div> </form>
</body>
</html>

ASP.NET Query String

A query string is a collection of characters input to a computer or web browser. A Query String is helpful
when we want to transfer a value from one page to another. When we need to pass content between the HTML
pages or aspx Web Forms in the context of ASP.NET, a Query String is very easy to use and the Query String
follows a separating character, usually a Question Mark (?). It is basically used for identifying data appearing
after this separating symbol. A Query String Collection is used to retrieve the variable values in the HTTP query
string. If we want to transfer a large amount of data then we can't use the Request.QueryString. Query Strings are
also generated by form submission or can be used by a user typing a query into the address bar of the browsers.
Query Strings are contained in request headers. A Query String collection is a parsed version of the
QUERY_STRING variable in the Server Variables collection. It enable us to retrieve the QUERY_STRING
variable by name. When we use parameters with Request.QueryString, the server parses the parameters sent to
the request and returns the effective or specified data.

Query string is a simple way to pass some information from one page to another. The information cab be easily
pass to one page to another or to same page. With query string method the information passed in url of page
request.
This method many browsers supports only 255 character length of url in query string. The value passed will be
visible so some time it cause security issue.
For send information to other page Response.Redirect() method used and for retrieve information from url use
Request.QueryString() method used.
In Query String method we can sent value to only desired page, and value will be temporarily. So Query string
increase the overall performance of web application.
Syntax of Query String

Request.QueryString(variable)[(index).count].
Steps for perfoming string query
Step 1

Start Visual Studio.


Step 2

Now for creating a website, click on the file, go to new and click on the website.

Step 3

Now we add the two web forms to the website.


Step 4

We design the web form as in the following,

Step 5

After designing the web form, we need to write the following code in the button click.

1. protected void Button1_Click(object sender, EventArgs e)


2. {
3. Response.Redirect("default2.aspx ?firstname=" + TextBox1.Text + "&lastname=" + TextBox2.Text);
4. }

Step 6

In the second web form we take the one lable for displaying the values of the first page. For receiving the value
from the first page we write the following code on the page_load of the second page.

1. protected void Page_Load(object sender, EventArgs e)


2. {
3. string firstname = Request.QueryString["firstname"];
4. string lastname = Request.QueryString["lastname"];
5. Label1.Text = "welcome" + firstname + " " + lastname;
6. }

Step 7

Now we need to execute the website by using the F5 key. After execution we give the input in the textboxes like
this,
Step 8

After giving the values, we click on the Submit button then the following window will appear.

QUESTION BANK UNIT 3


List different Session state management options available in ASP.NET?
Determine the procedure how to apply style sheet on web page.
Discuss State Management? Explain it with suitable example.
Show master pages work in ASP.NET with example.
Describe application of state management in ASP.NET.
Explain Multiview controls in web page.
Describe Global.asax Application File.
Explain query string in detail with example.

Explain program to Make a Master page and apply this master page on Login page,
Registration page and Contact _us page.

Build a programs to Performs query string State management.


Build a programs to Performs Session State management using web form.
Build programs to Performs View State management using web form

You might also like