在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;
}
}