AJAX in .NET

ajax.vb

'first bind the ajax function to the dom object
ddlInstitution.Attributes.Add("onchange", "return abc()")

 ' This ajax call gets a drop down list and appends it to a dropdown on the mark up side
 '<WebMethod()> set call a web service in the file code behind, note a webservice page does not really work
 'its best to call the web method in the same page in which the AJAX resides
 ' <ScriptMethod(UseHttpGet:=False, ResponseFormat:=ResponseFormat.Json)> _ dictates if the web method accepts 
 'a HTTP 'GET' or 'POST' request
 ' it also determines the return type (JSON or XML) which is declared in the AJAX
 
    <WebMethod()>
     <ScriptMethod(UseHttpGet:=False, ResponseFormat:=ResponseFormat.Json)> _
    Public Shared Function BindDatatoDropdown() As ddDetails()
        Dim dt As New DataTable()
        Dim details As New List(Of ddDetails)()

        Using con As New SqlConnection(ConfigurationManager.ConnectionStrings("CRTCConnectionString").ConnectionString)
            Using cmd As New SqlCommand("SELECT dataText FROM dSchool", con)
                con.Open()
                Dim da As New SqlDataAdapter(cmd)
                da.Fill(dt)
                For Each dtrow As DataRow In dt.Rows
                    Dim value As New ddDetails()
                    value.ddValue = dtrow("dataText").ToString()
                    value.ddName = dtrow("dataText").ToString()
                    details.Add(value)
                Next
            End Using
        End Using
        Return details.ToArray()
    End Function
    Public Class ddDetails
        Public Property ddValue() As String
            Get
                Return dd_value
            End Get
            Set(ByVal value As String)
                dd_value = value
            End Set
        End Property
        Private dd_value As String
        Public Property ddName() As String
            Get
                Return dd_Name
            End Get
            Set(ByVal value As String)
                dd_Name = value
            End Set
        End Property
        Private dd_Name As String
    End Class
End Class

'---------------------------------------------------------------------------------------------------------------------

'The AJAX on the markup side

<script type="text/javascript">
    function abc() {
       
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "applicantInfo.aspx/BindDatatoDropdown",
                data: "{}",
                dataType: "json",
                success: function (response) {
                    var Dropdown = $('#<%=ddSchool.ClientID%>');
                    $.each(response.d, function (index, value) {
                        Dropdown.append($("<option></option>").val(value.ddValue).html(value.ddName));
                    });
                },
                error: function (xhr, ajaxOptions, thrownError) {
                'these xhr object gives us verbose metadata about an ajax error
                    alert("xhr.responseText= " + xhr.responseText); 
                    alert("xhr.responseStatus= " + xhr.responseStatus);
                    alert("xhr.readyState" + xhr.readyState);
                    alert("thrownError= " + thrownError);
                    
                }
            });
    }
    
    'the drop down that calls the 'abc()' Ajax function
    <asp:DropDownList ID="ddlInstitution" CssClass="ddlNormal" DataTextField ="dataText" DataValueField ="dataValue" AutoPostBack ="true" runat="server" />
</script>

This was a very difficult piece of code to get right. I had to patch together several research sources to get this functionality to work.