【原创首发】让ASP.NET前后台没有距离

在ASP.NET开发过程中，前后台之间数据的传递，事件的调用有时候会给开发带来一些不便。我在本文中介绍一些前后台互相调用的方法。如果大家在开发中有自己的方法，请给我留言，我将集成到本文中，给后来的朋友做一些参考。将开发情境和使用方法做一些，以便更好的使用ASP.NET.

前台调用后台：

1.javaScript函数调用

a.首先建立一个按钮，在后台将调用或处理的内容写入button_click中;

b.在前台写一个js函数，内容为document.getElementById("btn1").click();

c.在前台或后台调用js函数，激发click事件，等于访问后台c#函数;

 

< asp:Button  ID ="Button1"  runat ="server"  OnClick ="Button1_Click"  Text ="Button"   />
< a  href ="###"  onclick ="test()" >< img  src ="http://www.cnblogs.com/Images/adminlogo.gif"   /></ a >

 

    < script type = " text/javascript "  language = " javascript " >
    function  test()
   {
      document.getElementById( " Button1 " ).click();
   }
    < / script> 

 

protected   void  Button1_Click( object  sender, EventArgs e)
{
  Response.Write( " aaaaaaaaaaaaaaa " );
}

 用click不会引发页面的dopostback事件.

2.后台公共方法

a.函数声明为public
b.在html里用 可以调用

 

< script type = " text/javascript "  language = " javascript " >
function  test2()
{
   var  a  =   " <%=test2()%> " ; 
  alert(a); 
}
< / script> 

 

< a  href ="###"  onclick ="test2()" >< img  src ="http://www.cnblogs.com/Images/adminlogo.gif"   /></ a >

 

public   string  test2()
{
   return   " hello. " ;
}

 

3.__doPostBack方法

 

< script  type ="text/javascript"  language ="javascript" >
function  __doPostBack(eventTarget, eventArgument) 
{ 
   var  theForm  =  document.Form1;  // 指runat=server的form 
  theForm.__EVENTTARGET.value  =  eventTarget; 
  theFrom.__EVENTARGUMENT.value  =  eventArgument; 
  theForm.submit(); 
} 
function  onOpen()
{
  __doPostBack( ' <%= Button1.UniqueID %> ' , '' );
} 
</ script >  

< asp:Button  ID ="Button1"  runat ="server"  OnClick ="Button1_Click"  Text ="Button"   />

 

4.使用ajax框架中的方法

a.引用ajax.dll.我使用的是Ajax.NET Library 5.7.22.2

b.在web.config中添加

     <httpHandlers>
        <remove verb="*" path="*.asmx"/>
        <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/>
      </httpHandlers>

c.在Global.asax中添加

    protected void Application_Start(object sender, EventArgs e)
    {
          Ajax.Utility.HandlerPath = "ajax";
     }

d.在使用页的后台添加

 

protected   void  Page_Load( object  sender, EventArgs e)
{
  Ajax.Utility.RegisterTypeForAjax( typeof (_Default));
}

[Ajax.AjaxMethod]
public   string  ajaxTest()
{
   return  DateTime.Now.ToString();
}

 

说明:typeof(_Default))为使用页的页面类名. [Ajax.AjaxMethod]是需要使用的ajax方法的标识.

e.在前台页面中使用.

 

< script  language ="javascript"  type ="text/javascript" >
//  <!CDATA[
function  Button1_onclick() {
var  tempstr  = _Default.ajaxTest().value;
// alert(document.getElementById("Label1").innerHTML);
document.getElementById( " Label1 " ).innerHTML  =  tempstr;    
}
//  ]]>
</ script >

< input  id ="Button1"  type ="button"  value ="button"  onclick ="return Button1_onclick()"   />

 

后台调用前台：

