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. stackoverflow.com/questions/21285870/… — Rick S
– Rick S, Commented Jul 30, 2018 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
– trainee, Commented Jul 30, 2018 at 16:26

TsunamiCha · Accepted Answer · 2018-07-30 16:20:47Z

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, 2018 at 16:20

TsunamiCha

1992 silver badges11 bronze badges

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

5 Comments

trainee Over a year ago

I did add a web reference but i do not know the exact syntax for calling the web service

TsunamiCha Over a year ago

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.

trainee Over a year ago

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?

TsunamiCha Over a year ago

in Ajax method call something like this url:"someUrl.com/GetHeartRate". if you have parameters pass it using data: "{'TransactionID': '" + transactionId + "'}"

trainee Over a year ago

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.

Collectives™ on Stack Overflow

Call ASMX web service from Javascript in asp.net

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related