Question

I am having trouble getting the selected value in an asp:DropDownList. I am using AJAX and want to update the Default.aspx page dynamically. This is working, however, the value being retrieved from the DropDownList is not being passed through correctly to the ASP function.

The ASP function is returning something, just not a string. Am I doing this correctly?

Default.aspx:

<script type="text/javascript">

  // Calls an ASP function, gets user surname
  function GetData(){
      var response = UserForm.GetData();
      alert (response); // returns [object object]
      document.getElementById("surnameLabel").innerHTM = response;
  }

</script>

<asp:SqlDataSource 
  id="Users" 
  runat="server" 
  connectionstring="<%$ ConnectionStrings:ConnectionString %>" 
  selectcommand="select username, userid from users"  
>
</asp:SqlDataSource>

<asp:DropDownList 
  id="UserList"
  name="UserList"
  runat="server"
  DataSourceID="Users"
  DataTextField="username" 
  DataValueField="userid" 
>
</asp:DropDownList>

<input type="button" onclick="GetData();" value="Get Surname" />

<asp:Label name="surnameLabel" id="surnameLabel" Text="No user selected"></asp:Label>

Default.aspx.cs:

public partial class UserForm : System.Web.UI.Page 
{

  protected void Page_Load(object sender, EventArgs e)
  {
    Ajax.Utility.RegisterTypeForAjax(typeof(AwardsForm));
    if (!this.IsPostBack) { }
  }   

  // This function is called from the javascript function and looks up the users surname
  [Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
  public string GetData()
  {
      string userid = UserList.SelectedValue.ToString(); // this value keeps on equalling null

      // Do some SQL using this ID to look up user surname

      return Surname;
  }
}

Answer 1

Based on your code, it appears that you are using Ajax.Net. It has been a long time since I used this library but I recall that either it did not support posting back the control values or that you had to invoke another setting or attribute somewhere to make it work.

Regardless, I think that you would be better off changing the call to include the selected value in the method call.

You should be able to do something like:

var ddList = document.getElementById("UserList");
var response = UserForm.GetData(ddList.options[ddList.selectedIndex].value);

Update

Due to the age and apparent staleness of Ajax.net (last update in codeplex was in 2006), I would recommend using a static WebMethod in your page for providing this functionality.

Here are the changes that you should make:

1) Import the System.Web.Services namespace

using System.Web.Services;

2) Convert your GetData method to a static method with the userid as a parameter and decorated with the WebMethod attribute:

  [WebMethod]
  public static string GetData(string sUserId)
  {
      // Do some SQL using this ID to look up user surname

      return Surname;
  }

3) Add a scriptmanager to your page, or change it to be as follows if it already exists:

    <asp:ScriptManager ID="ScriptManager1" 
        runat="server" EnablePageMethods="true">
    </asp:ScriptManager>

4) Change your javascript to call this new method with the new parameter:

var ddList = document.getElementById("UserList");
var response = PageMethods.GetData(ddList.options[ddList.selectedIndex].value);

There is a good example of this in this MSDN documentation.

Note that some examples, including the one in the above link, have a variation on the script manager declaration and the javascript calls, but I don’t have any experience with those.