如何使用Ajax使用数据库ASP .NET C#从另一个下拉列表填充下拉列表

时间:2019-01-23 03:53:59

标签: c# ajax drop-down-menu

我尝试用数据库填充“类别”下拉列表中的“类型”下拉列表。但是成功函数会返回整个HTML页面,而不仅仅是dropdownlist选项。

我的js脚本的这一行出现错误:

 1. <span> becomes <s<span class='_p-filter-matched'>p</span>an.

 2. F-BAPP becomes f-BApp. 

Error

Error

Error

下面是我的代码隐藏,HTML和JS中的代码。请帮忙。 PS:我没有使用MVC

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

    [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);
      }
    });
  });
});   

1 个答案:

答案 0 :(得分:0)

   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的成功方法中,您必须像这样...在下拉列表中添加项