ClientId rendering wrong from within OnClientClick

[John Kotuby]

Hi all,
I'm having a bit of a problem getting the ClientId of some controls to
render as expected in the resulting HTML.

From within the onclick event of an input control of type button, the
imbedded VB code snippets using ClientId render properly as shown below:

Page Source code from input type="button":
onclick="SubmitSearch('<%= btnSearch.ClientID %>','<%=lstMay.ClientId
%>','<%=lstMust.ClientId %>','<%=lstExc.ClientId %>')"

Rendered HTML:
onclick="SubmitSearch('ctl00_Content1_SearchTool1_btnSearch','ctl00_Content1_SearchTool1_lstMay','ctl00_Content1_SearchTool1_lstMust','ctl00_Content1_SearchTool1_lstExc')"


But when I try the same technique from within the OnClientClick event of an
asp:Button, the VB code snippets are rendered literally as below.

Page Source Code from asp:Button:
OnClientClick="return SaveSearch('Y','<%=lstMay.ClientId
%>','<%=lstMust.ClientId %>','<%=lstExc.ClientId %>')"

Rendered HTML:
<input type="submit" name="ctl00$Content1$SearchTool1$btnSaveSearch"
value="Save Search " onclick="return SaveSearch('N','&lt;%=lstMay.ClientId
%>','&lt;%=lstMust.ClientId %>','&lt;%=lstExc.ClientId %>')

I use the syntax "return SaveSearch(...)" for the asp Button in case
client-side validation within the JavaScript function fails and I don't want
the page to post.

Note that these Buttons are contained within a User Control placed on the
page, but I don't think that should make any difference as the input button
code from the same User Control renders properly.

I must be missing a basic concept of .NET 101 here but I'm not sure what it
is.

Thanks for any help with this.

 

[George]

Your first example do not have runat=server. And second has. That is the
difference.
When you have a runat = server then object becomes a Server control and all
assignments happen at run time

So when you wrote .(in a server control)
OnClientClick="return
SaveSearch('Y','<%=lstMay.ClientId%>','<%=lstMust.ClientId
%>','<%=lstExc.ClientId %>')"

It's the same as if you worte in your C# code (or VB)

string s = "return
SaveSearch('Y','<%=lstMay.ClientId%>','<%=lstMust.ClientId
%>','<%=lstExc.ClientId %>')"
It's just a string and lstMay.ClientID is just a part of the string and not
a property.


I hope you understand now why when this string is outputed to browser it
becomes not what you expect it to be.

You have 2 options.
1. Assign OnClientClick in code behind.
btnMyButton.OnClientClick = "return SaveSearch('Y','" + lstMay.ClientId +
"','" .......

2. Use DataBinding
OnClientClick=<%# "return SaveSearch('Y','" + lstMay.ClientId " + "','" +
lstMust.ClientId + "','" + lstExc.ClientId "')"%>
DataBinding line will be executed in runtime as it's a line in the code
behind. (Pay attention that i have # sign).

George.

 

[John Kotuby]

Thank you George,
I will assign the ClientId values in the code-behind when using the ASP
server Buttons. I'm surprised I haven't run into this situation before.
Maybe it's because I am now trying to take direct Control references out of
my JavaScript functions and placing them in the function Call so I can then
move the functions into a re-usable JS library.

I find your 2nd example quite interesing as I usually associate DataBinding
with displaying the contents of DataSets or DataTables. Sometimes the
nomenclature clouds the understanding of the concept.

Have a good day...

 

[George]

I know what you talking about. Changed IDs are pain when you work with
Javascript.

Me personally using third option since I do not like both solutions I
offered to you.
I should have mentioned it but I was focused on solving your problem and not
work around it.

Anyway here it goes.
In control just put this
OnClientClick="return SaveSearch1();"

And then somewhere
<script>
function SaveSearch1()
{
SaveSearch('Y','<%=lstMay.ClientId%>','<%=lstMust.ClientId%>','<%=lstExc.ClientId
%>');
}
</script>

That way you do not need to clutter your code behind with "non-related"
staff.

PS: If you do heavy Javascript on your site i would advice to invest some
time into learning JQuery.
I did some time ago and really happy that i did and now all my Javascript
development is using JQuery. Plus i had gained so much Javascript knowledge
from it.

George.

 

[John Kotuby]

Thanks for showing me the 3rd option.
Yes, my site does use much JavaScript.
I have been meaning to study JQuery but so far haven't found the time, as I
seem to be constantly learning new concepts just to keep pace with changes
in development methods.

Your endorsement of the benefits of JQuery now moves that education closer
to the top of the list.