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 Pagetitle>
<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
|