AJAX 库

Mehul M Thakkar

4.67/5 (47投票s)

2009年11月17日

CPOL

4分钟阅读

203397

4483

.NET 库，用于从 JavaScript 调用服务器端方法或 API

引言

AJAX DLL 是一个使用 .NET 为 ASP.NET 3.0/3.5/4.0/4.5 开发的库。它用于从 JavaScript 调用服务器端方法。您可以从 JavaScript 传递方法参数值。参数可以是变量或 Model 对象。

在给定的示例中，我使用了 string 变量、数组对象和 Model 类对象作为参数。此 DLL 的一个优点是您可以在 UserControl 级别使用它，因此如果您在 UserControl 中有某个方法并想通过 JavaScript 调用它，就可以使用此 DLL 实现。此 DLL 的一个缺点是您无法在方法中访问服务器控件，因为在方法调用期间没有像 UpdatePanel 那样的页面生命周期参与。但是，您可以从 JavaScript 访问服务器控件，并为其赋值，该值将由 AJAX 方法返回。

Using the Code

使用 *Ajax DLL* 非常简单。您需要创建一个 Web 应用程序或网站，并将附件文件中 *Ajax.dll* 的引用添加到项目中。

将 DLL 添加到您的应用程序后，您需要在 Page_Load 事件中添加一行代码，如下所示：

Page_Load

此代码将在 DLL 中注册您的页面类以及您在该页面类中编写的所有 AJAX 方法，如下图所示。请查看下图，您会发现方法已被 Ajax.AjaxMethod 属性注释。您需要为您想要从 JavaScript 调用的方法添加属性注释。

Ajax.AjaxMethod 属性有六个可选参数：

方法名：您想从 JS 调用的方法。默认情况下，它将是您创建的同一方法名。
JS 回调方法名：AJAX 调用成功结束请求时调用。默认情况下，它是 Callback_<您的方法名>。
JS 错误方法名：AJAX 调用结束请求时发生任何错误。默认情况下，它是 Error_<您的方法名>。
加载文本：您想显示的文本。默认文本是 string.Empty。
异步调用：布尔值，用于使您的调用在 JavaScript 中是同步的。默认值为 True。
返回 Promise：布尔值，用于在回调方法和错误方法的情况下返回 Promise。

demoajaxapp/Methods.JPG

一旦方法编写完毕，您就可以按照 Ajax.AjaxMethod 的第一个参数的定义，从 JS 调用所有这些方法。为此，您可以编写如下的 JS 方法：

在这里查看 CallTest1() 函数。在该函数中，PassArrayObject 方法是按照 Ajax 属性的第一个参数定义的。参数值和方法名必须相同。另外，查看最后一个函数 CallReturnEvenOdd()，它不需要回调方法或错误方法，因为它的服务器方法 ReturnEvenOdd 是使用 IsAsync=false 参数定义的（请查看上一张图）。因此，值将返回到同一个函数 CallReturnEvenOdd()。_Default 对象用于调用 PassArrayObject 和 ReturnEvenOdd 方法。这个 _Default 实际上就是页面类的名称。因此，我们现在可以在页面和用户控件中创建同名的方法，并使用相应的类对象调用。

最后，您需要在 *web.config* 文件中应用一些配置，如下所示：

Ajax DLL 还支持 RESTful 服务调用。请注意，它只会调用同一域中的 RESTful 服务。使用此 DLL 调用 RESTful 服务的步骤如下：

在您的项目中创建 RESTful 服务。
使用 SmartAjax.CallService 方法调用，该方法有三个参数。
1. URL：RESTful 服务 URL
2. 方法参数：以字符串 JSON 格式的参数
3. 回调方法:
  - onSuccess：成功调用时的方法名
  - onError：错误时的方法名

最新更新包含什么？ 支持 MVC 项目。在 MVC 中使用比标准 ASP.NET 应用程序更简单，不需要在 *web.config* 文件中添加处理程序。要在 MVC 中使用，您需要在视图中使用 Html.AjaxScriptsFor 方法注册控制器，并像这样调用方法。

