ASP.NET 前台javascript与后台代码调用

针对ASP.NET前台JavaScript与后台代码调用，有以下方法：

WebMethod属性和AJAX

WebMethod属性是ASP.NET Web服务中一种使得代码能够被JavaScript访问的方式。通过WebMethod属性我们可以将一个方法暴露给JavaScript环境。这是ASP.NET与JavaScript相集成的重要特性。

步骤如下：

在服务器端，使用[C#]或[VB]定义一个带有WebMethod特性的公共静态方法(不允许重载)
添加[System.Web.Services.WebService]特性、过时Attribute和命名空间
在客户端调用WebMethod，使用AJAX(web2.0)框架调用远程服务。

下面是一个基本的WebMethod示例。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

    namespace WebApplication
{
    /// <summary>
    /// Summary description for WebService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    [Obsolete("""")]
    public class WebService : System.Web.Services.WebService
    {
        [WebMethod]
        public string SayHello(string name)
        {
            return "Hello, " + name;
        }
    }
}

JavaScript代码如下：

function PageMethod() {
    var NAME = "JohnSmith";
    var prm = Sys.Net.WebServiceProxy.invoke(

    "WebService/WebService.asmx",

    "SayHello",

    true,

    { name: NAME },

    onSuccess,

    onFailure);
}

function onSuccess(result) {
    alert(result);
}

function onFailure(result) {
    alert(error.get_message());
}

jQuery和AJAX

jQuery可以看做集合了JavaScript函数库的一种Java代码库。jQuery有着简洁、链式的语法、跨浏览器良好的兼容性，并且提供API简单易懂。因此，使用jQuery和AJAX进行前台和后台调用通常是ASP.NET开发者的选择。

步骤如下：

获取input、textarea或其他HTML元素的内容。
使用jQuery AJAX函数处理要发送至服务器的请求，该功能的参数是请求服务器和提交数据的URL，并指定请求类型为POST或GET。
以回调的形式处理从服务器返回的响应。在回调函数中处理服务器返回的数据，可以使用alert()函数将数据显示在网页上，也可以将其更新到HTML元素中。

下面是一个jQuery AJAX示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnGet").click(function () {
                var name = $("#txtName").val();
                $.ajax({
                    url: "WebService.asmx/SayHello",
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    data: '{name: "' + name + '"}',
                    dataType: "json",
                    success: function (data) {
                        var output = data.d;
                        $("#txtOutput").val(output);
                    },
                    error: function (err) {
                        alert(err.responseText);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <label for="txtName">Name:</label>
            <input type="text" id="txtName" /><br />
            <input type="button" id="btnGet" value="Get Greeting" /><br />
            <label for="txtOutput">Output:</label>
            <textarea id="txtOutput" readonly="readonly"></textarea>
        </div>
    </form>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ASP.NET 前台javascript与后台代码调用 - Python技术站

ASP.NET 前台javascript与后台代码调用

WebMethod属性和AJAX

jQuery和AJAX

相关文章