在Web服务中调用Web方法

本文关键字:Web 方法 调用 服务 | 更新日期: 2023-09-27 18:10:15

基本上我正在尝试在ASP.NET中使用JavaScript类中的web服务方法。这里是我的web服务中的方法:

[WebMethod]
    public DataSet GetFireStation()
    {
        SqlConnection sqlConnection1 = new SqlConnection(ConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString);
        string select = "select * from dbo.FireStation ";
        sqlConnection1.Open();
        // Create an Adapter
        SqlDataAdapter da = new SqlDataAdapter(select, sqlConnection1);
        // Create a New DataSet
        DataSet ds = new DataSet();
        // Fill The DataSet With the Contents of the Stock Table
        da.Fill(ds, "FireStation");
        sqlConnection1.Close();
        // Now Return ds which is a DataSet
        return (ds);
    }

然后这里是我的HTML代码调用函数在JavaScript类:

 case "Accident":
            if (type == 'Accident') {
                symbol = new esri.symbol.PictureMarkerSymbol('img/Accident.gif', 25, 20);
                htmlStr = htmlStr + "<input type='button' id='btnHosPoint' class='infoTempButton infoTempOrange' title='To Hospital' value='' onclick='getSafetyCoordXY(" + $(this).find("actualX").text() + ", " + $(this).find("actualY").text() + ", " + ''"' + type + ''"' + ");connectNearestRoute(" + $(this).find("actualX").text() + ", " + $(this).find("actualY").text() + ");' />"
                                    + "<input type='button' id='btnClinicPoint' class='infoTempButton infoTempOrange' title='To Clinic' value='Clinic' onclick='connectNearestClinic(" + $(this).find("actualX").text() + ", " + $(this).find("actualY").text() + ");' />"
                                    + "<input type='button' id='btnFirePoint' class='infoTempButton infoTempOrange' title='Nearest Fire Station' value='FS' onclick='ConnectNearsetFireStation(" + $(this).find("actualX").text() + ", " + $(this).find("actualY").text() + ");' />"
                                    + "<input type='button' id='btnPolicePoint' class='infoTempButton infoTempOrange' title='Nearest Police Station' value='Police' onclick='ConnectNearsetPolice(" + $(this).find("actualX").text() + ", " + $(this).find("actualY").text() + ");' />";
                var point = new esri.geometry.Point({ "x": $(this).find("actualX").text(), "y": $(this).find("actualY").text(), "spatialReference": { "wkid": 3414 } });
                var graphic = new esri.Graphic(point, symbol);
                map.graphics.add(graphic);
                var infoTemplate = new esri.InfoTemplate();
                infoTemplate.setTitle("<img src='img/Accident.gif' style='width:25px; height:25px;'/>&nbsp;&nbsp; " + type);
                infoTemplate.setContent("Information: " + incidentMessage + "</br>" + "</br>" + htmlStr);
                graphic.setSymbol(symbol);
                graphic.setInfoTemplate(infoTemplate);
                incidentLocation.push(graphic);
                htmlStr = "";
            }
            break;

这是我在JavaScript类中的函数它从数据库中检索数据它将通过web service方法传递:

编辑

function ConnectNearsetFireStation(x, y) {
    map.infoWindow.hide();
    //map.infoWindow.resize(350, 120);
    var Fire = [];
    var FireStationPointGraphic = [];
    $.ajax({
        'type'          : 'GET',
        'url'           : 'http://localhost/SgDataService.asmx' + 'GetFireStation',
    'success'       : function(results){
    $.each(GetFireStation(), function () {
        var name = $(this).find("ID").text();
        firestation = $(this).find("Name").text();
        address = $(this).find("Address").text();
        postal = $(this).find("PostalCode").text();
        coordX = $(this).find("X").text();
        coordY = $(this).find("Y").text();
        // Compute Distance
        var IncidentPoint = new esri.geometry.Point({ "x": x, "y": y, "spatialReference": { "wkid": 3414 } });
        var FireStationPoint = new esri.geometry.Point({ "x": coordX, "y": coordY, "spatialReference": { "wkid": 3414 } });
        var distance = esri.geometry.getLength(IncidentPoint, FireStationPoint);
        Fire.push(distance);
        var point = new esri.geometry.Point({ "x": coordX, "y": coordY, "spatialReference": { "wkid": 3414 } });
        var symbol = new esri.symbol.PictureMarkerSymbol('/SAFETY_AT_SG/Images/Features/FireStation.gif', 25, 25);
        var PointGraphic = new esri.Graphic(point, symbol);
        var infoTemplate = new esri.InfoTemplate();
        infoTemplate.setTitle("<img src='/SAFETY_AT_SG/Images/Features/PoliceStation.png' style='width:25px; height:25px;'/>&nbsp;&nbsp; " + firestation);
        infoTemplate.setContent("<b>FireStation: </b>" + firestation + "<br/>"
                + "<b>Address: </b>" + address + "<br/>"
                + "<b>PostalCode: </b>" + postal + "<br/>"
                );
        PointGraphic.setSymbol(symbol);
        PointGraphic.setInfoTemplate(infoTemplate);
        //Store PoliceStation To Array
        FireStationPointGraphic.push(PointGraphic);
        //OneMap.map.graphics.add(PointGraphic)
    }
    );
    }
    });
    var minDist = Math.min.apply(null, Fire); //Get Smallest Distance
    for (var i = 0; i < Fire.length; i++) {
        if (minDist == Fire[i]) {
            var myX = FireStationPointGraphic[i].geometry.x;
            var myY = FireStationPointGraphic[i].geometry.y;
            OneMap.map.graphics.add(FireStationPointGraphic[i]);
            RouteU(x + ',' + y + ";" + myX + ',' + myY);
            break;
        }
    }
}