控制器端只需使用 Ajax.AjaxMethod 属性注释方法。

在此处查找 HTML 代码

<%@ Page Language="C#" AutoEventWireup="true" 
    Codebehind="Default.aspx.cs" Inherits="DemoAjaxApp._Default"%>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, 
    Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<!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>Ajax Demo</title>

    <script language="javascript" type="text/javascript">
             
            function CallTest()
            {
                var id=document.getElementById('txtClientId').value;
                _Default.Test(id);
            }
            function NameLength(obj)
            {
                var i=0;
                var newdiv = document.getElementById('EmpData');
                newdiv.innerHTML = "";
                if(obj == null)
                {    
                    newdiv.innerHTML = "No Employee Found";
                    return;
                }
                mytable = document.createElement("table");
                mytable.cellSpacing = "0px";
                mytable.style.border = "1px solid #000";
                mytablebody = document.createElement("tbody");
                mycurrent_row = document.createElement("tr");
                for(i=0;i<obj.Rows[0].Columns.length;i++)
                {
                        mycurrent_cell = document.createElement("td");
                        currenttext = 
                          document.createTextNode(obj.Rows[0].Columns[i].Name);
                        mycurrent_cell.appendChild(currenttext);
                        mycurrent_cell.style.border = "1px solid #000";
                        mycurrent_row.appendChild(mycurrent_cell);
                }    
                mytablebody.appendChild(mycurrent_row);    
                for(var j=0;j<obj.RowCount;j++)
                {
                    var objRow = obj.Rows[j];
                    mycurrent_row = document.createElement("tr");
                    for(i=0;i<objRow.Columns.length;i++)
                    {
                        mycurrent_cell = document.createElement("td");
                        if(objRow.Columns[i].Value != null)
                            currenttext = 
                              document.createTextNode(objRow.Columns[i].Value + " ");
                        else
                            currenttext = document.createTextNode(" ");
                        mycurrent_cell.appendChild(currenttext);
                        mycurrent_cell.style.border = "1px solid #000";
                        mycurrent_row.appendChild(mycurrent_cell);
                    }
                    mytablebody.appendChild(mycurrent_row);
                }
                mytable.appendChild(mytablebody);
                newdiv.appendChild(mytable);                                
            }
            function Error_Test(obj)
            {
                alert(obj.ErrMsg);
            }
            function CallTest1()
            {
                var x = new Array();
                x[0] = "Mehul";
                x[1] = "Thakkar";
                _Default.PassArrayObject(x);
            }
            function ReturnClassObject(obj)
            {
                alert(obj.Name);
            }
            function Error_PassArrayObject(obj)
            {
                alert(obj.ErrMsg);
            }

            function CallReturnEvenOdd() {
                var id = document.getElementById('txtNumber').value;
                var msg = _Default.ReturnEvenOdd(id);
                alert(msg);
            }

            function CallTest2()
            {
                var x = new Object();
                x.Name = "Mehul-Thakkar";
                x.Phone = 25460645;
                x.Email = "mehult@xyz.com";
                x.JoiningDate = "15-09-2010";
                _Default.PassClassObject(x);
            }
            function ReturnLength(obj)
            {
                alert(obj);
            }
            function Error_PassClassObject(obj)
            {
                alert(obj.ErrMsg);
            }

            function CallBack_ReturnArray(arrObj) {
            
                var Total=0;
                for(var i in arrObj)
                    Total+=parseInt(arrObj[i],10);
                    
                alert(Total);
            }
            function ReturnStrArray() {
                _Default.ReturnStrArray().then(function(arrObj) {
                    var str = '';
                    for (var i in arrObj)
                        str += arrObj[i] + "\n";

                    alert(str);
                });
            }
            function CallBack_ReturnObject(clsObj)
            {
                alert(clsObj.Email);
            }
            function CallBack_ReturnFArray(arrObj)
            {
                var Total=0;
                for(var i in arrObj)
                    Total+=parseFloat(arrObj[i],10);
                    
                alert(Total);
            }

            function CallBack_GenericCollection(collObj) {
                for (var item in collObj) {
                    alert("Name: " + collObj[item].Name + "\nPhone: " + 
                           collObj[item].Phone + "\nEmail: " + collObj[item].Email);
                }
            }

            function ServiceCall() {
                SmartAjax.CallService(
                "https://:2830/TestService.svc/GetData",
                '{ "value": "' + document.getElementById("txtServiceBox").value + '" }',
                { onSuccess: "serviceCallback", onError: "serviceError" }
                );
            }

            function serviceCallback(str) {
                alert(str);
            }

            function serviceError(str) {
                alert(str);
            }
                
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <div style="border: solid 1px yellow">
                Enter Emp No Here:
                <input type="text" id="txtClientId" />
                <a href="#" onclick="CallTest()">Retrieve Emp</a>
                <div id="EmpData">
                </div>
            </div>
            <br />
            <div style="border: solid 1px blue">
                Pass Array Object:
                <a href="#" onclick="CallTest1()">Click Here</a>
                <div id="Div1">
                </div>
            </div>
            <br />
            <div style="border: solid 1px green">
                Pass Class Object:
                <a href="#" onclick="CallTest2()">Click Here</a>
                <div id="Div2">
                </div>
            </div>
            <br />
            <div style="border: solid 1px orange">
                Return Array Object:
                <a href="#" onclick="_Default.ReturnArray()">Click Here</a>
                <div id="Div3">
                </div>
            </div>
            <br />
            <div style="border: solid 1px brown">
                Return String Array Object:
                <a href="#" onclick="ReturnStrArray()">Click Here</a>
                <div id="Div5">
                </div>
            </div>
            <br />
            <div style="border: solid 1px pink">
                Return Double Array Object:
                <a href="#" onclick="_Default.ReturnFArray()">Click Here</a>
                <div id="Div6">
                </div>
            </div>
            <br />
            <div style="border: solid 1px gray">
                Return Class Object:
                <a href="#" onclick="_Default.ReturnObject()">Click Here</a>
                <div id="Div4">
                </div>
            </div>
            <br />
            <div style="border: solid 1px silver">
                Synchronous Call using AJAX:
                <input type="text" id="txtNumber" />
                <a href="#" onclick="CallReturnEvenOdd()">Click Here</a>
                <div id="Div7">
                </div>
            </div>
            <br />
            <div style="border: solid 1px #aecfa5">
                Generic Support:
                <a href="#" onclick="_Default.GenericCollection()">Click Here</a>
                <div id="Div8">
                </div>
            </div>
            <br />
            <div style="border: solid 1px #2ec2d7">
                Restful Service Call:
                <input type="text" id="txtServiceBox" />
                <a href="#" onclick="ServiceCall()">Click Here</a>
                <div id="Div9">
                </div>
            </div>
            <br />
            <div style="border: solid 1px red">
            Access this textbox from Ajax dll
            <asp:TextBox runat="server" ID="txt"></asp:TextBox>
            <a href="#" onclick="_Default.ControlAccess()">Get Error</a>
            </div>
        </div>
       
        <asp:UpdatePanel runat="server" ID="UP1">
            <ContentTemplate>
                <asp:TextBox runat="server" ID="txt1">
                </asp:TextBox>
                <asp:Button runat="server" ID="b1" 
                 Text="click here" OnClick="b1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

