做Web的东东常常会遇到server端和Client端进行通信问题。我解决的方法:WebService+JScript。当然简单的互通可以用PageMethods来做,但是PageMethods有局限性,这在后面会做介绍。
首先在了解需求后,首先在Server端建立WebService,然后在Client端用JScript调用WebService的WebMethod并传递相应的参数。webmethods处理完后,假如server端有相应的数据返回到Client端,则在server端用Return(datas),然后Client端用一个Function接收。server端和Client端通信最主要的问题就是寻找在之间传递参数两者能够互相Parser的Data Type,server端的List和Client端的Array之间可以互相Parser,并且,可以在client端用{}object制作与server端相似的Struct类型,在server端用List<struct>
接收即可。
一:Create WebService
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;
using System.Collections.Generic ;
using System.Data;
/// <summary>
/// Fixed_Point_Line_Mapping 的摘要描述
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
//假如在Server和Client传送数据类型比较复杂,需要用GenerateScriptType声明
[GenerateScriptType(typeof(clientInputDatas))]
[GenerateScriptType(typeof(serverOutputDatas))]
public class Fixed_Point_Line_Mapping : System.Web.Services.WebService {
/// <summary>
///定义client传回数据类型
/// num --在Client端的序号
/// xValue --client输入的defect在Sheet中的坐标
/// yValue --client输入的defect在Sheet中的坐标
/// </summary>
public struct clientInputDatas
{
public int num;
public string chartType;
public string asixType;
public float xValue;
public float yValue;
}
/// <summary>
/// num --在Client端的序号
/// chartType --Point/Line
/// asixType --X/Y
/// line --Unit所在的Line
/// eqp --EQP
/// unit --Unit
/// x1Value --Mapping后符合的EQP点位
/// y1Value --Mapping后符合的EQP点位
/// x2Value,y2Value --用于Line
/// distanse --EQP点位和Defect 点/Line 的Distance
/// </summary>
public struct serverOutputDatas
{
public int num;
public string chartType;
public string asixType;
public string shop;
public string line;
public string eqp;
public string unit;
public float x1Value;
public float y1Value;
public float x2Value;
public float y2Value;
public float distance;
}
public Fixed_Point_Line_Mapping ()
{
//如果使用設計的元件,請取消註解下行程式碼
//InitializeComponent();
}
[WebMethod]
public List<serverOutputDatas> returnMapData(List<clientInputDatas> clientInputList, float range)
{
List<serverOutputDatas> serverOutputList = new List<serverOutputDatas>();
for (int i = 0; i < clientInputList.Count; i++)
{
serverOutputDatas serOutDatas = new serverOutputDatas();
clientInputDatas cliInDatas = (clientInputDatas)clientInputList[i];
int no = cliInDatas.num;
string chartType = cliInDatas.chartType;
string asixType = cliInDatas.asixType;
float xValue = cliInDatas.xValue;
float yValue = cliInDatas.yValue;
//GC_EQP_CONT_N.selMappingDatas()是一个Server端的用Client参数进行DB操作的method
DataSet ds = GC_EQP_CONT_N.selMappingDatas(chartType, asixType, range, xValue, yValue);
if (ds.Tables[0].Rows.Count > 0)
{
for (int j = 0; j < ds.Tables[0].Rows.Count; j++)
{
DataRow dr = ds.Tables[0].Rows[j];
serOutDatas.num = no;
serOutDatas.chartType = chartType.ToString();
serOutDatas.asixType = asixType;
serOutDatas.shop = dr["shop"].ToString();
serOutDatas.line = dr["line"].ToString();
serOutDatas.eqp = dr["eqp"].ToString();
serOutDatas.unit = dr["unit"].ToString();
serOutDatas.x1Value = float.Parse(dr["x1"].ToString());
serOutDatas.y1Value = float.Parse(dr["y1"].ToString());
object test = dr["x2"].ToString();
if (dr["x2"] == null || dr["x2"] == " ")
{
serOutDatas.x2Value = 0;
}
else
{
serOutDatas.x2Value = float.Parse(dr["x2"].ToString());
}
if (dr["y2"] == null || dr["y2"] == " ")
{
serOutDatas.y2Value = 0;
}
else
{
serOutDatas.y2Value=float.Parse(dr["y2"].ToString());
}
serOutDatas.distance = float.Parse(dr["distance"].ToString());
serverOutputList.Add(serOutDatas);
}
}
ds.Dispose();
}
return serverOutputList;
}
}
二:在client端用Javascript传送参数
//产生Client参数的Value
function ReadControlValueInTable(table)
{
var valueArr=new Array();
for(var i=3;i<table.rows.length;i++)
{
//alert(i);
var row=table.rows[i];
for(var j=0;j<1;j++)
{
var id=row.cells[j].firstChild.id;
var idSerice=id.substring(4);
var text=document.getElementById(id);
if(text.value.length>0)
{
var xId=null;
var yId=null;
var chartType=null;
var asixType=null;
var txtX="Text"+(Number(idSerice)+1);
var txtY="Text"+(Number(idSerice)+2);
var txtXValue=(document.getElementById(txtX)).value;
var txtYValue=(document.getElementById(txtY)).value;
if(txtXValue=="-" ||txtYValue=="-")
{
chartType=chartTypeLine;
if(txtXValue=="-" && txtYValue!="-")
{
asixType="X";
}
else
{
asixType="Y";
}
}
else
{
chartType=chartTypePoint;
}
if(mappingByValue==mappingByValueTFT)
{
xId="Text"+(Number(idSerice)+3);
yId="Text"+(Number(idSerice)+4);
}
else if(mappingByValue==mappingByValueCF)
{
xId="Text"+(Number(idSerice)+99-(i-3)*3+1);
yId="Text"+(Number(idSerice)+99-(i-3)*3+2);
}
var rowNo=i-3+1;
var xValue=(document.getElementById(xId)).value;
var yValue=(document.getElementById(yId)).value;
var valueList={};
valueList.num=rowNo;
valueList.chartType=chartType;
valueList.asixType=asixType;
valueList.xValue=xValue;
valueList.yValue=yValue;
valueArr.push(valueList);
}
}
}
return valueArr;
}
function mappingContInRange()
{
var valueArr=new Array();
var table=document.getElementById("tblTFTFixPoint");
//调用方法获得参数ValueList
valueArr=ReadControlValueInTable(table);
// var arr=new Array();
// var ob={};
// for(var i=0;i<1;i++)
// {
// ob.num=99;
// ob.xValue=11;
// ob.yValue=12;
// ob.chartType="Point";
// ob.asixType="X";
// arr.push(ob);
// }
var textRange=document.getElementById("txtRange");
var range=Number(textRange.value);
//调用WebService中的WebMethod,valueArr,range为参数,getValue为接收Server端传回Data的处理函数
Fixed_Point_Line_Mapping.returnMapData(valueArr,range,getValue);
}
//处理从server端传回的Datas
function getValue(valueArr)
{
var arr=new Array();
arr=valueArr;
for(var i=0;i<arr.length;i++)
{
alert(arr[i].num);
alert(arr[i].chartType);
alert(arr[i].asixType);
alert(arr[i].shop);
alert(arr[i].line);
alert(arr[i].eqp);
alert(arr[i].unit);
alert(arr[i].x1Value);
alert(arr[i].y1Value);
alert(arr[i].x2Value);
alert(arr[i].y2Value);
alert(arr[i].distance);
}
}