1 UNIT-2_PART-1 ADVANCE CONTROL

[UNIT – 1 CONTROL
ADVANCE & 2]
(1) File Upload :

 FILE UPLOAD is a very important control in ASP.NET.

 FILE UPLOAD is used to upload of any file in web page of asp.net like word file, exel
file , jpg and jpeg etc….

 In web page , first you have to put file upload control from the Tool box.

 The file upload control look like the following :

 File upload control contain two part here. The first part is look as text box and the
second part is look like the button written on it Browse.

 When it is rendered on the page , your page look like the following :

 When you click on Browse then open the ( menu) Box like the following :

| SHREE ADARSH BCA COLLEGE - BOTAD 1

2 UNIT-2_PART-1 ADVANCE CONTROL

[UNIT – 1 & 2]

 Using above box or menu , you can select the file from your drive or computer and
click open button.

 When you click on open button , your page look like the following :

 it is rendered on the page, it is implemented through <input type=file /> HTML tag.

 Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth,

Height etc. are implemented through style properites of <input>.

Code Behind file

protected void Button1_Click(object sender, EventArgs e)

{

Dim str As String

str = Server.MapPath("~//images//"+FileUpload1.FileName);

FileUpload1.PostedFile.SaveAs(str);
}

| SHREE ADARSH BCA COLLEGE - BOTAD 2

3 UNIT-2_PART-1 ADVANCE CONTROL

[UNIT:
PROPERTIY OF FILE UPLOAD CONTROL – 1 & 2]

1) BackColor :
This property is used to set the back(ground) color of the control.
2) BorderColor :
This property is used to set the border color of the control.
3) BorderStyle :
This property is used to set the border style of the control.
4) Font :
This property is used to set the font size, font style like BOLD, ITALIC etc of the control.
5) Height :
This property is used to set the height of the control.
6) Width :
This property is used to set the Width of the control.
7) ForeColor :
This property is used to set the fore color of the control.

(NOTE : Above Property is common most of the control)

(2) Image Control:

 IMAGE CONTROL is a very important control in ASP.NET.

 IMAGE CONTROL is used to display the images on web page or some alternative
text if image can not be display like jpg and jpeg etc….

 In web page , first you have to put image control from the Tool box.

 Image control look like the following :

 The image control just look like the panel type box.

 When it is rendered on the page , your page look like the following :

| SHREE ADARSH BCA COLLEGE - BOTAD 3

4 UNIT-2_PART-1 ADVANCE CONTROL

[UNIT – 1 & 2]

 Basic syntax for an image control:

<asp:Image ID="Image1" runat="server">

 The Colde behind the image control :

Shared I as Integer = 0

Protected Sub Timer1_Tick()

If I = 0 Then
Image1.ImageUrl = "~/IMAGE/IM1.JPG "
I = 1
ElseIf I = 1 Then
Image1.ImageUrl = "~/IMAGE/IM2.JPG "
I = 0
End If

End Sub

It has the following important properties:

1) ImageUrl

This property is used to set the image path which is display on the control.

| SHREE ADARSH BCA COLLEGE - BOTAD 4

5 UNIT-2_PART-1 ADVANCE CONTROL

2) ImageAlign [UNIT – 1 & 2]

This property is used to set the alignment of the imagee which is display
on the control

3) AlternateText :

This property is used to set the alternate Text which is display on the
control if the image is not dispolay.

4) BackColor :
This property is used to set the back(ground) color of the control.
5) BorderColor :
This property is used to set the border color of the control.
6) BorderStyle :
This property is used to set the border style of the control.
7) Font :
This property is used to set the font size, font style like BOLD,
ITALIC etc of the control.
8) Height :
This property is used to set the height of the control.
9) Width :
This property is used to set the Width of the control.
10) ForeColor :
This property is used to set the fore color of the control.

(3) HyperLink Control:

The HyperLink control is look like the HTML <a> element OR Tag.

The Hyperlink control is used to link the webpages to each other.

The Hyperlink control is link one webpage to other by using the NavigateUrl
property.

When it is link to other page then it’s color can change the blue color.

