In my last post, I discussed how to set hidden fields in UserControls to ensure that the control is reusable. This post will expand on that, showing how to use hidden fields as a bridge to pass data between the client and server.
There are several cases where you'd want to have a client-side GUI control, let the user trigger it, do some client side activity first (validation, prompt, etc...), and then send the appropriate data from that control back to the server. For example:
- MessageBox - Get the value of the clicked button.
- Image Map - Get the value of the selected region.
- Dynamically generated links - Get the specific link that was selected.
The basic approach to do this is:
- Create a hidden field, runat=server, viewstate enabled (this is default) to store the client side value.
- In the CodeBehind of the UserControl, wrap that hidden field in a public property This is especially useful if there's any transformation on it, such as a default value if empty, or encoding/decoding. It also easily lets external objects, such as the hosting page or nested control, get the data because the hidden field should be protected.
- In that function, (1) set the hidden field to the value you need, and (2) submit the form.
For example, I created a UserControl with a client-side image map that returns the selected region to the server.
I first added the hidden field "HdnRegionId" (runat=server).
In the code-behind, I added the property:
Still in the code-behind, I also created a public instance variable strClientId to store the User Control's Client Id. This is set every time in the UC page load:
For review, here's the flow:
- Page_Load instantiates strClientId variable to hold the UserControl's ClientID.
- Aspx page is rendered, all the <%= strClientId %>"> store the actual UserControl id.
- Optional logic can be done in the Page_Load.
- The hidden field value is persisted in viewstate and is now accessible to other controls.