JS调用后台方法大全

我们经常遇到js到用C#的后台代码，今天来总结一下，分为两个试用方式：直接使用和借助三方工具使用。

一：直接试用 这个在网上大家都可以找到的

方法一：1 、首先建立一个按钮，按钮的后台方法
  protected void Button1_Click(object sender, EventArgs e)
        {
            Response.Write("CSharp Called");
        }      

  2 、在前台写一个js函数，内容为

  function fu1() {
            document.getElementById('<%=Button1.ClientID%>').click();
        }
         3 、在前台或后台调用js函数，激发click事件，等于访问后台c#函数；

<asp:Button ID="Button1" runat="server" Text="button" οnclick="Button1_Click" />
        <input type="button" value="方法一" οnclick="fu1();" />

方法二： 1 、函数声明为public             
            后台代码(把public改成protected也可以)
           protected string GetTime()
        {
            return DateTime.Now.ToString();
        }
         2 、在html里用 <%= fucntion() %> 可以调用
            前台脚本
            < script language = javascript >
           function fu2() {
            var time = '<%=GetTime() %>';
            alert(time);
        }
            </ script >

 <input type="button" value="方法二" οnclick="fu2();" />

方法三：利用 doPostBack 网上都这么说： 1 、 < script language = " javascript " >
            <!- -
            function __doPostBack(eventTarget, eventArgument)
            {
               var theForm = document.Form1;      // 指runat=server的form
               theForm.__EVENTTARGET.value = eventTarget;
               theFrom.__EVENTARGUMENT.value = eventArgument;
               theForm.submit();
            }
            -->
            </ script >
            < input id = " Button1 " type = " button " name = " Button1 " value = " 按钮 " onclick = " javascript:__doPostBack('Button1','') " >

但是我在测试的时候不行，说  theForm.__EVENTTARGET.value = eventTarget; 这句的 __EVENTTARGET为空或不是对象

我们可以用 Page.ClientScript.GetPostBackEventReference方法来实现这个调用，

后台代码

 protected void Page_Load(object sender, EventArgs e)
        {
            Page.ClientScript.GetPostBackEventReference(this.Button1, null);
        }

前台

 <input type="button" value="方法三" οnclick="__doPostBack('<%=Button1.ClientID%>','');" />

在生成的Html中大家可以看到
<script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['Form1'];
    if (!theForm) {
        theForm = document.Form1;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
</script>

       当然还可以用  Page.ClientScript.GetPostBackClientHyperlink方法
总结1：网上还有什么方法，不知道行不行，不过个人感觉不是很好用，这些js调用的要不就是服务器button的方法，要不就是一些简单的方法，传入参数比较难，多次调用也变味了，比如方法2   function fu2() {
            var time = '<%=GetTime() %>';
            alert(time);在客户端生成的脚本就是 就是C#unction fu2() {
            var time = '2010/11/13 9:22:31';
            alert(time);
        }
所以不管你怎么调用这个函数，返回值不变，所以建议大家用下面的方法来调用代码。

淡然还可以借助asp.net的回调机制来做，实现起来比较麻烦，请看http://blog.csdn.net/dz45693/archive/2010/11/23/6029991.aspx

借助三方工具

1.说道第三方工具，我们首先应该说说微软的ajax吧，大家可以参考   ASP.NET AJAX 程序设计：第II 卷（客户端） 里面有详细介绍，

建立一个名为WebServiceTest的 web service。

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

namespace JsCallCSharp
{
    /// <summary>
    /// Summary description for WebServiceTest
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
     [System.Web.Script.Services.ScriptService]
    public class WebServiceTest : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld(string name)
        {
            return "Hello World:"+name;
        }
    }
}
注意要添加 [System.Web.Script.Services.ScriptService] 这个属性

在页面中添加web service 引用

  <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebServiceTest.asmx" />
        </Services>
    </asp:ScriptManager>

相应的html代码

 <input type="text" id="btnName" />
    <input type="button" value="调webSercvice" οnclick="RefService()" />

和js代码

        function RefService() {
            var name = $get('btnName').value;
            JsCallCSharp .WebServiceTest.HelloWorld(name, GetResult);
        }
        function GetResult(result) {
            alert(result);
        }

注意在调用webservice要加上命名空间JsCallCSharp.

调用后台页面方法：

后代方法

  [System.Web.Services.WebMethod]
        public static string HelloWorld(string name)
        {
            return "Hello:" + name;
        }

必须是public static 并且有属性 [System.Web.Services.WebMethod]

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">的 EnablePageMethods为true

js调用页面方法同意前缀 PageMethods，后面直接跟方法名

 function RefService2() {
            var name = $get('btnName').value;
           PageMethods.HelloWorld(name, GetResult);
        }

<input type="button" value="调后台方法" οnclick="RefService2()" />

2来说说 Anthem.net这个工具，我个人觉得好用 比微软的ajax还好一些

首先添加Anthem.dll到项目中

C#代码

 protected void Page_Load(object sender, EventArgs e)
        {
            Anthem.Manager.Register(this);
        }
        [Anthem.Method]
        protected string Hello(string name)
        {
            return "Hello:" + name;
        }

在用这个工具时，必须注册该页面或控件

js：

   function RefService() {
            var name = document.getElementById("btnName").value;
            Anthem_InvokePageMethod('Hello', [name], function(result) {
         alert( result.value);
            });
        }

调用时统一  Anthem_InvokePageMethod格式（方法名，传入参数数组，返回函数）

html

 <input type="text" id="btnName" />
    <input type="button" value="Anthem" οnclick="RefService()" />

很简单吧

三说说ajax.dll 或者是ajaxpro.dll 本例用的是AjaxPro.2.dll

首先添加AjaxPro.2.dll引用，

配置httpHandlers 在httpHandlers节点中添加

   <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>

C#代码

 protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(WebFormAjaxPro));
        }
        [AjaxPro.AjaxMethod]
        public string Hello(string name)
        {
            return "Hello :" + name;
        }

需要注册，方法必须是public

html

  function RefService() {
            var name = document.getElementById("btnName").value;
            JsCallCSharp.WebFormAjaxPro.Hello(name, function(result) {
                alert(result.value);
            });
        }

 <input type="text" id="btnName" />
    <input type="button" value="AjaxPro" οnclick="RefService()" />

客户端调用也需要用到命名空间

是不是很简单了 我个人推荐用ajaxpro和anthem这两个框架。

demo下载地址 http://download.csdn.net/source/2829044