1.RegisterStartupScript(key, script)方法
方法说明:
    接受两个字符串作为输入。第二个参数 script 是要插入到页面中的客户端脚本，包括 <script> 的起始标记和终止标记。第一个参数 key 是插入的客户端脚本的唯一标识符。在 Web 窗体的结尾处（在 </form> 标识之前）发送脚本块。
调用Demo:
前台脚本:

< script  type ="text/javascript"  language ="javascript" >
  function  Show()
 {
   alert( " Hello " );
 }
</ script >  

普通环境后台:

Page.ClientScript.RegisterStartupScript( this .GetType(),  " Show " ,  " javascript:Show() " , true );

Ajax环境后台:

ScriptManager.RegisterStartupScript( this .Page,  typeof (_Default),  " show " ,  " Show(); " ,  true );

2.RegisterClientScriptBlock(key, script)方法
方法说明:
    接受两个字符串作为输入。第二个参数 script 是要插入到页面中的客户端脚本，包括 <script> 的起始标记和终止标记。第一个参数 key 是插入的客户端脚本的唯一标识符。 在 Web 窗体的开始处（紧接着 <form runat="server"> 标识之后）发送脚本块，
调用Demo:
前台脚本:

< script  type ="text/javascript"  language ="javascript" >
function  Show()
{
  alert( " Hello " );
}
</ script >

普通环境后台:

Page.ClientScript.RegisterClientScriptBlock( this .GetType(),  " Show " ,  " javascript:Show() " , true );

Ajax环境后台:

ScriptManager.RegisterClientScriptBlock( this .Page,  typeof (_Default),  " show " ,  " Show(); " ,  true );

3.控件属性添加
例如为按钮控件添加OnClick调用前台Show()方法.

btnShow.Attributes.Add( " OnClick " ,  " javascript:Show() " );

前台调用后台，然后返回前台：

1.通过asp.net 2.0中提供的客户端回调函数GetCallbackEventReference

使用方法和Demo讲解

前台代码
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>客户端回调</title>
    <script>
    //第二步：js方法，获取输入和输出对象
    function CallServer(inputcontrol,context)
    {
　       //回调还没有处理完全时其预先加载的显示值
　       context.innerHTML = "加载中";
　       //为你在文本框中输入的信息，并且arg在这里就是将其值传递到
　       //RaiseCallbackEvent(String eventArgument)方法对应的eventArgument中
　       arg = inputcontrol.value;
　       //获取一个对客户端函数的引用；调用该函数时，将启动一个对服务器端事件的客户端回调。
　      //GetCallbackEventReference参数说明：
　      //第一个this表示为本页.
　      //第二个表示输入对象
　      //第三个表示返回时调用的js方法
　      //第四个表示输出对象 
　       <%= ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context")%>; 
    }
    
    //第七步：将输出对象赋值到页面对象
    function ReceiveServerData(result,context)
    {
        context.innerHTML = result;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
       <!--第一步：触发前台js事件.使用html中的button按钮,也可以使用超级链接的方式--> 
        请输入信息：<asp:TextBox ID="txtEnter" runat="server"></asp:TextBox>
        <input id="btnSubmit" onclick="CallServer(txtEnter,lblShow);" type="button" value="提交">
        <%--<a href="####" onclick="CallServer2(TextBox1,Label1);"><img border="0" height="35px" src="http://www.google.com/logos/Logo_25wht.gif" width="80px" /></a>--%>
        <asp:Label ID="lblShow" runat="server" Text=""></asp:Label>
    </form>
</body>
</html>

后台代码
//第三步：引用System.Web.UI.ICallbackEventHandler接口
public partial class Callback_1 : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
{
    //第四步：定义一个字符串，回调的结果信息将保存在该字符串中
    private string result;

    //第五步：引发回调事件处理
    public void RaiseCallbackEvent(string eventArgument)
    {
        //"eventArgument"为从客户端的JavaScript传递过来的参数
        result = "从服务器端返回的内容：" + eventArgument;
    }

    //第六步：回传回调结果
    public string GetCallbackResult()
    {
        return result;
    }
}