It is very important control in Asp.net to provide the facility to go another page

directly.

The Hyperlink control look like the following :

| SHREE ADARSH BCA COLLEGE - BOTAD 5

6 UNIT-2_PART-1 ADVANCE CONTROL

[UNIT – 1 & 2]

Basic syntax for a hyperlink control:

<asp:HyperLink ID="HyperLink1" runat="server">

</asp:HyperLink>

It has the following important properties:

Property Description
ImageUrl Path of the image to be displayed by the control
NavigateUrl Target link URL
Text The text to be displayed as the link
Target The window or frame which will load the linked page.

BASIC PROPERTY ALL :

(1) Wizard Control

The Wizard control is a more advanced version of the MultiView control.

It has built-in yet customizable behavior.

| SHREE ADARSH BCA COLLEGE - BOTAD 6

7 UNIT-2_PART-1 ADVANCE CONTROL

It has including sidebar with step[UNIT

links, – 1 & 2]
style, and navigation buttons.

Generally, Wizards represent a single task and user moves, from the current step
to the next or immediately preceeding step in case he/she wants modification.

Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth,

Height etc. are implemented through style properites of <table> tag.

It look like the following :

The property of the wizard control is the following:

1) WizardSteps :

This property is used to add the steps in left side and also change the title of
the step.

2) StartNextButtonStyle :

This property is used to set the button style.

3) StartNextButtonText :

This property is used to set the button Text.

Basic property all :

| SHREE ADARSH BCA COLLEGE - BOTAD 7
8 UNIT-2_PART-1 ADVANCE CONTROL

(4) Panel [UNIT – 1 & 2]

Panel control is generally used to put/ keep a group of controls on it.
It is frequently used when you have created attractive webpage.
When it is rendered on the page, generally it is implemented through <div> HTML
tag.
Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth,
Height etc. are implemented through style properites of <input> tag.

Panel looks like the following:

Following are some important properties that are very useful.

1) GroupingText:

This property is used to do the group of controls and give the caption of the
group.

2) Visible:

This property is used to visible the panel or not. If it is true then visible and
If it is false then unvisible the panel.

| SHREE ADARSH BCA COLLEGE - BOTAD 8

9 UNIT-2_PART-1 ADVANCE CONTROL

[UNIT –CONTROL
NAVIGATION 1 & 2]

(1) Menu

The ASP.NET Menu control is used to create and display the menu in webpage.

The ASP.NET menu control allows you to develop/ display menu control ASP.NET
Web pages in two way.

1) statically and
2) dynamically .

You can configure/setting the contents of the Menu control directly in the control.

you can also specify the contents by binding the control to a data source.

Without writing any code, you can control the appearance, orientation, and
content of an ASP.NET Menu control.

Static Display and Dynamic Display

The Menu control has two modes of display: static and dynamic.

Static display means that the Menu control is fully display/expanded all the time.
The entire structure is visible, and a user can click on any part.

In a dynamically displayed menu, only the portions you specify are static, other
portion is not static .If you want to display their child menu items then the user
holds the mouse pointer over the parent node.

| SHREE ADARSH BCA COLLEGE - BOTAD 9

10 UNIT-2_PART-1 ADVANCE CONTROL

i) Static Display Behavior: [UNIT – 1 & 2]

You can control static display behavior by using the StaticDisplayLevel property
of the Menu control.

The StaticDisplayLevels property indicates how many levels to display statically

from the root of the menu.

For example :

if StaticDisplayLevels is set to 3, your menu will be expanded to statically

display its first three levels. The minimum static display level is 1, and the control
will throw an exception if the value is set to 0 or a negative number.

ii) Dynamic Display Behavior

You can control Dynamic display behavior by using the following property of the
Menu control.

The MaximumDynamicDisplayLevels property specifies how many levels of

dynamically appearing menu nodes which should be displayed after the static
display level.

For example, if your menu has a static level of 3 and a dynamic level of 2, the
first three levels of your menu would be statically displayed, while the next two
levels would be dynamic.

If MaximumDynamicDisplayLevels is set to 0, no menu nodes will be

dynamically displayed. If the MaximumDynamicDisplayLevels is set to a
negative number, an exception is thrown.

Defining Menu Content

You can define content for the Menu control in two ways: by adding individual
MenuItem objects (declaratively or programmatically), and by data binding the
control to an XML data source.

Adding Menu Items Manually

You can add individual menu items in the control by specifying/using the Items
property.

The Items property is a collection of MenuItem objects.

| SHREE ADARSH BCA COLLEGE - BOTAD 10
11 UNIT-2_PART-1 ADVANCE CONTROL

The following example shows the [UNIT – 1 &markup

declarative 2] for a Menu control with
three items, each of which has two child items:

<asp:Menu ID="Menu1" runat="server" StaticDisplayLevels="3">

<Items>
<asp:MenuItem Text="File" Value="File">
<asp:MenuItem Text="New" Value="New"></asp:MenuItem>
<asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Edit" Value="Edit">
<asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
<asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="View" Value="View">
<asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
<asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
< /asp:MenuItem>
</Items>
</asp:Menu>

(2) Sitemap Path Control

It is a navigation control and display the map of the website.

The Sitemap Path control is used to add a site map (breadcrumbs) to the website.

A site map is a way to present all folders and pages of the website.

The sitemap control include the pages of the particular website and display the
name of those pages.

We can also say that sitemap control display the links for connecting to URLs of
other page.

The sitemap control uses the property of the SiteMapProvider for access data
from the database and store the information in a database.

The SiteMapProvider property use the System.Web namespace for use database.

Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth,

Height etc. are implemented through style properites of <span/> tag.

Generally current page reference is not rendered/display as a link, however, it can

be made clickable by setting RenderCurrentNodeAsLink=true.

| SHREE ADARSH BCA COLLEGE - BOTAD 11

12 UNIT-2_PART-1 ADVANCE CONTROL

[UNIT –that
Following are some important properties 1 &are
2] very useful.

PathSeparator It is used to set Path separator text. (By default it is >.)

NodeStyle It is used to set the style of all nodes that will be displayed.
It is used to set the style on node that represent the current
CurrentNodeStyle
page.
RootNodeStyle It is used to set the style on the absoulte root node.
PathSeparatorStyle It is used to set the style of path separator.

Example of Sitemap Path:

Home >> About >> About Company

ALL basic property add

(3) Tree View Control

The TreeView Control is used to display the node dynamically.

The TreeView control is an object model in ASP.Net which allows creation of nodes
dynamically.

It will have the Root, Parent and Leaf.

The TreeView control has properties and events.

It has some characteristics.

 TreeView node can navigate to some other pages

 The images and properties can be set to the nodes

 It can have the lines, checkbox and images

 It can set dynamically expand/collapse

 The nodes can be created on demand

PROPERTY OF THE TREE VIEW CONTROL :

There are following property of the TREE VIEW CONTROL :
| SHREE ADARSH BCA COLLEGE - BOTAD 12
13 UNIT-2_PART-1 ADVANCE CONTROL

[UNIT – 1 & 2]
1) BACK COLOR :
This property is used to set the background color.
2) BACKGROUND IMAGE :
This Property is used to set the background image.
3) FONT
This property is used to set the font color.
4) NODE
This property is used to get the collection of tree node.

5) SELECTED NODE :
6) ShowCheckBox -
This property used to set the check-box is required or not.
7) ShowLines –
This is used to show the flow of the nodes in the lines.

ALL BASIC CONROL WRITE :

The sample treeview code.

<asp:TreeView ID="TreeView1" runat="server">

<Nodes>
<asp:TreeNode Value="Child1" PopulateOnDemand="true" ShowCheckBox="true"
Expanded="True" Text="1">
<asp:TreeNode Value="Grandchild1" Text="A" />
<asp:TreeNode Value="Grandchild2" Text="B" />
</asp:TreeNode>
<asp:TreeNode Value="Child2" Text="2" />
<asp:TreeNode Value="Child3" Expanded="True" Text="3">
<asp:TreeNode Value="Grandchild1" Text="A" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
Example:

| SHREE ADARSH BCA COLLEGE - BOTAD 13