Introduction
This article addresses working with server controls using JQuery. Accessing a
server control is straight forward from the code behind but if you want to
access the same server control from a script block it is not quite so obvious;
still, it is pretty simple to do. You will want to do this if you ever need to
either read a value from a server control or set a server control's value from
client side script.
Attached Project
The attached project contains a single example; it is a simple ASP.NET 4.5
website containing a single web form simulating a login form. There is no login
related code in the example but it does show how to read from or write to a
server control from client side JavaScript.
In the simple example, there is a single script block that executes on document
ready. In that code, two things happen: First, the instructions for the login
form are added to a label server control on document ready - this demonstrates
writing to a server control from the script block. Second, the form is
configured to display a personalized welcome message based upon the user name.
This example reads the user name keyed into the user name textbox, also a server
side control, whenever the user clicks the submit button - this of course
demonstrates reading from a server control from the script block.
Default.aspx
The default for contains a script reference to JQuery using the Microsoft
content delivery network. Aside from JQuery, there is a reference to a simple
CSS file used to provide some basic style to the page.
<head
runat="server">
<title>ASP.NET
and JQuery</title>
<script
src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.1.min.js"
type="text/javascript"></script>
<link
href="style.css"
rel="stylesheet"
/>
The interesting part of the example all occurs
in the document ready script block, also contained in the head of the document.
<script
type="text/javascript">
$(document).ready(function(){
$('#<%=lblInstructions.ClientID%>').text('Enter
User ID and Password to
Login');
$('#<%=btnSubmit.ClientID%>').click(function(){
alert('Welcome
'
+ $('#<%=txtUser.ClientID%>').val());
});
})
</script>
</head>
Inside document ready, the first
line obtains a reference to the label server control, "lblInstructions" and then
sets the control's text property to display the login instructions to the user.
In order to obtain this reference it is important to remember to request the
client ID, "lblInstructions.ClientID". If you leave off the client ID, you will
not obtain the reference and the label will not be set accordingly. You can test
this by running the web application, then removing the client ID and re-running
the web application. With the client ID used you will see the label set to
display the appropriate instructions. With client ID left off, you will instead
see a different set of instructions provided in the control.
![Instructions-set-with-the-Client-ID-property.jpg]()
Figure 1 - Instructions set with the Client ID property
![Instructions-set-without-the-Client ID-property.jpg]()
Figure 2 - Instructions set without the Client ID property
The alternate instructions, if you wondered, are set in the code behind file on
page load. If you were to open the page source with the page displayed in a
browser window, you would see that the label control is simply "lblInstructions"
but you still will not be able to obtain a reference to the control unless you
append the Client ID property to the control's name within code block
identifying that control. You can have a look at the code behind file to see
where the code is set in page load:
protected
void
Page_Load(object
sender,
EventArgs
e)
{
lblInstructions.Text =
"Set in page load";
}
The fact that this code is executed on page load does not interfere with
displaying the correct controls as document ready occurs after page load and
when it does, the incorrect instructions are merely overwritten and will never
be made visible to the end user. Anyway, that part of the example illustrates
obtaining a reference to the server control in client side script and then using
that reference to write a string into the label's text property.
The next line of code in document ready creates a click event handle for the
login (submit) button in client side JavaScript. The line obtains a reference to
the button server control and assigns a function to its click event. That event
handler obtains a reference to the user name text box, "txtUser" and captures
the text contained in that control and stuffs it into an alert box to provide a
personalized welcome into a fake authenticated user. As was true with the first
example, in order to acquire a valid reference to the control, the client ID
property must be used with the control. You can test this functionality by
running the web application, keying anything into the user name text box and
clicking the submit button.
That pretty much sums up the process and describes what is required to obtain a
reference to a server control, and to then operate on that reference. The same
approach applied to labels and text boxes works similarly on other controls -
drop downs lists, check boxes and check box lists, radio buttons, and so forth.