在此处查找 CS 文件代码

using System;
using System.Collections.Generic;
using System.Data;
using Ajax.NET;

namespace DemoAjaxApp
{
    public class Temp
    {
        string _name, _email;
        int _phone;
        DateTime _doj;

        public string Name { get { return _name; } set { _name = value; } }
        public int Phone { get { return _phone; } set { _phone = value; } }
        public string Email { get { return _email; } set { _email = value; } }
        public DateTime JoiningDate{ get {return _doj;} set{ _doj = value;}}
    }
    public partial class _Default : System.Web.UI.Page
    {
        [AjaxMethod("Test", "NameLength", null, "Loading...")]
        public DataTable Test(string Id)
        {
            System.Data.SqlClient.SqlConnection con = 
                   new System.Data.SqlClient.SqlConnection
                   ("server=mehult;Database=mehul;User Id=sa;Password=");
            System.Data.SqlClient.SqlDataAdapter Adp = 
                   new System.Data.SqlClient.SqlDataAdapter
                   ("Select * from emp where no=" + Id, con);

            DataTable dt = new DataTable();
            try
            {
                Adp.Fill(dt);
                if (dt.Rows.Count > 0)
                    return dt;
                else
                    return null;
            }
            catch (Exception ex)
            {
                return null;
            }
        }
        [AjaxMethod("PassArrayObject", "ReturnClassObject", null, "Loading...")]
        public Temp PassArrayObject(string[] str)
        {
            Temp t1 = new Temp();
            foreach (string st in str)
                t1.Name += st;

            return t1;
        }

