Meditation and Mindfulness for Software / IT Professionals. Conducted by Bipin Joshi in Thane. Read more...

Using AJAX with ASP

Using AJAX with ASP.NET - Retrieving values on the server  (Part 3)

Introduction

In the Part 2 of this series we saw how to deal with DataSet and populate controls such as ListBox. Since we are populating the control values from the client side script; they will not be accessible on the server side automatically. In this part we will elaborate on how to access these AJAX populated control values on the server.

Simple Example

We are going to use the same web forms (DataConsumer.aspx and DataSupplier.aspx) of the previous example. We will add a Button and a Label at the bottom of the DataConsumer.aspx. When you click the Button the Label should display the selected Order ID from the ListBox.

Normally, to achieve above requirement you would have written something like this:

Private Sub Button1_Click(sender As Object, 
e As EventArgs) Handles Button1.Click
Label3.Text = "Your selected Order ID :" & ListBox1.SelectedValue
End Sub

If you try doing the same for our ListBox, you will get an error - "Object reference not set to an instance of object." We have populated the ListBox from client side JavaScript code. These values are not stored in the page ViewState. As a result they are not available on the server in the normal way.

There are two ways to resolve the issue:

  • Use Request.Form collection directly on the server and get the value
  • Use hidden form field

Let's see each method.

Using Request.Form collection

You can access all the posted data via Request.Form collection. Classic ASP developers will be familiar with this collection. This collection allows you to specify the key (control name) and access the corresponding value (control value). Following code will make its use clear:

Private Sub Button1_Click(sender As Object, 
e As EventArgs) Handles Button1.Click
Label3.Text = "Your selected Order ID :" & Request.Form("ListBox1")
End Sub

Out ListBox ID is ListBox1 and after post back its value can be accessed as Request.Form("ListBox1").

Using Hidden Field

You can also achieve the same effect using a hidden form field. You need to add a Hidden HTML element from the HTML t ab of the toolbox. Right click on it and select "Run as server control". This will add runat="server" attribute to the HTML element and we will be able to access it on the server. Now add following line at the end of Page_Load event handler.

Button1.Attributes.Add("OnClick", "return SetValue();")

Here, we are attaching a client side function called SetValue() to the OnClick client side event of the Button control. The SetValue() function looks as follows:

function SetValue()
{
var selectedvalue=document.getElementById("ListBox1").value;
document.getElementById("Hidden1").value=selectedvalue;
return true;
}

This function simply retrieves the selected value from the ListBox and assign it to the hidden form field. You can access this value on the server as shown below:

Private Sub Button1_Click(sender As Object, 
e As EventArgs) Handles Button1.Click
Label3.Text = "Your selected Order ID :" & Hidden1.Value
End Sub

Here, we simple used Value property of hidden form field to retrieve the value we set via javascript.

Code Download

The complete source code of above sample is available for download along with the article. Please see top of the article for download link.

Summary

With AJAX you populate controls via client side JavaScript. These values are not persisted in the control's ViewState. As a result you can retrieve it back on the server in normal way. You can either use Request.Form collection or hidden form field to grab this value.

 




Bipin Joshi is a software consultant, an author and a yoga mentor having 21+ years of experience in software development. He conducts online courses in ASP.NET MVC / Core, jQuery, and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced Yoga way of life he also teaches Meditation to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 02 Oct 2005



Tags : ASP.NET AJAX JavaScript