This comes up a lot for me when I need to juggle client side and server side values back and forth. In this example, I will create and set the values on the client side using javascript and then demonstrate how to read those values on the server side using ASP.NET. To do this we need to follow these steps:
- Create a HTML hidden field on the page
- Set the value(s) using javascript
- Read those values on the server side
The first thing I did was create a repeater control and within the ItemTemplate place a checkbox which contains the value we’re interested in – in this case id_individual. Notice that the checkboxes have a class value of “DirectorName” which we’ll use in our jQuery next. Next to the checkbox we list the person’s name in label controls.
<asp:Repeater id="rptDirectors" DataSourceID="dsDirectors" Runat="Server">
<ItemTemplate>
<input type="checkbox" value='<%# Container.DataItem("id_individual") %>' id="chkDirectorName" name="chkDirectorName" runat="Server" class="DirectorName" checked />
<asp:Label ID="Label1" Text='<%# Eval("DirFName") %>' Runat="Server"/> <asp:Label ID="Label2" Text='<%# Eval("DirLName") %>' Runat="Server"/><br />
</ItemTemplate>
</asp:Repeater>
We also need our hidden client-side field which will hold our id_individual values. Notice that it has a runat=”server” property. This is what makes it accessible to both the client and server sides of this equation. We will also create a asp:Literal control which will show us the value on the server side after the value has been passed to the server side.
<input id="lblCheckedDirs" name="lblCheckedDirs" type="Hidden" runat="server" visible="true" />
<asp:Literal ID="lblServerSideValue" runat="server" Visible="true" />
Next, we will create a javascript function named getDirectorIDs to get the value of each checked checkbox inside of the repeater control rptDirectors. Using the jQuery library makes it very easy to iterate over the checkboxes to get these values. We place the comma delimited values into a variable named result. We then place the value of result into the hidden control, lblCheckedDirs.
<script language="Javascript" type="text/javascript">
// this gets all of the director id_individual values
$(document).ready(function getDirectorIDs() {
var result = "";
$(".DirectorName:checked").each(function() {
result = result + $(this).val() + ",";
});
// place the selected id_individual values in the label control lblCheckedDirs
document.getElementById('lblCheckedDirs').value = result;
});
</script>
Next, our submit button calls both the client side function getDirectorIDs() as well as our server side function btnContinue_Click. getDirectorIDs populates the client-side hidden control, lblCheckedDirs, and btnContinue_Click populates the server literal control, lblServerSideValue.
<asp:Button ID="btnContinue" runat="server" Text="Continue >>" OnClientClick="getDirectorIDs();" onclick="btnContinue_Click" />
<script runat="server">
Protected Sub btnContinue_Click(ByVal sender As Object, ByVal e As System.EventArgs)
lblServerSideValue.Text = lblCheckedDirs.Value
End Sub
</script>
Here is the source code for the whole page.