Updating ASP.NET dropdown datasource from jQuery

Question

Hi,

I want to update my dropdown list datasource (get the values from the database again) but i want to do that from jQuery, there i insert/update/delete records from that same database table.

This is my dropdown list

<asp:DropDownList ID="ddl" runat="server" 
    AppendDataBoundItems="True" 
    DataSourceID="ShortCodeDataSource" 
    DataTextField="ShortcodeId" 
    DataValueField="ShortcodeId">
    <asp:ListItem>Select one...</asp:ListItem>
</asp:DropDownList>  

<asp:ObjectDataSource ID="ShortCodeDataSource" runat="server" 
    SelectMethod="GetAllShortcodes" 
    TypeName="Sod.Iris.Service.ShortcodeService">
</asp:ObjectDataSource>

Answer 1

You need a ScriptManager with EnablePageMethods = true

Then you need a method in your page's codebehind that is decorated with [WebMethod]. That method will be responsible for the call to the database

[WebMethod]
public string GetNewData()
{
    // Get Data
    // maybe serialize and return
}

Then your jQuery needs to looks something like this:

$.ajax({
  type: "POST",
  url: "MyPage.aspx/GetNewData",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data, msg) {
    // Do something with data
  }
});

The success callback will need to process the returned data and manually populate the control's drop down list. The other option would be to get that serialized data from a Web Service (asmx). It would function much the same.

Hope that helps!

Answer 2

Also, beside code that a432511 posted, you can use UpdatePanel approach. Put your dropdown in a UpdatePanel and then just call refresh from jquery. On this link you have example how to do this:

http://encosia.com/2007/07/13/easily-refresh-an-updatepanel-using-javascript/

cheers