在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;'/> " + 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;'/> " + 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类调用里面的方法?
我认为代码应该像这样结束
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;'/> " + 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页面的更多信息和示例