Как использовать ajax для заполнения выпадающего списка из другого выпадающего списка с базой данных ASP .NET C #

Question

Я пытаюсь заполнить выпадающий список Тип из выпадающего списка Категория базой данных. Но функция успеха возвращает целую HTML-страницу в качестве результата, а не только параметры выпадающего списка.

Ошибка в этой строке в моем скрипте js:

var jsondata=JSON.parse(result.d);

Ниже приведен мой код из Code Behind, HTML и JS. Пожалуйста помоги. PS: я не использую MVC

    [WebMethod]
    public static string GetType(string category)
    {            
        List<DocumentTypeModel> options = DocumentType.GetType(category);
        var types = options.Select(item => new { item.CODE, item.TYPE }).ToList();
        return JsonConvert.SerializeObject(types);
    }

public class DocumentType
{
    public static List<DocumentTypeModel> GetType(string category)
    {
        DataTable dt = MsSqlHelper.GetDataTable(string.Format("SELECT '-- Select Type --' AS [TYPE], '' AS CODE, 0 AS ID UNION SELECT [TYPE], CODE, ID FROM DOCUMENTTYPE WHERE CATEGORY = '{0}' ORDER BY ID", category), 2);
        return dt.AsEnumerable()
            .Select(x => new DocumentTypeModel()
            {
                TYPE = x.Field<string>("TYPE"),
                CODE = x.Field<string>("CODE")
            }).ToList();
    }
}

public class DocumentTypeModel
{
    public int ID { get; set; }
    public string CATEGORY { get; set; }
    public string TYPE { get; set; }
    public string CODE { get; set; }
}

$(document).ready(function () {
  $('#<% =cboCategory.ClientID %>').change(function () {
  var selected = $('#<% =cboCategory.ClientID %>').val();
    $.ajax({
    url:"request.aspx/GetType",
      type:"POST",
      data:'{"category":'+selected+'}',           
      success: function (result) {
        var jsondata=JSON.parse(result.d);
        var varOptions="";
        for(var i=0;i<jsondata.length;i++){
          varOptions+='<option value="'+jsondata[i].Value+'">'+jsondata[i].Text+'</option>';
        }
        $('#<%= cboType.ClientID %>').html(varOptions);
      }
    });
  });
});   

<asp:DropDownList ID="cboCategory" runat="server">
  <asp:ListItem Text="-- Select Category --" Value="0" />
  <asp:ListItem Text="QMS Document" Value="QMS Document" />
  <asp:ListItem Text="Internal - Technical Document" Value="Internal - Technical Document" />
  <asp:ListItem Text="External - Technical Document" Value="External - Technical Document" />
</asp:DropDownList>
                                    
<asp:DropDownList ID="cboType" runat="server"></asp:DropDownList>

<script src="../Scripts/jquery-3.3.1.min.js"></script>

Answer 1

   success: function (data) {
                    var jsondata = JSON.parse(data.d);
                    $('#<%=ddlRegion.ClientID%>').empty();
                    $('#<%=ddlRegion.ClientID%>').append($("<option></option>").val("0").html("Choose Now"));
                    $.each(jsondata, function (key, value) {
                        $('#<%=ddlRegion.ClientID%>').append($("<option></option>").val(value.RegionID).html(value.Region));
                    });
                },

Вы должны добавить элементы в раскрывающемся списке, как это ... в методе успеха ajax