server 和client通信（asp.net和Javascript）

来源：互联网发布：来源淘宝客是什么编辑：程序博客网时间：2024/06/06 20:29

做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 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);
    }
}