Accessing HTML-Controls...

[brucegonewild]

Hi there,
Firstly, I am quite clear about the differences between the Server-side and client-side controls and how the code in the server and the one on the client-side are totally different

Now as for my question:
I have 3 web-user controls, call them: uc1, uc2, uc3.

I have a main page to contain these webuser-controls, call it, Main.

There's a master page that makes a RunStartupScript("Save") call and my Main, has a JavaScript function that calls the "accessors" in uc1, uc2 and uc3 to get their form-control values. Here's how I do this:

//this is a JavaScript function that Master calls through a "RunStartupScript" function-call:
function Save()
{ 
  var val1 = "<%= Get_uc1_value1() %>" 
  var val2 = "<%= Get_uc1_value2() %>"
}

NOTE: Get_ucX_value_Y() is a server-side function that returns something like: [i]this.ctrlname.value()[/i]

Here's the problem:
There are certain controls in uc1, uc2 and uc3 which are HTML-controls and I can't use "Runat='server'" on any of those html-controls. So given that I can interact between my JavaScript and Code-behind through <%= %>, I need to know if there's a way to go the other way, and get my Client-side controls in code behind.

Thanks in advance for your help!

 

[jbenson001]

and I can't use "Runat='server'" on any of those html-controls

Why not?

 

[brucegonewild]

because I don't handle the HTML-Control events on the code-behind... they're being handled by the JavaScript:

For Example, I have a "Check Box" as my html control whose events are being handled by my javascript. However at the end of the day, I need to know its "checked" status to save it to my Database...

 

[jbenson001]

You can still access an HTML control via JavaScript if you include a runat = "server" tag on that control.

 

[brucegonewild]

I just tried it... but no dice:

The only thing I changed on one of thse HTML-controls is:
runat='server'

Then my JavaScript that accesses the html-control failed:
document.getElementById('ctrlID')

Are you suggesting I should use
<%= ctrlID.ClientID %>

 

[ca8msm]

Yes, that's an option.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[brucegonewild]

Yes, but I'm trying to handle the html-control through my JavaScript not <%= %> which is in fact code-behind... I'm starting to think an ajax call is the only option... but I'm trying to avoid that due to some internal-politics!

 

[ca8msm]

You could create all the javascript in the code behind, and register on the page load event by using the CLientScript.RegisterClientScriptBlock method.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[brucegonewild]

right... i read that everywhere...
Unfortunately I don't think this method really helps me though. I mean even if I do register the javascript at run time, I would still need to handle the control-events using javaScript and access users-input in code-behind. Handling the events through javaScript is no problem. Accessing users inputs in these html-controls from code-behind is the real pain in the lower-end.

For now, what I've done is:, I use an Ajax call, to store user's input in a session variable. I do hate doing this, but I haven't seen anyother suggestions so far.

 

[jmeckley]

if you need the client side controls on the server, why not convert the client controls to server controls?

if you need access to the controls on the client, use either 'this' or Control.ClientID to reference the objects.

Jason Meckley
Programmer
Specialty Bakers, Inc.

 

[brucegonewild]

Yes, control.ClientID definitly works; however, once the control is registered to be a server-control, then I can't assign a JavaScript event handler to the control:

Example:

<script>
function JavaHandler()
{
   document.getElementById('<% GetServerCtrlCLientID() %>').style.display = 'none';
}
</script>

<input type='Checkbox' id='chk' onclick='JavaHandler()' />

As you can see, I have a checkbox that needs to be a client-side control (so my javascript function can handle its click-event). As you can see, I am accessing my server-control in the javascript function no problem.

So far so good?

Ok, here's the problem:
When saving the data to my database, I need to know if "chk" that was defined on the client side is checked or not. Currently, I have assigned an ajax-function call, that sets my session variable to true or false based on the check-status of chk. However, I need to know if there's a way to access the check-status of my chk on the server-side (just as I'm about to save my data)

 

[ca8msm]

I really don't understand the problem here. If you want to access a control from the server, add runat="server" to it. If you need to access the same control from javascript, make sure you refer to it's id by using the ClientId of the control.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[jbenson001]

Mark is absolutely correct. Exactly what I said in a previous post. Not sure what exactly the problem is at this point.

 

[brucegonewild]

Guys, you're looking at this to be a very simple problem... It's a bit trickier than a simple access from EITHER the client-side OR the server-side.

The problem is I need to access the control both from the client-side (for fast-javaScript interactivity) and from the server-side (so I can save the check-status of the control in the database).

As I clearly demonstrated in my prev-example, I am accessing "chk" on the client side, right?

Ok, I also have to save the check-status of chk in my database. So as you can see, it is tricky. Because saving data to my database is done through a server-function. Hopefully by this point you can clearly see how I need to access my control both on the server side and the client side.



cheers!

 

[ca8msm]

It's a bit trickier than a simple access from EITHER the client-side OR the server-side.

The problem is I need to access the control both from the client-side ... and from the server-side

It's not a tricky situation, and that's exactly what our suggestion would let you do.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]

 

[brucegonewild]

hmmm, well i'll be darned!

you see, you kep on mentioning to turn on the runat=server on my control... I kept on doing it and I kept on getting an error, thinking it's the javascript that can't access it!! well it wasn't... I had a couple of other functions accessing this same control and so I had to modify the
getElementById('chk') to getElementById("<%= chk.ClientID %>") in a couple of other places as well...


All is good now thanks


So to simplify here's the answer for the rest of googlers:

.ascx/.aspx:

<script>
function Handler_ClientSide()
{
   var myCtrl = document.getElementById("<%= serverCtrl.ClientID %>");

//do as you please with myCtrl now... it'll all be client-side => maximum-interactivity
}
</script>

<input type='checkbox' id='chk' runat='server' onclick="Handler_ClientSide()" />

in your code-behind you can access this control very easily:

 C#:
private void MyServerFunction()
{
  this.chk.checked = true;
}

vb.net:
private sub MyServerFunction()
 me.chk.checked = true;
end sub

cheers!