ASP：.NET Ajax函数在onchange事件后不起作用

Question

I want to show the value of the selected index of a dropdownlist by using an ajax function. It does not work. I try to debug it by using the console and i saw that error 500 (Internal Server Error) What is causing that problem ? The implementation is below

Ajax functions:

        function showDdlValue(ddl) {
        var value = ddl.value;
        $.ajax({
            type: "POST",
            url: "AdminPanel.aspx/getData",
            data: '{color: "' + value + '" }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function (response) {
                alert(response.d);
            }
        });
    }

    function OnSuccess(response) {
        alert(response.d);
    }

Html:

                <ajaxToolkit:TabPanel ID="TabPanel5" runat="server">
                <HeaderTemplate>Show Shoes</HeaderTemplate>
                <ContentTemplate runat="server">                                                               
                    <asp:Repeater ID="shoeRepeater" OnItemDataBound="shoeRepeater_ItemDataBound" runat="server">
                        <HeaderTemplate></HeaderTemplate>
                        <ItemTemplate>
                            <table border="1" style="border-color:#ff9900; width:400px; font-weight:bold; font-family:'Oswald', Arial, sans-serif;">
                                <tr>
                                    <td rowspan="6" style="width:150px; height:150px;">
                                        <image src="shoeImages/<%#DataBinder.Eval(Container.DataItem,"ImagePath") %>"></image>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <%#DataBinder.Eval(Container.DataItem,"BrandName") %> <%#DataBinder.Eval(Container.DataItem,"ModelName") %> 
                                    </td>

                                </tr>
                                <tr>
                                    <td>
                                        Price: $<%#DataBinder.Eval(Container.DataItem,"Price") %>
                                    </td>

                                </tr>
                                <tr>
                                    <td>
                                        Size: <%#DataBinder.Eval(Container.DataItem,"Size") %>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Color:<asp:DropDownList ID="colorList1" onchange="showDdlValue(this)" runat="server">
                                        </asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Quantity: <%#DataBinder.Eval(Container.DataItem,"Quantity") %>
                                    </td>

                                </tr>
                            </table>
                        </ItemTemplate>
                        <FooterTemplate></FooterTemplate>
                    </asp:Repeater>
                </ContentTemplate>
            </ajaxToolkit:TabPanel>

Web method:

    [System.Web.Services.WebMethod]
    private String getData(String color) 
    {
        return "Hello " + color;
    }

Answer 1

Change the access specifier of the webmethod to public . It is not accessible when we set it as private

Answer 2

function showDdlValue(ddl) {
    var value = ddl.value;
    $.ajax({
        type: "POST",
        url: "AdminPanel.aspx/getData",
        data: {'color':  value },
        success: OnSuccess,
        failure: function (response) {
            alert(response);
        }
    });
}

function OnSuccess(response) {
    alert(response);
}

WEB METHOD

[System.Web.Services.WebMethod]
public String getData(String color) 
{
    return "Hello " + color;
}

Try this