        [AjaxMethod("PassClassObject", "ReturnLength", null, "Loading...")]
        public int PassClassObject(Temp str)
        {
            return str.Name.Length;
        }

        [AjaxMethod("ControlAccess", false, false, "Loading...")]
        public void ControlAccess(string str)
        {
            txt.Text = str;
        }

        [AjaxMethod(false)]
        public string ReturnEvenOdd(int i)
        {
            if (i % 2 == 0)
                return "Number is Even";
            else
                return "Number is Odd";
        }

        [AjaxMethod(null, true, false, "Loading...")]
        public int[] ReturnArray()
        {
            int[] i ={ 1, 2, 3, 4 };
            return i;
        }

        [AjaxMethod(true, true)]
        public string[] ReturnStrArray()
        {
            string[] str ={ "\\'1\\'", "2", "3", "4" };
            return str;
        }

        [AjaxMethod(null, true, false, "Loading...")]
        public double[] ReturnFArray()
        {
            double[] i ={ 1.423, 2.543, 3.765, 4.65 };
            return i;
        }

        [AjaxMethod(null, true, false, null)]
        public Temp ReturnObject()
        {
            Temp obj = new Temp();
            obj.Name = "hello";
            obj.Phone = 420840;
            obj.Email = "hello@helo.com";
            return obj;
        }

        [AjaxMethod]
        public Dictionary<string, Temp> GenericCollection()
        {
            return new Dictionary<string, Temp> { {"1", new Temp 
                   { Email = "test1@helo.com", Name = "test1", Phone = 1234567 }},
                   {"2", new Temp { Email = "test2@helo.com", 
                   Name = "test2", Phone = 21345 }}};
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            Scripts.Add(this);
        }

        protected void b1_Click(object sender, EventArgs e)
        {
            txt1.Text = "hello";
        }
    }
}

演示项目

Ajax.NET 库

https://github.com/mehulthakkar1/Ajax.NET

历史

2023 年 6 月 31 日：文章更新
2019 年 12 月 6 日：文章更新
1. 框架升级
2. Promise 支持
3. MVC 支持
2014 年 7 月 30 日：文章更新
1. 连续 Ajax 调用支持。允许在第一个 Ajax 调用的成功或错误方法中进行另一次 Ajax 调用。
2013 年 7 月 20 日：文章更新
1. 更多面向对象的 JS
2. 泛型支持
3. RESTful 服务支持
2011 年 7 月 9 日：文章更新
1. 无需在 IIS 中添加扩展名 "ajax" 和 "ajaxj"。
2. ShowLoading 参数已移除。如果您不想显示加载消息，请传递 string.empty 或 null。
3. 引入了新参数 IsAsync，默认值为 true。如果为 false，则它将使 JavaScript 调用同步。无需回调或错误方法来处理。
4. JS 渲染减少。性能得到提升。
2010 年 2 月 9 日：文章更新
2009 年 11 月 17 日：初始发布