0

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

alert data 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>";
    }
}

1 Answer 1

3

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)

enter image description here

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"

Sign up to request clarification or add additional context in comments.

3 Comments

i follow your code and the link you sent now i got alert message undefined
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.
try the dataType:'text" and check, as said earlier by @SuprabhatBiswal inspect and check

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.