在Web服务中调用Web方法

Question

基本上，我试图在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服务方法传递：

编辑

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的错误消息。 我不知道为什么会这样。 如果我的JavaScript类正在调用内部方法，是否需要添加对Web服务的引用？

提前致谢。

Answer 1

JavaScript在客户端上执行。 您的网络方法在服务器上可用。 您需要进行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页面上的更多信息和示例

Answer 2

我认为代码应该最终像这样

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
}