can not get data form function using ajax jquery in asp.net c#

Question

i am trying use $.ajax() method in asp.net to fill a html tag but i didn't get any data from on success parameter i am calling getData function from c# code and I tried to return a string but it doesn't work i also tried to user Response.write() but the same issue when I alert returned value it show me the aspx page code as following image

here is my code Default.apsx

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>

        $(document).ready(function () {



            $("#firstDrop").on("change", function () {
                $.ajax({
                    url: "Default.aspx/getData",
                    type: "POST",
                    data: { id: $("#firstDrop").val() },
                    success: function (data) {
                        alert(data);
                        $("#secondDrop").html(data);
                    }
                });
            });

        });


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <select runat="server" id="firstDrop">

        <option value="0">first select</option><option value="1">second select</option><option value="3">third select</option>

    </select>
        <select id="secondDrop"></select>
    </div>
    </form>
</body>
</html>

Default.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }


    public  string getData()
    {
        return"<option>ABC</option><option>CDE</option>";
    }
}

Suprabhat Biswal · Accepted Answer · 2018-08-23T07:12:59.913

Basic rule when creating a webmethod in asp.net.

Your method should be static.
You need to decorate your function with System.Web.Services.WebMethod.

C# Code Behind

[System.Web.Services.WebMethod]
public static string GetCurrentTime(string name)
{
    return "Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}

Javascript (Aspx)

Here, in your case make your getdata function static and webmethod as well. When calling the webmethod through ajax use data.d to read the response.

[System.Web.Services.WebMethod]
public static string getData(int id)
{
    return "<option>ABC</option><option>CDE</option>";
}

$("#firstDrop").on("change", function() {
    $.ajax({
        url: "Default.aspx/getData",
        type: "POST",
        dataType: "json",
        data: {
            id: $("#firstDrop").val()
        },
        success: function(data) {
            alert(data.d);
            $("#secondDrop").html(data.d);
        }
    });
});

Reference Site:

https://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx

Similar thread "Calling webmethod in webform"

calling-a-webmethod-with-jquery-in-asp-net-webforms

i follow your code and the link you sent now i got alert message undefined — Ben Ghaleb, Aug 17 '18 at 09:32
Do a inspect element and see if your ajax run successfully or not also check in what form you are getting the response. Please see if `dataType: "json",` property is also included in your `$.ajax()` method. — Suprabhat Biswal, Aug 17 '18 at 09:36
try the dataType:'text" and check, as said earlier by @SuprabhatBiswal inspect and check — Vinod kumar G, Aug 17 '18 at 11:00

can not get data form function using ajax jquery in asp.net c#

1 Answers1