然而,当我尝试在conenctNearestFireStation()中调用GetFireStation()时,它告诉我一个错误消息,即GetFireStation未定义。我想知道为什么会这样。我需要添加任何引用到web服务,如果我的JavaScript类调用里面的方法?

在Web服务中调用Web方法

我认为代码应该像这样结束

function ConnectNearsetFireStation (x, y){
    var Fire = [];
    var FireStationPointGraphic = [];
    var setRoute = function (){
        var minDist = Math.min.apply(null, Fire); //Get Smallest Distance
        for (var i = 0; i < Fire.length; i++) {
            if (minDist == Fire[i]) {
                var myX = FireStationPointGraphic[i].geometry.x;
                var myY = FireStationPointGraphic[i].geometry.y;
                OneMap.map.graphics.add(FireStationPointGraphic[i]);
                RouteU(x + ',' + y + ";" + myX + ',' + myY);
                break;
            }
        }
    }
    var processFireStations = function (allFireStations){
        $.each(allFireStations, function (){
            var name = $(this).find("ID").text();
            firestation = $(this).find("Name").text();
            address = $(this).find("Address").text();
            postal = $(this).find("PostalCode").text();
            coordX = $(this).find("X").text();
            coordY = $(this).find("Y").text();
            // Compute Distance
            var IncidentPoint = new esri.geometry.Point({ "x": x, "y": y, "spatialReference": { "wkid": 3414 } });
            var FireStationPoint = new esri.geometry.Point({ "x": coordX, "y": coordY, "spatialReference": { "wkid": 3414 } });
            var distance = esri.geometry.getLength(IncidentPoint, FireStationPoint);
            Fire.push(distance);
            var point = new esri.geometry.Point({ "x": coordX, "y": coordY, "spatialReference": { "wkid": 3414 } });
            var symbol = new esri.symbol.PictureMarkerSymbol('/SAFETY_AT_SG/Images/Features/FireStation.gif', 25, 25);
            var PointGraphic = new esri.Graphic(point, symbol);
            var infoTemplate = new esri.InfoTemplate();
            infoTemplate.setTitle("<img src='/SAFETY_AT_SG/Images/Features/PoliceStation.png' style='width:25px; height:25px;'/>&nbsp;&nbsp; " + firestation);
            infoTemplate.setContent("<b>FireStation: </b>" + firestation + "<br/>"
                    + "<b>Address: </b>" + address + "<br/>"
                    + "<b>PostalCode: </b>" + postal + "<br/>"
                    );
            PointGraphic.setSymbol(symbol);
            PointGraphic.setInfoTemplate(infoTemplate);
            //Store PoliceStation To Array
            FireStationPointGraphic.push(PointGraphic);
            //OneMap.map.graphics.add(PointGraphic)
        });
        // Once the $.Each is over, map the route
        setRoute();
    };
    var getFireStations = function (){
        $.ajax({
            'type'          : 'GET',
            'url'           : 'http://localhost/SgDataService.asmx' + 'GetFireStation',
            'success'       : processFireStations
        });
    };

    map.infoWindow.hide();
    //map.infoWindow.resize(350, 120);
    getFireStations();      // start everything
}

JavaScript在客户端执行。您的web方法在服务器上可用。您需要进行ajax调用来执行webmethod并将结果返回给客户端

这意味着您需要编写一个额外的javascript函数。JQuery将真正帮助您实现这一点,因为它提供了一些简化的、跨浏览器兼容的方法来进行ajax调用。

// $ is a shortcut for jQuery
$.ajax({
    'type'          : 'GET',
    'url'           : yoururl + 'GetFireStation'
    'success'       : function(results){
                          // do stuff
                      }
}});

请注意:

AJAX发出异步调用,这意味着您可能不得不这样做重新考虑到目前为止你是如何编写javascript函数的

关于ajax的jQuery API页面的更多信息和示例