在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服務方法：

EDIT

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

更多信息和例子，我認爲代碼應該結束了這樣的事情

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 
} 

Answer 2

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函數到目前爲止

更新

個很多jQuery開發API page for ajax