Pass C# Data Result to JavaScript Variable

Question

I need to pass the SQL results from below to Javascript in ASP.Net? I've tried to declare the two fields in JS but can't get it right. How do I get the results in JS?

     var Description = "<%=this.Description%>"
     var ApplicationSourceCount = "<%=this.ApplicationSourceCount%>"

Declared the strings in C#

    public class ApplicantSourceData
    {
        public string Description { get; set; }
        public string ApplicantSourceCount { get; set; }
    }

C# WebMethod

[WebMethod]
    public List<ApplicantSourceData> GetApplicantSourceData(List<string> aData)
    {
        //SqlDataReader reader;
        List<ApplicantSourceData> GetApplicantSourceData = new List<ApplicantSourceData>();

        string connectionString = ConfigurationManager.ConnectionStrings["ATL2"].ConnectionString;
        string commandTextApplicantsByMonthCount = Properties.Queries.commandTextApplicantsByMonthCount;

        using (SqlConnection con = new SqlConnection(connectionString))
        {
            using (SqlCommand command = new SqlCommand(commandTextApplicantsByMonthCount))
            {

                command.CommandText = commandTextApplicantsByMonthCount;
                command.CommandType = CommandType.Text;
                command.Connection = con;
                con.Open();
                SqlDataReader reader = command.ExecuteReader();
                if (reader.HasRows)
                {
                    int counter = 0;
                    while (reader.Read())
                    {
                        ApplicantSourceData tsData = new ApplicantSourceData();
                        tsData.Description = reader["Description"].ToString();
                        tsData.ApplicantSourceCount = reader["ApplicantSourceCount"].ToString();
                        GetApplicantSourceData.Add(tsData);
                        counter++;
                    }
                }
            }
            return GetApplicantSourceData;
        }
    }

I've tried the following, but it doesn't

if you are calling the web method from javascript then return the result as JSON string and then parse that in client side. — Sain Pradeep
– Sain Pradeep, Commented Jun 5, 2018 at 10:08
Use Newtonsoft.Json or other library to convert c# object in json. Refer this stackoverflow.com/a/42649928/795683 — Sain Pradeep
– Sain Pradeep, Commented Jun 5, 2018 at 10:11

JoshG · Accepted Answer · 2018-06-05 10:15:10Z

You should be calling your WebMethod from the client-side (e.g., as an AJAX request). You should then have the WebMethod return a response to the client with the requested data (e.g., as a JSON-formatted string).

There's a couple ways to do this. The first is using AJAX.

Example:

C#:

[WebMethod]
public static string someWebMethod(String data) {

    // your code here
    var returnData = /* some kind of data */
    JavaScriptSerializer json = new JavaScriptSerializer();
    return json.Serialize(returnData);

}

JS (using jQuery for the example, but you could do this in regular JS too):

$.ajax({
  type: "POST",
  url: "PageName.aspx/someWebMethod",
  data: "{"data": data}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(response) {
    // Do something with the response.
  }
});

Another option is to use PageMethods. To do this, you could call the method from your JS following a pattern like this:

PageMethods.someWebMethod(data);

function onSucess(result) {
    console.log(result);
}

function onError(result) {
    console.log(result);
}

I'd suggest looking into the ASP.NET WebMethod documentation a little more too. Also, here's a couple tutorials that might help: Calling ASP.NET WebMethod using jQuery-AJAX and Calling an ASP.NET C# Method (Web Method) Using JavaScript.

I feel I should add, I'm returning the data so that I can display it in Chart.js so I'm not pulling the data based off fields or dropdowns, it should run ideally on page_load. All the tutorials I've seen show using either fields as in the documentation links you sent.
You can send the AJAX request on page load. The server receives the request (i.e., the WebMethod is called) and your SQL commands and other server-side code is executed. You can then serialize the results to JSON and return them to the client. The client gets the data from the server in the success handler. From there you can parse it and add it to your chart. The first example I provided above should demonstrate the pattern for this.
Also, the first link should show a full example of how to do this. You just won't be sending any data to the server in your AJAX request. You'll send the request, the server will do its thing, and you'll parse the result. So you should be able to follow the first tutorial, but in your cause, instead of returning the time, you'd be returning the data from your SQL query.

Collectives™ on Stack Overflow

Pass C# Data Result to JavaScript Variable

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related