c#后台写javascript前端调用

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› Node.js›Node.js教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

最近比较清闲，就来逛逛控件网，发现了一个非常好的类库，可惜没看到源代码，不过使用方式和dll类库倒是能下载到，先发来贴这里，用起来比较方便

针对的情况是c#后台代码写个函数，然后前端代码可以直接调用，确实蛮方便，增加了前后台的交互。

这种方式用c#+EasyUI+Ajax.dll可以很方便的从c#后台拉送数据EasyUI做HTML展现，Ajax.dll做数据传输的桥梁。

演示的DEMO就1个default页面：

<%@ 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;
            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";
            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 = ReturnEvenOdd(id);
                    alert(msg);
                }
        function CallTest2()
        {
            var x = new Object();
            x.Name = "Mehul-Thakkar";
            x.Phone = 25460645;
            x.Email = "[email protected]";
            x.JoiningDate = "15-09-2010";
            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 CallBack_ReturnStrArray(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);
        }
    </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="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="ReturnFArray()">Click Here</a>
                <div id="Div6">
                </div>
            </div>
            <br />
            <div style="border: solid 1px gray">
                Return Class Object:
                <a href="#" onclick="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 red">
            Access this textbox from Ajax dll
            <asp:TextBox runat="server" ID="txt"></asp:TextBox>
            <a href="#" onclick="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>

Default.CS文件如下：

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

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

        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 partial class _Default : System.Web.UI.Page
    {
    [Ajax.AjaxMethod("Test", "NameLength", null, "Loading...")]
        public DataTable Test(string Id)
        {
            System.Data.SqlClient.SqlConnection con = 
            new System.Data.SqlClient.SqlConnection
        ("server=mehul;Database=master;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;
            }
        }

        [Ajax.AjaxMethod("PassArrayObject", 
          "ReturnClassObject", null, "Loading...")]
        public Temp PassArrayObject(string[] str)
        {
            Temp t1 = new Temp();
            foreach (string st in str)
                t1.Name += st;

            return t1;
        }

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

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

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



鲜花




握手




雷人




路过




鸡蛋