使用AJAX时如何调用下拉列表的子onchange？

Question

So, I know how to call a method onclick of a button using ajax, but I'd like to do the same when a user selects something new on a dropdownlist. I'll show code for what I've tried below:

<asp:UpdatePanel ID="pnlHelloWorld" runat="server">

      <ContentTemplate>

        <div style="height: auto; overflow: auto; max-height:750px; width:100%;">
          <asp:DropDownList ID="mydropdownlist" runat="server" Enabled="true" OnChange="changeMyTable"></asp:DropDownList>   
          <asp:Table ID="mytable" runat="server"></asp:Table>
        </div>

      </ContentTemplate>

</asp:UpdatePanel>

In the page's aspx.vb:

Private Sub changeMyTable()
'Add rows to table
end sub

The problem is that "changeMyTable" is undefined when i change the dropdownlist.

How can I do this?

Answer 1

You are using the OnChange event to call the code behind method from javascript. To access the code behind method you need to convert that method to the WebMethod . For that below is something you can try (Just an example)

     <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
     <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
     <asp:TextBox ID="txtMsg" runat="server"></asp:TextBox>

Javascript code -

   <script type="text/javascript">
    function greet(txtN, txtLastN, txtMsg){
     var ctrlN = document.getElementById(txtN);
     var ctrlLastN = document.getElementById(txtLastN);
     var fullName = ctrlN.value + '  ' + ctrlLastN.value;
     PageMethods.greetUser(fullName, greetSuccess, greetFailed, txtMsg);
   }
  function greetSuccess(res, txtMsg) {
    var ctrlTxtMsg = document.getElementById(txtMsg);
    ctrlTxtMsg.value = res;
   }
  function greetFailed(res, dst) {
    alert(res.get_message());
   }
 </script>

Code behind method -

   <System.Web.Services.WebMethod()> _
      Public Shared Function greetUser(ByVal fullName As String) As String
         Return "Welcome " & fullName & "!"
     End Function

Now you can call your javascript function greet from wherever you want and it will trigger the code behind method greetUser . More on this is available here .