vb.net - AJAX を使用してドロップダウンを動的に埋める VB.Net JQuery

Question

別のドロップダウンで値が選択されているときに、AJAX 呼び出しを行ってドロップダウンを埋めようとしています。現在、SyntaxError: Invalid Character エラーが発生していますが、「dataType: json」を削除すると、HTML コードのような混乱が発生します。ドロップダウンは、値とテキストのペアを使用してバインドする必要があります。これは、ドロップダウンに関連する私の ASPX コードです。

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master"      CodeBehind="Request.aspx.vb" Inherits="NDBEDP.Request" MaintainScrollPositionOnPostback="true" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $('.entityDrop').live('change', function (event) {
            loadStateDrop()
        });

        var loadStateDrop = function () {
            var data = "{'entity':'"+ $('#<%=ddlEntity.ClientID%> option:selected').val()+"'}"
            alert("before ajax(), val: " + $('#<%=ddlEntity.ClientID%> option:selected').val());
            $.ajax({
                type: "POST",
                url: "Request.aspx/loadStates",
                datatype: "JSON",
                data: data,
                contentType: "application/json; charset=utf-8",
                success: function (list) {
                    alert(list);
                    $('.stateDrop').empty()
                    $.each(list, function (element) {
                        var optn = document.createElement("OPTION");
                        optn.text = element.StateAbbr;
                        optn.value = element.StateID;
                        $('.stateDrop').append(optn);
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Error updating dropdowns: " + errorThrown);
                }
            });
        };
    </script>
    <asp:panel ID="userInput" runat="server">
        <asp:panel id="userInformation" runat="server" BorderStyle="None" style="margin-bottom: 0px">
            <asp:DropdownList cssClass="entryField, entityDrop" ID="ddlEntity" runat="server" Width="95%"></asp:DropdownList>
            <asp:DropDownList cssClass="entryField, stateDrop" ID="ddlExpenseState" runat="server" Width="18%"></asp:DropDownList>
            <asp:DropDownList ID="ddlExpensePeriod" runat="server" cssClass="entryField" Width="50%"></asp:DropDownList>
            <asp:DropDownList ID="ddlExpenseYear" runat="server" cssClass="entryField" Width="20%"></asp:DropDownList>
        </asp:panel>
    </asp:panel>
</asp:Content>

これは私のVB.Netコードです:

Imports NDBEDP.StringExtensions
Imports NDBEDP.DropdownExtensions
Imports NDBEDP.GridViewExtensions
Imports System.IO
Imports System.Web.Services
Imports System.Web.Script.Services
Imports System.Web.Script.Serialization

Public Class Request
    Inherits System.Web.UI.Page

    <WebMethod()> _
    Public Shared Function loadStates(entity As Integer) As Dictionary(Of String, Integer)
        Dim expenseStates As DataSet = (New RequestBus).getExpenseStates(entity)
        Dim returnStates As New Dictionary(Of String, Integer)
        For i As Integer = 0 To expenseStates.Tables(0).Rows.Count - 1
            returnStates.Add(expenseStates.Tables(0).Rows(i).Item("StateAbbr"), expenseStates.Tables(0).Rows(i).Item("StateID"))
        Next
        Return returnStates
    End Function
End Class

他に役立つコードが必要な場合はお知らせください。

WebServices を介してこれを実行しようとしましたが、それも機能しませんでした。独自のコードを追加する前に、WebService を含めて適切に接続するとすぐに、3 行目、1 列目の Web サービス script1002 の構文エラーで JavaScript の重大なエラーが発生しました。私は WebService でこれを行うことを好みますが、仕事に取り掛かることができるものなら何でも受け入れます。

ここで私が間違っていることを誰かが知っていますか?

編集：現在のコードに合わせて変更