Working with Server Controls with JQuery

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.

<title>ASP.NET and JQuery</title>

type="text/javascript"></script>

The interesting part of the example all occurs in the document ready script block, also contained in the head of the document.

$(document).ready(function(){

$('#<%=lblInstructions.ClientID%>').text('Enter User ID and Password to

$('#<%=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.

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.