使用 JQuery ASP.NET 应用程序消费 Web 服务

• 下载源代码 - 462.36 KB

引言

jQuery 是一个 JavaScript 库，它具有丰富的 API 来操作 DOM、事件处理、动画和 Ajax 交互。 以下是 jQuery 的基本功能，使其对客户端脚本如此具有吸引力。

1. jQuery 是跨浏览器的
2. jQuery 支持 Ajax
3. 丰富的选择器
4. DOM 操作

等等。

Using the Code

我将使用的 Web 服务方法围绕客户端展开。 在 Visual Studio 2008 中设置了一个网站后，我向该项目添加了一个类型为“Web 服务”的新项，并将其命名为 *Common.asmx*。 代码隐藏 - *Common.cs* - 会在 *App_Code* 文件夹中自动生成。

该类文件的完整代码如下

ClientDataContext db = new ClientDataContext();
public Common()
{
} 

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Client InsertClient(string BizName)
{
    Client objClient = new Client();
    objClient.BizName = BizName;
    InsertData(objClient);
    return objClient;
}

public void InsertData(Client objClient)
{
    db.Clients.InsertOnSubmit(objClient);
    db.SubmitChanges();
}	

我使用 LINQ 进行数据库操作，插入客户端并返回 Id。

创建一个名为 Client 的 dbml 文件。

包含 JQuery 库

以 Json 格式返回结果，以下属性将负责

 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]  

并且重要的是，不要忘记为 Web 服务类添加属性

[System.Web.Script.Services.ScriptService]

HTML 代码是

<input type="text" id="txtBizName" />
<input type="button" id="Save" value="Save" />

现在 JavaScript 用于使用 Jquery 库实现 Ajax

  <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $('#Save').click(InsertClient);
        }
    );
        function InsertClient() {
            var BizName = $('#txtBizName').val();
            alert(BizName);
            $.ajax({
                url: "Common.asmx/InsertClient",
                type: "POST",
                dataType: "json",
                data: "{BizName:'" + BizName + "'}",
                contentType: "application/json; charset=utf-8",
                success: function(msg) {
                    $('#status').html('Id: '+msg['d']['Id']);
                },
                error: function(e) {
                    $('#status').innerHTML = "Unavailable";
                }
            });
        }
    </script> 

描述

添加 JQuery 库的引用

<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 

然后，一个点击事件注册到按钮，该按钮将调用 InsertClient () 函数

  $(document).ready(function() {
            $('#Save').click(InsertClient);
        }
    ); 

Document.Ready() 确保代码仅在页面完全加载时执行。 我们经常将代码块放在此 Document.Ready() 事件中。

之后是单击按钮时触发的 InsertClient() 函数。 它使用 jQuery 中的 $.ajax(options) 函数，并接受具有多个可选属性的对象。 Type 指定 HTTP 方法，在本例中为 POST。 URL 指定 Web 服务的 URL，以及正在调用的 Web 方法。 之后是参数，这些参数应用于数据属性。 在本例中，传递 BizName 参数，因为我们正在调用检索整个 Client 集合的方法。 必须指定 contentType 和 dataType。 接下来是两个进一步的函数：success 定义了如果调用成功应该做什么，并使用 msg['d']['Id'] 获取客户端的 Id，并且 error 处理返回的异常。

您可以看到返回了一个带有属性 - d - 的对象，并且我们显示了客户端的 Id。

 $('#status').html('Id: '+msg['d']['Id']);  

摘要

随着 AJAX 向构建富交互式网站的前沿发展，jQuery 作为轻量级但功能强大的 JavaScript 库也变得越来越重要。 考虑到利用 Web 的最佳优势的趋势，本文从宏观上描绘了 jQuery 的一些特性，以及我们如何将 jQuery 集成到 ASP.NET 中。

历史

• 2010 年 3 月 18 日：首次发布