P
paul
All-
I'm just working my way through making my own custom controls and have
a question concerning the caching of custom controls within asp.net.
Basically I've taken a custom control from one of the demo projects on
the asp.net site (for my own learning purposes!). This control renders
an A to Z bar. Each time a user clicks a link the letter is
highlighted and an event is fired which is captured in your
application).
Now here is where my lack of understanding comes into play. In short
each time a letter is clicked the whole AtoZ control is remade (see
CreateChildControls below) with the default css class attached to each
letter- which are linkbuttons (linkSmallBold). Further code then sets
the css on the letter that was pressed to a different color
(linkSmallBold2). However when the control is rendered back to the
browser all the previous buttons clicked previously still have the
"linkSmallBold2" class attached to them. Hence despite re-creating all
the controls which make up the AtoZ bar and resetting the css class on
each letter to the default one (linkSmallBold) somewhere along the
line the control is remembering the buttons previously pressed.
I was hoping someone could help me out into understanding how this is
occuring???
thanks in advance.
Paul.
The code below is for the custom control and also an aspx page (in
this case I've kept to the default name webform1.aspx).
This is the code to the custom control.....
__________________________
using System;
using System.Collections;
using System.Collections.Specialized;
using System.Web;
using System.Configuration;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.IO;
namespace TestCustomControls {
[
ParseChildren(true)
]
public class AlphaBar : System.Web.UI.WebControls.WebControl,
INamingContainer {
private string currentLetter = "";
// *********************************************************************
// CreateChildControls
// ********************************************************************/
protected override void CreateChildControls() {
char chrStart = 'A';
char chrStop = 'Z';
for (int iLoop = chrStart; iLoop <= chrStop; iLoop++) {
Controls.Add(CreateLetteredLinkButton(((char) iLoop).ToString()));
}
Controls.Add(CreateLetteredLinkButton("0-9"));
//ResetLetters();
}
// *********************************************************************
// CreateLetteredLinkButton
// ********************************************************************/
private LinkButton CreateLetteredLinkButton(String buttonText) {
LinkButton btnTmp = new LinkButton();
btnTmp.Text = buttonText;
// This I thought would convert all the linkbuttons to have the
"linksmallbold" class.
// But somewhere the previous buttons that have been clicked
previously keep the class
// "linkSmallBold2"................how does this occur.......is
there some caching I'm missing????
btnTmp.CssClass = "linkSmallBold";
btnTmp.CausesValidation = false;
btnTmp.CommandArgument = buttonText;
btnTmp.Click += new System.EventHandler(Letter_Clicked);
return btnTmp;
}
// *********************************************************************
// Letter_Clicked
// ********************************************************************/
public event System.EventHandler Letter_Changed;
// *********************************************************************
// Letter_Clicked
// ********************************************************************/
private void Letter_Clicked(Object sender, EventArgs e) {
SelectedLetter = ((LinkButton) sender).CommandArgument;
ResetLetters();
if (null != Letter_Changed)
Letter_Changed(sender, e);
}
// *********************************************************************
// ResetLetters
// ********************************************************************/
public void ResetLetters() {
int x = 0;
while (x < this.Controls.Count) {
System.Web.UI.WebControls.LinkButton lkn =
((System.Web.UI.WebControls.LinkButton)this.Controls[x]);
//lkn.CssClass = "linkSmallBold";
if (lkn.Text == SelectedLetter) {
lkn.CssClass = "linkSmallBold2";
}
x += 1;
}
}
// *********************************************************************
// SelectedLetter
// ********************************************************************/
public string SelectedLetter {
get {
if (ViewState["SelectedLetter"] == null)
return currentLetter;
return (string) ViewState["SelectedLetter"];
}
set {
ViewState["SelectedLetter"] = value;
}
}
}
}
________________________________________
This is the code to the aspx (designer mode). Note- to keep it simple-
I've just dropped the above control into the page (with a few css
settings).
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="AlphaBarTest.WebForm1" %>
<%@ Register TagPrefix="TestControls" Namespace="TestCustomControls"
Assembly="SteriaAMCustomControls"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<style>
.linkSmallBold { FONT-WEIGHT: bold; FONT-SIZE: 75%; PADDING-BOTTOM:
0px; MARGIN: 12px 5px; COLOR: rgb(8,121,198); PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,Verdana,sans-serif; BACKGROUND-COLOR:
rgb(220,226,229); TEXT-DECORATION: none; padding-right-value: 0px;
padding-left-value: 8px; padding-left-ltr-source: physical;
padding-left-rtl-source: physical; padding-right-ltr-source: physical;
padding-right-rtl-source: physical }
.linkSmallBold2 { FONT-WEIGHT: bold; FONT-SIZE: 75%; PADDING-BOTTOM:
0px; MARGIN: 12px 5px; COLOR: rgb(255,255,255); PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,Verdana,sans-serif; BACKGROUND-COLOR:
rgb(220,226,229); TEXT-DECORATION: none; padding-right-value: 0px;
padding-left-value: 8px; padding-left-ltr-source: physical;
padding-left-rtl-source: physical; padding-right-ltr-source: physical;
padding-right-rtl-source: physical }
.searchTableCOV { BORDER-RIGHT: #8c9ea8 1px solid; BORDER-TOP:
#8c9ea8 1px solid; MARGIN: 10px 0px 0px 16px; BORDER-LEFT: #8c9ea8 1px
solid; WIDTH: 537px; BORDER-BOTTOM: #8c9ea8 1px solid }
.searchTableCOV THEAD { FONT-WEIGHT: bold; COLOR: #ffffff;
BACKGROUND-COLOR: #8c9ea8 }
.searchTableCOV THEAD TD { PADDING-RIGHT: 0px; PADDING-LEFT: 20px;
FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; COLOR: #ffffff; PADDING-TOP:
2px; BACKGROUND-COLOR: #dce2e5 }
.searchTableCOV TBODY TD { PADDING-RIGHT: 10px; PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px; PADDING-TOP: 10px; BACKGROUND-COLOR: #cccccc }
</style>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE class="searchTableCOV" cellSpacing="0" cellPadding="0">
<THEAD>
<TR>
<TD id="alphabartd">
<TestControls:ALPHABAR id="Alphabar1" runat="server"
CausesValidation="False"></TestControls:ALPHABAR></TD>
</TR>
</THEAD>
</TABLE>
</form>
</body>
</HTML>
________________________________________
I'm just working my way through making my own custom controls and have
a question concerning the caching of custom controls within asp.net.
Basically I've taken a custom control from one of the demo projects on
the asp.net site (for my own learning purposes!). This control renders
an A to Z bar. Each time a user clicks a link the letter is
highlighted and an event is fired which is captured in your
application).
Now here is where my lack of understanding comes into play. In short
each time a letter is clicked the whole AtoZ control is remade (see
CreateChildControls below) with the default css class attached to each
letter- which are linkbuttons (linkSmallBold). Further code then sets
the css on the letter that was pressed to a different color
(linkSmallBold2). However when the control is rendered back to the
browser all the previous buttons clicked previously still have the
"linkSmallBold2" class attached to them. Hence despite re-creating all
the controls which make up the AtoZ bar and resetting the css class on
each letter to the default one (linkSmallBold) somewhere along the
line the control is remembering the buttons previously pressed.
I was hoping someone could help me out into understanding how this is
occuring???
thanks in advance.
Paul.
The code below is for the custom control and also an aspx page (in
this case I've kept to the default name webform1.aspx).
This is the code to the custom control.....
__________________________
using System;
using System.Collections;
using System.Collections.Specialized;
using System.Web;
using System.Configuration;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;
using System.IO;
namespace TestCustomControls {
[
ParseChildren(true)
]
public class AlphaBar : System.Web.UI.WebControls.WebControl,
INamingContainer {
private string currentLetter = "";
// *********************************************************************
// CreateChildControls
// ********************************************************************/
protected override void CreateChildControls() {
char chrStart = 'A';
char chrStop = 'Z';
for (int iLoop = chrStart; iLoop <= chrStop; iLoop++) {
Controls.Add(CreateLetteredLinkButton(((char) iLoop).ToString()));
}
Controls.Add(CreateLetteredLinkButton("0-9"));
//ResetLetters();
}
// *********************************************************************
// CreateLetteredLinkButton
// ********************************************************************/
private LinkButton CreateLetteredLinkButton(String buttonText) {
LinkButton btnTmp = new LinkButton();
btnTmp.Text = buttonText;
// This I thought would convert all the linkbuttons to have the
"linksmallbold" class.
// But somewhere the previous buttons that have been clicked
previously keep the class
// "linkSmallBold2"................how does this occur.......is
there some caching I'm missing????
btnTmp.CssClass = "linkSmallBold";
btnTmp.CausesValidation = false;
btnTmp.CommandArgument = buttonText;
btnTmp.Click += new System.EventHandler(Letter_Clicked);
return btnTmp;
}
// *********************************************************************
// Letter_Clicked
// ********************************************************************/
public event System.EventHandler Letter_Changed;
// *********************************************************************
// Letter_Clicked
// ********************************************************************/
private void Letter_Clicked(Object sender, EventArgs e) {
SelectedLetter = ((LinkButton) sender).CommandArgument;
ResetLetters();
if (null != Letter_Changed)
Letter_Changed(sender, e);
}
// *********************************************************************
// ResetLetters
// ********************************************************************/
public void ResetLetters() {
int x = 0;
while (x < this.Controls.Count) {
System.Web.UI.WebControls.LinkButton lkn =
((System.Web.UI.WebControls.LinkButton)this.Controls[x]);
//lkn.CssClass = "linkSmallBold";
if (lkn.Text == SelectedLetter) {
lkn.CssClass = "linkSmallBold2";
}
x += 1;
}
}
// *********************************************************************
// SelectedLetter
// ********************************************************************/
public string SelectedLetter {
get {
if (ViewState["SelectedLetter"] == null)
return currentLetter;
return (string) ViewState["SelectedLetter"];
}
set {
ViewState["SelectedLetter"] = value;
}
}
}
}
________________________________________
This is the code to the aspx (designer mode). Note- to keep it simple-
I've just dropped the above control into the page (with a few css
settings).
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="AlphaBarTest.WebForm1" %>
<%@ Register TagPrefix="TestControls" Namespace="TestCustomControls"
Assembly="SteriaAMCustomControls"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
<style>
.linkSmallBold { FONT-WEIGHT: bold; FONT-SIZE: 75%; PADDING-BOTTOM:
0px; MARGIN: 12px 5px; COLOR: rgb(8,121,198); PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,Verdana,sans-serif; BACKGROUND-COLOR:
rgb(220,226,229); TEXT-DECORATION: none; padding-right-value: 0px;
padding-left-value: 8px; padding-left-ltr-source: physical;
padding-left-rtl-source: physical; padding-right-ltr-source: physical;
padding-right-rtl-source: physical }
.linkSmallBold2 { FONT-WEIGHT: bold; FONT-SIZE: 75%; PADDING-BOTTOM:
0px; MARGIN: 12px 5px; COLOR: rgb(255,255,255); PADDING-TOP: 0px;
FONT-FAMILY: Arial,Helvetica,Verdana,sans-serif; BACKGROUND-COLOR:
rgb(220,226,229); TEXT-DECORATION: none; padding-right-value: 0px;
padding-left-value: 8px; padding-left-ltr-source: physical;
padding-left-rtl-source: physical; padding-right-ltr-source: physical;
padding-right-rtl-source: physical }
.searchTableCOV { BORDER-RIGHT: #8c9ea8 1px solid; BORDER-TOP:
#8c9ea8 1px solid; MARGIN: 10px 0px 0px 16px; BORDER-LEFT: #8c9ea8 1px
solid; WIDTH: 537px; BORDER-BOTTOM: #8c9ea8 1px solid }
.searchTableCOV THEAD { FONT-WEIGHT: bold; COLOR: #ffffff;
BACKGROUND-COLOR: #8c9ea8 }
.searchTableCOV THEAD TD { PADDING-RIGHT: 0px; PADDING-LEFT: 20px;
FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; COLOR: #ffffff; PADDING-TOP:
2px; BACKGROUND-COLOR: #dce2e5 }
.searchTableCOV TBODY TD { PADDING-RIGHT: 10px; PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px; PADDING-TOP: 10px; BACKGROUND-COLOR: #cccccc }
</style>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE class="searchTableCOV" cellSpacing="0" cellPadding="0">
<THEAD>
<TR>
<TD id="alphabartd">
<TestControls:ALPHABAR id="Alphabar1" runat="server"
CausesValidation="False"></TestControls:ALPHABAR></TD>
</TR>
</THEAD>
</TABLE>
</form>
</body>
</HTML>
________________________________________