Question

I am working on a ASP.net application, where i need to select a value in aspx file from the following code:

<td align="right"> Signal </td>
    <td> <select id = "signal" name = "signal">
    <%
        SqlDataReader Dr = Signal(); 
        while (Dr.Read())
        {
            Response.Write("<option> " + Dr["SignalID"].ToString() + " </option>");
        }
        Dr.Close();
    %>
        </select>
    </td>

    <td align = "right"> Data </td>
    <td> <input type="textarea" id = "data"/> Data need on the basis of above selected data </td>

Where Signal() method is returning the some data. For example it returns :

2005, 2006, 2007

Raw code of the above data are:

<select>
 <option value="2005">Volvo</option>
 <option value="2006">Saab</option>
 <option value="2007">Mercedes</option>
</select>

But what i am facing a problem, is that i want this selected variable back to same aspx.cs file without submitting the form. So that i can show the data into the text area.

For example:

User open the some.aspx page, then a form will occur on the page. By default it shows 2005 and on the basis of that info text area will load.

When user will select 2006, and on the basis of that data text area loaded dynamically.

I know that we can do with the Ajax and Jquery, but i am not good enough to work with the Jquery and Ajax.

Answer 1

Solution 1: Use the DynamicPopulate control from the Microsoft AJAX Toolkit – very easy to implement

Solution 2: Use jQuery AJAX API as you’ve pointed out.

Either solution will require a WebMethod.

[System.Web.Services.WebMethod(BufferResponse=false)]
public string GetTextAreaData(int selectedIndex)
{
   //implementation code
}

Solution 1 is rediculously simple, I won’t even post an example. Just following the link above and you should be all set. But I will say this, read up on performance tweaks related to the ToolkitScriptManager, like setting it to release mode, combining scripts, etc..

The second solution is pretty easy too, but requires you to parse the results yourself (sort of). jQuery has come a long way from prior years and it’s not as scarey anymore.

Create an OnChange event handler (JS method) and attach it to your drop down list. Within the handler, call something like this: (note, this is untested code and it may not work with a simple copy/paste, but you get the idea).

function GetTextAreaData() { 
    var data = this.selectedIndex; // or whatever you want to send to the server
    var options = { 
        type: "POST", 
        url: "Default.aspx/GetTextAreaData", 
        data: "{selectedIndex:" + data + "}", 
        contentType: "application/json; charset=utf-8", 
        dataType: "json", 
        success: function(msg) { 
            $('#textAreaId').val(msg);
        } 
    }; 
    $.ajax(options); 
}