i want to render css in page conditionally based on cookie. at my server side i detect cookie and store the cookie value in variable and now in aspx page i want to render css with the help of if else logic based on cookie value stored in variable at code behind.
suppose in my .cs code behind i store the cookie value like strCountryCookie="GB" and in my aspx page i am trying to render css using if else logic based on cookie value stored in variable.
so here is the way i am trying.
<%
if(strCountryCookie=="DE")
{ %>
#acloginpod {
width:380px;
background:#ebebeb url(../images/acloginpodbg.gif) repeat-x;
border:1px solid #d3d3d3;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
<% } else { %>
it is showing error. so i am not being able to figure out how to render it based on cookie value using if else logic. so please guide me with concept. thanks
Like others said, you can't use server-side code in CSS. What you did is almost correct, if you make sure the string is accessible from the code behind:
protected string strCountryCookie = "GB";
and then fix your statement
<head runat="server">
<title>Test</title>
<% if (strCountryCookie == "GB")
{ %>
<style type="text/css">
#acloginpod {
width:380px;
background:#ebebeb url(../images/acloginpodbg.gif) repeat-x;
border:1px solid #d3d3d3;
-webkit-border-radius:7px;
-moz-border-radius:7px;
}
</style>
<%} %>
Although this will get rather ugly quick... especially if you add a bunch of countries.
Another option is to put all the custom styles into its own style sheet and then dynamically load up the style sheet based on the cookie. You get the benefit of the style sheet being cached in this case:
<link id="_countryStyleSheet" rel="stylesheet" type="text/css" runat="server" />
And then load the style sheet in your code behind:
_countryStyleSheet.Href = String.Format("~/styles/{0}.css", strCountryCookie);
In this example, the style sheet would be named GB.css, etc.
You can't use any code in CSS files.
you can put your css into a separate file and then include it or not in the header based on your condition.
approach that I prefer in such cases is to include ALL css markup on each page, but rather assign my elements with different classes based on condition. For you that would mean to use a class .acloginpod instead of id and then assign element with this class only when country is 'DE'.
or if you want different styles for different countries then define element class as following:
">
and in your css define different classes like mydiv-DE or mydiv-GB
Related
How would I go about populating a database value to my html body background ?
Simply put, the HTML code is something like:
<body background="<%=session("userLogo")%>">
Update
Clarification of my question: Where in the code-behind, should I make the database call to populate the session("userLogo") value ?
Use this in your aspx:
body { background-image: url(<%= session("userLogo") %>); }
You can also put this in a css file (but then it has be an embedded resource and do remember to do performSubstitution = true)
Use <%= %>
<body background="<%= /* Code to retrieve value */ %>">
I have a specific control gridview , i apply specific CSS file on it , i wanna to change this CSS under specific condition in my .cs file, is there away to do that?
for example :
<ItemStyle CssClass ="normal"/>
i want to change this in .cs under specific condition.
Do you mean GridView?
It doesn't have and ItemStyle Property. Columns within it do though.
So you can use:
gv.Columns[0].ItemStyle.CssClass = "RedItem";
DataGrid does have an ItemStyle property:
dg.ItemStyle.CssClass = "MoreThanNormalClass";
Its not clear from your question what you want to change...
Example,
CSS Classes:
<style>
.Normal{ background-color:Lime; }
.Warning{ background-color:Red; }
</style>
ASP.NET markup:
<asp:DataGrid runat="server" id="dg" onitemdatabound="dg_ItemDataBound" >
<ItemStyle CssClass="Normal" />
</asp:DataGrid>
C# code behind :
protected void Page_Load(object sender, EventArgs e)
{
int[] someInts = { 1, 15, 20 };
dg.DataSource = someInts;
dg.DataBind();
}
protected void dg_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if (e.Item.DataItem != null)
{
int v = (int)e.Item.DataItem ;
if (v > 10 && v < 20)
e.Item.CssClass = "Warning";
}
}
Outputs:
Your styles doesn't have to be in a .css file: You can change the file to an .aspx or maybe create an HttpHandler to serve up your CSS.
You have to get something like this rendered to the HTML page.
<style type="text/css">
.itemstyle
{
/* whatever styles you need */
}
</style>
This can override whatever you have in your CSS file. One option is to put a Literal control on the ASPX page:
<asp:Literal ID="litStyle" runat="server" />
and use that to write out the necessary styles from code behind:
litStyle.Text = "<style type=\"text/css\">.itemstyle{" + myStyles + "}</style>";
You can inject a <style> tag with the necessary adjustments to it onto the page without modifying the CSS file.
Just create a literal control, acting as placeholder for the modified styles, on the ASPX page. From the code-behind, render something similar to the following to the literal:
Literal1.Text = "<style type=\"text/css\">.normal { background-color:red; }</style>";
...with "normal" being the original CSS class that you want to modify. The beauty of CSS is that it would first apply styles set in the included files, then any "overwritten" styles explicitly specified on the page in <style> tags.
Dynamic CSS is generally frowned upon.
You should define two ( or more) classes within your CSS and then set the ClassName property of the element in a PreRender event( or client side) script as needed.
Well, controls aren't responsible of managing CSS source files and its addition to the page, so, the easy answer is no, you can't do that.
By the way, there's some solution for doing that.
You can include a CSS file with style HTML element from your control by adding a server control (HtmlGenericControl, for example), with the apropiate attributes and values, so, if container control requires some specific CSS file, you can add it during container control's life cycle, just before rendering it, to HTML head element (marked with runat="server" attribute) of some ASP.NET page.
Maybe a good way of doing that should be creating a configuration section in your web.config implementing your own one which may support creating dependencies of controls/pages and CSS stylesheet files, so, using this approach, you would be able to implement some method in a derived from System.Web.UI.Page class that may add CSS files depending on controls:
<cssDependencies>
<control type="YourNamespace.YourControl" cssFile="~/Styles/Default/YourControlStyle.css" />
<cssDependencies>
And then, your CustomPageBase would have its own "AddControl" method which should register its type in some collection that may be iterated in the PreRender method, so, there you can add CSS files based on control's types.
I'm just giving you ideas! :)
EDIT & NOTE:
Anyway, this approach, and your goal, could have problems in terms of performance optimization.
Best optimized sites should combine all needed CSS into one, so browser should load one instead of many during page renderization.
I believe combining all CSS files into one can be achieved with "CSS files and control types approach", and I would suggest you to go this way, because if you don't do that, you can end with pages having dozens of style elements.
Have you heard about DotLess project? Check it out here: http://www.dotlesscss.org/ Maybe it can give you a better approach with less effort!
The best way would be to have different classes set up in your static css-file and change which of these classes your gridview uses from codebehind (.cs). This way you will still get the benefit of the css being cached and well separated from your view (.aspx).
css:
.normal { background-color:white; }
.alternate { background-color:#EEE; }
codebehind
var css = SomeLogic() ? "normal" : "alternate";
gridView.RowStyle.CssClass = css;
I am struggling with something that I guess should be standard practice really. I have a number of user controls that use some JQuery plugins. I do not really want to link to the extra CSS and JS files from my main masterpage as this would cause extra load to the user the first time they hit the site, (admittedly it would only be the once), so I was just putting them links into the top of the user control. Then I looked at my source HTML, not nice! Even worse for controls that repeat multiple times on a page.
So I was thinking is there a way of injecting them into the Head of the page when they are needed from the User Control. For that matter is there a way of doing it to the footer for JS stuff?
To dynamically register a script (and ensure that duplicates are merged) in ASP.NET you can call:
Page.ClientScript.RegisterClientScriptInclude(
"mykey", "~/scripts/jquery-1.3.2.js");
And read the full details on this method on MSDN.
To add CSS dynamically you can do something like this:
HtmlLink cssLink = new HtmlLink();
cssLink.Href = "path to CSS";
cssLink.Attributes["some attr1"] = "some value1";
cssLink.Attributes["some attr2"] = "some value2";
Page.Header.Controls.Add(cssLink);
This example of injecting CSS will not merge duplicate entries. To avoid duplication you'll have to keep track of duplicates yourself. One place you can store a list of scripts you've already registered is in HttpContext.Items. Stick a HashSet in there that keeps a list of all registered scripts so that you don't register the same CSS file twice (which is generally harmless, but something to avoid anyway).
I followed a similar approach, but I use CSS directly in the user control so I don't have to import a CSS file. The following is code entirely from a sample user control:
<style id="style1" type="text/css" visible="false" runat="server">
td { font-family: Tahoma; font-size: 8pt; }
</style>
In code-behind:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
HtmlGenericControl style = new HtmlGenericControl("style");
style.Attributes.Add("type", "text/css");
style.InnerHtml = style1.InnerHtml;
Page.Header.Controls.Add(style);
}
You'll notice that the CSS is rendered in the head tag and not inside the body tag.
You can use ClientScript.RegisterClientScriptInclude() for the JavaScript.
For the CSS, one trick is to include them in your Master page, but with Visible="false", so that they aren't rendered into the markup by default.
Then, in your user controls, set a flag in the Items collection, from an early event, such as OnLoad(). For example, this.Context.Items["mycss"] = true;
Finally, in your Master page, from a later event, such as OnPreRender(), check to see if those flags are set. If they are, then set the Visible property to true for the corresponding CSS.
This also allows you to use the control with Master pages that don't use the CSS, since the Items entries could simply be ignored. If you have many Master pages that need the same behavior, you could put this code in a base class or use nested Master pages.
I assume you're using Asp.NET.
Try putting a content placeholder in the of the MasterPage...
<head>
<asp:ContentPlaceHolder ID="AdditionalPageHeader" />
</head>
If you're working in an aspx file or an ascx you need only define a content control...
<asp:Content ContentPlaceHolderID="AdditionalPageHeader" />
If you're working on a code-behind only type of server control, you can can get a pointer to that content place holder:
this.Page.Master.FindControl("AdditionalPageHeader")
... and manipulate it's contents programatically.
To add stylesheets or javascript (inline or not) dynamical I wrote these three functions:
Public Function addScript(ByVal path2js As String) As System.Web.UI.Control
Dim si As New HtmlGenericControl
si.TagName = "script"
si.Attributes.Add("type", "text/javascript")
si.Attributes.Add("src", path2js)
Return si
End Function
Public Function addScript_inline(ByVal js As String) As System.Web.UI.Control
Dim si As New HtmlGenericControl
si.TagName = "script"
si.Attributes.Add("type", "text/javascript")
si.InnerHtml = js
Return si
End Function
Public Function addStyle(ByVal path2css As String) As System.Web.UI.Control
Dim css As New HtmlLink
css.Href = path2css
css.Attributes.Add("rel", "stylesheet")
css.Attributes.Add("type", "text/css")
css.Attributes.Add("media", "all")
Return css
End Function
I call them in page_load on my masterpage, like this:
Me.Page.Header.Controls.Add(modGlobal.addScript("script/json/json2.js"))
or
Me.Page.Header.Controls.Add(modGlobal.addStyle("style/flexigrid/flexigrid.css"))
Regards
In ASP.NET Gridviews generate a table which generates a parent div container. This can break CSS layouts since there is no way to attach styles to the generated div. Is there a way to prevent the div from generating or a way to apply a style to it?
This was asked and marked as resolved here but MS just said that the div is needed for the Paging and Sorting functionality. Am I to understand that if I want to use the paging and sorting functionality I can't wrap my own div around it and apply a style? Thanks
If you're stuck with an unstyled wrapper (which it appears that you are) but want to enforce a style, give it another wrapper, and apply your style to the combination. If a plain div has some padding you want to get rid of (for example), this in the aspx:
<div id="crushGvDiv">
<asp:GridView ... >
</div>
and this for CSS:
div#crushGvDiv, div#crushGvDiv div { padding: 0; margin: 0; }
UPDATE
Ians response does remove much of the hackery from this but it also requires
more effort on my part. I think we can have the best of both worlds if we
do this just a little differently...
We no longer want to add a 'table-responsive' div to our source at all. We DO want to add a 'table-responsive-table' to our GridView classes.
ASP
<asp:GridView ID=gvMain DataSourceID=dsMain RunAt=Server
CssClass='table table-responsive-table'>
Our JavaScript just needs to add the 'table-responsive' class to the parent div of those 'table-responsive-table' class tables that we've added.
JS
$( document ).ready(function() {
$(".table-responsive-table").parent().addClass('table-responsive');
});
This will generate:
HTML
<div class=table-responsive>
<table class='table table-responsive-table' .....>
This new output should be relatively free of hackery related problems due to the fact that we have exactly the same output in the end as we would've otherwise had (except for the extra class on the table), we do not need to modify this code for every table (meaning we can write it once and it'll automatically be applied to all GridViews with the 'table-responsive-table' class), and we are not moving\copying the table data at all (this is important for speed, paging, and sorting). I know everyone says they have the best answer but I really do think this is the absolute best way of handling this.
NOTE: I have not tested this new code but it will probably work just fine.
An easy solution without render modifying:
I need to apply a style to the div generated by the gridview because it breaks my layout, so I created a div with id "myContainerDiv" and moved my GridView into it, and using jQuery I apply some styles.
Example:
$("#myContainerDiv > div").css("display", "inline");
I put this javascript in $(document).ready(function({}));.
But if you use UpdatePanel, like I must use in this particular case, I execute this $().css() in every async postback. Without that the style will be lost if you execute some updatepanel where your gridview is contained. But I execute this $().css() only if a particular UpdatePanel is fired (no need to execute this javascript instruction in every every every async postback)
Example:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined && sender._updatePanelClientIDs != null &&
sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") {
$("#myContainerDiv > div").css("display", "inline");
}
}
</script>
Resolved!
The entire page will look like that:
<script type="text/javascrcipt" src="jquery.js"></script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined && sender._updatePanelClientIDs != null &&
sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") {
$("#myContainerDiv > div").css("display", "inline");
}
}
</script>
<asp:UpdatePanel runat="server" ID="MyParticularUpdatePanel" UpdateMode="Conditional" RenderMode="Inline">
<Triggers>
// Your triggers here...
</Triggers>
<ContentTemplate>
<div id="myContainerDiv" style="display:inline;">
<asp:GridView runat="server" ID="MyGridView" AutoGenerateColumns="false" Height="150px" EmptyDataText="No data.">
<Columns>
<asp:BoundField DataField="ID" HeaderText="My ID" />
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I don't know if this code will compile exactly like I wrote because I wrote it using notepad.
Sorry for my poor english, I'm from Brazil.
Christophe Trevisani Chavey.
http://www.christophetrevisani.com
Same issue here, OMG it's so annoying. Glitch in rendering in IE6/7 when butting a div to the top of a gridview - the parent DIV causes a space between the two elements.
I've dug into the GridView code using reflector and found the problem:
Private Sub Render(ByVal writer As HtmlTextWriter, ByVal renderPanel As Boolean)
If (Not Me.Page Is Nothing) Then
Me.Page.VerifyRenderingInServerForm(Me)
End If
Me.PrepareControlHierarchy
If renderPanel Then
Dim clientID As String = Me.ClientID
If Me.DetermineRenderClientScript Then
If (clientID Is Nothing) Then
Throw New HttpException(SR.GetString("GridView_MustBeParented"))
End If
Dim builder As New StringBuilder("__gv", (clientID.Length + 9))
builder.Append(clientID)
builder.Append("__div")
writer.AddAttribute(HtmlTextWriterAttribute.Id, builder.ToString, True)
End If
writer.RenderBeginTag(HtmlTextWriterTag.Div)
End If
Me.RenderContents(writer)
If renderPanel Then
writer.RenderEndTag
End If
End Sub
This is called from render:
Protected Friend Overrides Sub Render(ByVal writer As HtmlTextWriter)
Me.Render(writer, Not MyBase.DesignMode)
End Sub
So, 'renderPanel' == not DesignMode. The DIV is used for paging and sorting when then gridview isn't in an UpdatePanel. On my site, all GridViews are in a UP plus they inherit from a custom gridview class, so my solution was to override the above function with the following:
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
Me.PrepareControlHierarchy()
Me.RenderContents(writer)
End Sub
The other solution could be to copy the render method from above and changed as required.
This smells of HACK - you've been warned, but might work for you, esp if you're not using paging/sorting.
Simplest and best solution using CSS class "gridViewWrapperFix".
ASPX:
<div class="gridViewWrapperFix">
<asp:GridView>
<%--the full gridview would go here--%>
</asp:GridView>
</div>
CSS:
/* styles the div that gets auto generated around and asp.net gridview */
.gridViewWrapperFix > div {
padding: 0;
margin: 0;
border: 3px solid red;
}
You can put it inside of an asp:Panel and set the Visible property on the panel to false if the table is empty.
I've never done this, but I my first guess would be you could grab the rendered html output just before it gets to the browser, remove the outer div and then htmltextwrite out your new rendered html in the prerender event or make a user or custom control to do this.
But then you risk breaking the functionality of the gridview but if you know you won't be using the features that use the div, then you might get away with it.
You could define an explicit CssClass for your Gridviews to make use of.
<asp:GridView ... CssClass="nameOfStyleClass" ... />
Then define a css class:
.nameOfStyleClass
{
< Style stuff >
}
I can get simple examples to work fine as long as there's no master page involved. All I want to do is click a button and have it say "hello world" with the javascript in a .js file, using a master page. Any help very much appreciated :)
EDIT
As #Adam points out in the comments, there is a native jQuery mechanism that basically does the same thing as the hack in my original answer. Using jQuery you can do
$('[id$=myButton]').click(function(){ alert('button clicked'); });
My hack was originally developed as a Prototype work around for ASP.NET and I adapted it for the original answer. Note that jQuery basically does the same thing under the hood. I recommend using the jQuery way, though, over implementing my hack.
Original answer left for comment context
When you use a master page, ASP.NET mangles the names of the controls on the dependent pages. You'll need to figure out a way to find the right control to add the handler to (assuming you're adding the handler with javascript).
I use this function to do that:
function asp$( id, tagName ) {
var idRegexp = new RegExp( id + '$', 'i' );
var tags = new Array();
if (tagName) {
tags = document.getElementsByTagName( tagName );
}
else {
tags = document.getElementsByName( id );
}
var control = null;
for (var i = 0; i < tags.length; ++i) {
var ctl = tags[i];
if (idRegexp.test(ctl.id)) {
control = ctl;
break;
}
}
if (control) {
return $(control.id);
}
else {
return null;
}
}
Then you can do something like:
jQuery(asp$('myButton','input')).click ( function() { alert('button clicked'); } );
where you have the following on your child page
<asp:Button ID="myButton" runat="server" Text="Click Me" />
If your site has content pages in other folders, using the Page's ResolveUrl method in the src path will ensure that your js file can always be found:
<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/jquery-1.2.6.min.js") %>' ></script>
Make sure that jQuery is being added in the master page. Given that you have this control:
<asp:Button ID="myButton" runat="server" Text="Submit" />
You can wireup the javascript with this:
$(document).ready(function() {
$('[id$=myButton]').click(function() { alert('button clicked'); });
});
$(document).ready() fires when the DOM is fully loaded, and all the elements should be there. You can simplify this further with
$(function() {});
The selector syntax $('[id$=myButton]') searches elements based on their id attribute, but matches only the end of the string. Conversely, '[id^=myButton]' would match the beginning, but for the purposes of filtering out the UniqueID that wouldn't be very useful. There are many many more useful selectors you can use with jQuery. Learn them all, and a lot of your work will be done for you.
The problem is that ASP.Net creates a unique id and name attribute for each element, which makes finding them difficult. It used to be that you'd need to pass the UniqueID property to the javascript from the server, but jQuery makes that unneccessary.
With the power of jQuery's selectors, you can decouple the javascript from the server-side altogether, and wireup events directly in your javascript code. You shouldn't have to add javascript into the markup anymore, which helps readability and makes refactoring much easier.
Just move the <script type="text/javascript" src="jquery.js" /> tag into the head tag in the master page. Then you can use jquery in all content pages.
There is no magic about using master pages with jQuery.
Adam's solution is the best. Simple!
Master page:
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
Content page:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
$(document).ready(function () {
$("[id$=AlertButton]").click(function () {
alert("Welcome jQuery !");
});
});
</script>
</asp:Content>
where the button is
<asp:Button ID="AlertButton" runat="server" Text="Button" />
Reference the the Jquery .js file in the head of the MasterPage as follows:
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>
(some browsers don't like ending it with />)
Then you can write things like
$('#<%= myBtn.ClientID%>').show()
in your javascript making sure to use the ClientId when referencing an ASP.Net control in your client code. That will handle any "mangling" of names and ids of the controls.
Master page:
The jQuery library goes in the master page. See if the path is correctly referenced. You might like to add the extra documentation like this:
<head>
<script type="text/javascript" src="/Scripts/jquery-1.2.6.min.js"></script>
<% if (false) { %>
<script type="text/javascript" src="/Scripts/jquery-1.2.6-vsdoc.js"></script>
<% } %>
</head>
Master page:
<head>
<script type="text/javascript">
$(document).ready(
function()
{
alert('Hello!');
}
);
</script>
</head>
CodeBehind for content pages and user controls:
this.textBox.Attributes.Add("onChange",
String.Format("passElementReferenceToJavascript({0})", this.textBox.ClientID));
Check out this post:
http://blogs.msdn.com/webdevtools/archive/2008/10/28/rich-intellisense-for-jquery.aspx
also explains how to get intellisense for jQuery in Visual studio.
When pages are rendered along with master pages, control id gets changed on page rendering so we can't refer them in jQuery like this #controlid. Instead we should try using input[id$=controlid]. If control is rendered as input control or if as anchor tag use a[id$=controlid] in jQuery.
In case if some one wants to access a label, here is the syntax
$('[id$=lbl]').text('Hello');
where lbl is the label id and the text to display in the label is 'Hello'
I also started with the simplest of examples and had no luck. I finally had to add the jquery .js file outside of the <head> section of the master page. It was the only way I could get anything to work in Firefox (haven't tried other browsers just yet).
I also had to reference the .js file with an absolute address. Not entirely sure what's up with that one.
Adam Lassek linked to using jQuery selectors, though I think its worth explicitly calling out selecting elements by their class, as opposed to their id.
e.g. Instead of $("#myButton").click(function() { alert('button clicked'); });
instead use $(".myButtonCssClass").click(function() { alert('button clicked'); });
and add the class to the button:
<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myButtonCssClass" />
This has the benefit of not having to worry about whether two control ids 'end' the same way in addition to being able to apply the same jQuery code to multiple controls at a time (with the same css class).
PROBLEM --> when using Site.Master pages the control id names (for ASP controls) get the ContentPlaceHolderID prefixed to them.
(Note this not a problem for non-asp controls as they don't get 'reinterpreted' - i.e. they just appear as written)
SOLUTIONS:
Simplest --> add ClientIDMode="Static" to the asp control definition (or set with properties) in aspx page
Alternatives include:
Hardcoding the ContentPlaceHolderID name in the js code e.g "#ContentPlaceHolder1_controlName" - eek!!!!
using the <%= controlName.ClientID %> in the ASP page - plus, assigning it - there- to a variable (or object of variables). The variable (or object dot notation) can then be used in external js page
(NOTE: Can't use <%= controlName.ClientID %> in external js)
Using CssClass with a unique(same name as ID) in ASP page and refering to the control as ".controlName" instead of "#controlName"
Using the "[id$=_controlName]" instead of "#controlName" - this is involves a small search and is looking for a control that ends with the unique name - that way the start is irrelevant