个人中心
gpt4 book ai didi

c# - JQUERY AJAX多级联下拉列表select不加载问题

转载 作者：行者123 更新时间：2023-11-29 19:40:50 25 4
gpt4 key购买 nike

我正在尝试在 ASP.Net 中使用 jQuery 使用 AJAX 级联 DropDownList。但是，当我选择第一个下拉列表 (ddl_il) 时，我无法使用 jquery 到达第二个下拉列表，我得到的错误是 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

最佳答案

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

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

关于c# - JQUERY AJAX多级联下拉列表select不加载问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23118555/

25 4 0
文章推荐： android - 禁用 Instant Run Android Studio 2.2 Preview 5
文章推荐： php - 如何防止 PHP 中的 SQL 注入(inject)？
文章推荐： php - 在 php 函数中使用参数似乎破坏了我的 mysql 查询
文章推荐： javascript - 使用 javascript/AJAX 在 mysql 表中插入数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com