Explanation:
There could
be situations when you would like to have different CSS Style at different
conditions for your ASP .NET Controls.
Here is
an example which will explain that how a Hyperlink CSS Class will be attached at
the runtime.
<%@ Page
Language="VB"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Page_Load(ByVal sender As
Object, ByVal
e As System.EventArgs) Handles
Me.Load
AssignCss()
End Sub
Private Sub AssignCss()
Dim var1 As Integer
Randomize()
var1 = Int(Rnd() * 2) + 1
If var1 = 2 Then
HyperLink1.CssClass = "hero"
Else
HyperLink1.CssClass = "notHero"
End If
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>CssClass
Assignment Page</title>
<style
type="text/css">
A.hero:link {background:
black; text-decoration:
none; color: yellow;}
A.hero:visited {background:
black; text-decoration:
none; color: yellow;}
A.hero:hover {background:
limegreen; font-weight:bold; color:
black;}
A.notHero:link {background:
yellow; text-decoration:
none; color: black;}
A.notHero:visited {background:
yellow; text-decoration:
none; color:black;}
A.notHero:hover {background:
green; font-weight:bold; color:
black;}
</style>
</head>
<body>
<form
id="form2"
runat="server">
<center
style="margin-top:200px">
<asp:HyperLink
ID="HyperLink1"
runat="server"
NavigateUrl="http://www.friendspoint.de"
Text='FriendsPoint.de'>
</asp:HyperLink>
</center>
</form>
</body>
</html>
Now we
will see how we can do this with an embeded HyperLink inside a DataList.
Keep in
mind that
Dim Link1
As HyperLink
Link1 =
CType(DataList1.FindControl("HyperLink2"),
HyperLink)
Will not
work for a DataList.
So How?
We have to get access to next deeper Control by getting hands on the Item Property
of the DataList.
For this we Selected a suitable Event "OnItemCreated"
of the DataList.
Here is
our DataList:
<asp:DataList ID="DataList1"
runat="server"
CellPadding="10"
CellSpacing="10"
DataSourceID="SqlDataSource1" RepeatColumns="3"
OnItemCreated="DataList1_ItemCreated">
<ItemTemplate>
<center>
<asp:HyperLink ID="HyperLink2"
runat="server"
NavigateUrl='http://www.friendspoint.de'
Text='Friends Point
Image:
<%# Eval("Caption")
%>'></asp:HyperLink>
</center>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString="<%$ ConnectionStrings:PersonalConnectionString
%>"
SelectCommand="SELECT [PhotoID],
[AlbumID], [Caption] FROM [Photos]">
</asp:SqlDataSource>
Now see
how we are Getting hands on the Item Property:
Protected Sub
DataList1_ItemCreated(ByVal sender
As Object, ByVal
e As System.Web.UI.WebControls.DataListItemEventArgs)
Dim var1 As Integer
Randomize()
var1 = Int(Rnd() * 2) + 1
Dim Link1 As HyperLink
Link1 = CType(e.Item.FindControl("HyperLink2"),
HyperLink)
If Link1 Is Nothing Then
Response.Write("HyperLink could not be accessed")
Else
If var1 = 2 Then
Link1.CssClass = "hero"
Else
Link1.CssClass = "notHero"
End If
End If
End Sub
|