运用WCF来简化Ajax代码

最新推荐文章于 2021-06-10 14:52:50 发布

yx017893

最新推荐文章于 2021-06-10 14:52:50 发布

阅读量546

点赞数

分类专栏： Ajax WCF NET 文章标签： wcf ajax button function input server

本文链接：https://blog.csdn.net/yx017893/article/details/6766708

版权

NET 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

Ajax

4 篇文章 0 订阅

订阅专栏

WCF

1 篇文章 0 订阅

订阅专栏

一般的ajax程序是HTML+ASHX,要写很多通信代码,但是微软的WCF集成了通信代码,简化了代码.

1，新建一个WCF服务器页面,新建一个给客户端使用的方法,及数据类.

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace WebApplication1
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class WCFService1
    {
        /// <summary>
        /// 获取用户信息
        /// </summary>
        /// <param name="id">用户id</param>
        /// <returns>存放用户信息的用户类</returns>
        [OperationContract]
        public user GetUser(int id) {
            return new user() {username="小江",age=22,address="浙江温州" };        
        }
        // 添加 [WebGet] 属性以使用 HTTP GET
        [OperationContract]
        public void DoWork()
        {
            // 在此处添加操作实现
            return;
        }

        // 在此处添加更多操作并使用 [OperationContract] 标记它们
    }
    /// <summary>
    /// 定义用户类,存放用户数据
    /// </summary>
    public class user
    {
        public string username { get; set; }
        public int age { get; set; }
        public string address { get; set; }
    }
}

2，添加一个aspx页面,在页面顶部添加一个ScriptManager控件,在这个控件的数据集里添加服务器页面进来,

最后写js代码,直接像写C#程序一样写js代码,很方便.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WCFAjax.aspx.cs" Inherits="WebApplication1.WCFAjax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">

        #Text3
        {
            height: 50px;
            width: 181px;
        }
    </style>
    <script type="text/javascript">
        function $(id) { return document.getElementById(id); }

        function Button1_onclick() {
            WCFService1.GetUser(1, function(data) {//调用服务器Getuser(id,fn,fn)方法,第一个为参数,第二个为返回成功的匿名函数,第三个为返回失败的匿名函数
            $("Text1").value = data.username;
            $("Text2").value = data.age;
            $("Text3").value = data.address;
            }, function() { alert("获取失败"); });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    <p>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WCFService1.svc" />
            </Services>
        </asp:ScriptManager>
        用户名<input id="Text1" type="text" /></p>
    <p>
        年龄<input id="Text2" type="text" /></p>
    <p>
        地址<input id="Text3" type="text" /></p>
    <p>
        <input id="Button1" type="button" value="button" οnclick="return Button1_onclick()" /></p>

    </div>
    </form>
</body>
</html>