Question

我正在尝试在ASP.Net中使用jQuery使用AJAX Cascading DropDownList。但是当我选择第一个下拉列表（ddl_il）时，我无法使用jquery到达第二个Dropdownlist，我得到的错误为null我的jquery代码问题是什么？我怎么解决呢？

enter image description here

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#loaderGif1").hide(); 
        $("#loaderGif2").hide();

        $("#ddl_ilce").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").html("<option value=''>Önce İlçe Seçiniz</option>");

        $("#ddl_il").change(function() {
            ilChange();
        })

        $("#ddl_ilce").change(function() {
            ilceChange();
        })
    });

    function ilChange() {
        $("#loaderGif1").show();
        $("#ddl_ilce").attr("disabled", "true").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");

        var ilID = $("#ddl_il").val();

        var pagePath = window.location.pathname;



        $.ajax({
            type: "POST", //GET veya POST
            url: "Default.aspx/ilChange",
            contentType: "application/json; charset=utf-8",
            data: '{ilID:'+ilID+'}', 
            dataType: "json",
            success: onSucceeded1, 
            error: onFailed 
        });
        return false;
    }

    //istek başarılı olduğunda çalışacak fonksiyon
    function onSucceeded1(result) {
        $("#loaderGif1").hide();
        $("#ddl_ilce").removeAttr("disabled").html(result.d);

        $("#ddl_semt").removeAttr("disabled");
    }

    //istek hatalı olduğunda çalışacak fonksiyon
    function onFailed(result) {
        alert(result.d);
    }

    function ilceChange() {
        $("#loaderGif2").show();
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        var ilceID = $("#ddl_ilce").val();
        var pagePath = window.location.pathname;

        $.ajax({
            type: "POST",
            url: "Default.aspx/ilceChange",
            contentType: "application/json; charset=utf-8",
            data: '{ilceID:' + ilceID + '}',
            dataType: "json",
            success: onSucceeded2,
            error: onFailed
        });
        return false;
    }

    function onSucceeded2(result) {
        $("#loaderGif2").hide();
        $("#ddl_semt").removeAttr("disabled").html(result.d);
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <table>
            <tr>
                <td>
                    il</td>
                <td>
                    <asp:DropDownList ID="ddl_il" runat="server" >
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    ilçe</td>
                <td>
                    <asp:DropDownList ID="ddl_ilce" runat="server" >
                    </asp:DropDownList>
                    <img id="loaderGif1" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
            <tr>
                <td>
                    semt</td>
                <td>
                    <asp:DropDownList ID="ddl_semt" runat="server">
                    </asp:DropDownList>
                    <img id="loaderGif2" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>

Default.aspx.cs代码隐藏

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page 
{
    fonksiyon system = new fonksiyon();
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection baglantim = new SqlConnection("Data Source=Hkadir;Initial Catalog=il-ilce-Semt;Integrated Security=True");
        DataTable dataTableIl = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();

        baglantim.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from iller", baglantim);

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableIl);

            ddl_il.DataSource = dataTableIl;
            ddl_il.DataTextField = "Ad";
            ddl_il.DataValueField = "IlID";
            ddl_il.DataBind();
            ListItem li = new ListItem("İl Seçiniz","");
            ddl_il.Items.Insert(0, li);
        }
        finally
        {
            baglantim.Close();
        }
    }


    public static string ilChange(string ilID)
    {
        System.Threading.Thread.Sleep(2000);
        SqlConnection baglantim = new SqlConnection("Data Source=Hkadir;Initial Catalog=il-ilce-Semt;Integrated Security=True");
        DataTable dataTableIlce = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();
        string result="";

        baglantim.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from ilceler where IlID=@IlID", baglantim);

            sqlCommand.Parameters.Add("IlID", SqlDbType.NVarChar);
            sqlCommand.Parameters["IlID"].Value = ilID;

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableIlce);

            result += "<option value=''>İlçe Seçiniz</option>";
            foreach (DataRow dataRow in dataTableIlce.Rows)
            {
                result += "<option value='" + dataRow["IlceId"].ToString() + "'>" + dataRow["Ad"].ToString() + "</option>";
            }
            return result;
        }
        catch(Exception e)
        {
            return (e.ToString());
        }
        finally
        {
            baglantim.Close();
        }
    }


    public static string ilceChange(string ilceID)
    {
        System.Threading.Thread.Sleep(2000);
        SqlConnection baglantim = new SqlConnection("Data Source=Hkadir;Initial Catalog=il-ilce-Semt;Integrated Security=True");
        DataTable dataTableSemt = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();
        string result = "";

        baglantim.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from semtler where IlceID=@IlceID", baglantim);

            sqlCommand.Parameters.Add("IlceID", SqlDbType.NVarChar);
            sqlCommand.Parameters["IlceID"].Value = ilceID;

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableSemt);

            result += "<option value=''>Semt Seçiniz</option>";
            foreach (DataRow dataRow in dataTableSemt.Rows)
            {
                result += "<option value='" + dataRow["SemtId"].ToString() + "'>" + dataRow["Ad"].ToString() + "</option>";
            }
            return result;
        }
        catch (Exception e)
        {
            return (e.ToString());
        }
        finally
        {
            baglantim.Close();
        }
    }
}

数据库：

enter image description here

Answer 1

要使用jQuery直接调用ASP.NET AJAX页面方法，您需要添加WebMethod属性：

[WebMethod]
public static string ilChange(string ilID)
{
     ///
}

Answer 2

查看了您的所有代码后：尝试将此行$("#ddl_ilce").removeAttr("disabled").html(result.d);更改为$("#ddl_ilce").removeAttr("disabled").Append(result);，将$("#ddl_semt").removeAttr("disabled").Append(result);更改为$("#ddl_semt").removeAttr("disabled").html(result);，同时修改功能onsucceeded＆amp; ; onsucceded2。我认为这可能是错误。

JQUERY AJAX多级联下拉列表选择不加载问题

2 个答案: