Call ASMX web service from Javascript in asp.net

Question

I have built an asmx web service that reads from a local sql database which I want to connect to my web application. I have already added a service reference, the only issue is I do not know how to call the web service in my web application directly.

Here is part of my asmx web service:

<%@ WebService Language="C#" Class="PostWebService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections.Generic;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]

public class PostWebService  : System.Web.Services.WebService {

    //method to get heart rates from sql database
    [WebMethod]
    public List<int> GetHeartRates() {
        var heartRate = new List<int>();
        try
        {
            using (SqlConnection connection = new SqlConnection(@"Data Source = (local); Initial Catalog =  RatesDB; Integrated Security=True"))
            using (SqlCommand cmd = new SqlCommand(" select HeartRate from Rates", connection))
            {
                connection.Open();
                var rdr = cmd.ExecuteReader();

                while (rdr.Read())
                {
                    heartRate.Add((int)rdr[0]);
                }
                rdr.Close();
                connection.Close();
            }
        }
        catch
        {
        }
        return heartRate;
    }

Here is part of my .aspx web page

    <html>
  <head>
      <script src="https://d3js.org/d3.v4.min.js"></script>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
            google.charts.load('current', {
        'packages': ['gauge']
      });

       d3.csv("brT16.csv", function (rrdata) {
           d3.csv("hrT16.csv", function (hrdata) {
                   for (var i = 0; i < rrdata.length; i++) {
                       for (var j = 0; j < hrdata.length; j++) {
                               console.log(rrdata[i]);
                               console.log(hrdata[j]);
                       }
               }

                   count = 0;
                   count2 = 0;
                   google.charts.setOnLoadCallback(drawChart);
                   function drawChart() {

                       // respiration gauge
                       var data = google.visualization.arrayToDataTable([
                           ['Label', 'Value'],
                           ['RR', 0],
                           //['Heart Rate', 0],
                       ]);

                       var options = {
                           width: 600,
                           height: 250,
                           redFrom: 35,
                           redTo: 55,
                           yellowFrom: 25,
                           yellowTo: 35,
                           minorTicks: 5,
                           max: 50,
                       };

                       var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

                       chart.draw(data, options);

                       setInterval(function () {
                           data.setValue(0, 1, parseInt(rrdata[count][0]));
                           chart.draw(data, options);
                           count++;
                       }, 1000);

I want to call the web service directly so that it reads from the sql database instead of the csv. Any tips in the right direction would be appreciated.

Are you open to using jQuery? You can look at this post. https://stackoverflow.com/questions/21285870/calling-asmx-web-service-from-javascript — Rick S, Jul 30 '18 at 16:18
I looked at the post but don't see how would I call the web service in the graph so that it reads the values from there, unless i am completely overlooking it — trainee, Jul 30 '18 at 16:26

score 0 · Answer 1 · answered Jul 30 '18 at 16:20

0

When adding Reference to web-service make sure you are clicking advance button and adding web Reference(Advance -> Add Web Reference -> paste Url -> Add reference). You should be able to call web service methods after that.

answered Jul 30 '18 at 16:20

TsunamiCha

179
2
9

I did add a web reference but i do not know the exact syntax for calling the web service – trainee Jul 30 '18 at 16:24
if you are calling from JavaScript try JQuery.Ajax() make sure datatype matches. else you should be able to call that method directly in backend code when you add using namespace. – TsunamiCha Jul 30 '18 at 16:39
i tried adding the jquery.ajax method, but whenever i did it and ran the web page, the chart isn't even visible anymore. Also, if i do successfully call the web service, how would i call the specific method that i want in that web service? – trainee Jul 30 '18 at 16:54
in Ajax method call something like this url:"someUrl.com/GetHeartRate". if you have parameters pass it using data: "{'TransactionID': '" + transactionId + "'}" – TsunamiCha Jul 30 '18 at 17:01
how can I call the ajax() method to call the web service without it messing up the graph? I placed it in my code but it made the graph no longer visible. – trainee Jul 30 '18 at 18:39

Call ASMX web service from Javascript in asp.net

1 Answers1