浅谈ASP.NET客户端回调

最新推荐文章于 2024-08-10 16:52:53 发布

weixin_34346099

最新推荐文章于 2024-08-10 16:52:53 发布

阅读量91

点赞数

文章标签： ui 数据库 javascript ViewUI

原文链接：https://yq.aliyun.com/articles/32253

版权

最近同学要做一个项目，需求是：音乐播放器。大致UI如图:

点击右边的“X”图标，可以删除当前选定的这首歌。因为现实界面的代码是复制过来的，并且前辈使用的是拼接字符串，然后绑定到页面的。没有使用ASP.NET服务器控件，所以要做点击图标，然后删除的事件，与我们平时开发有所不同了。我觉得有3中方案可以解决这个问题。

1.最坏的办法，把这个UI界面使用GridView呈现，GridView是服务器控件，所以最后一列可以是ImageButton，然后就有了服务器控件事件。解决起来就是，之前的原生态的HTML代码都删除掉，然后重新写代码。同学自己就是用的这种方式，这种方法便于理解，容易修改出来。

2.使用AJAX+Handler，就是用Ajax调用一个asp.net handler处理，handler处理的好处是，结构和代码进行了分离，这种方式也是容易接受。

3.使用ASP.NET自身的回调函数。具体参考:客户端回调实现 (C#) 示例 http://msdn.microsoft.com/zh-cn/library/ms178210.aspx 。

在MSDN实例中，客户端回调给出了一个解决方案：项目中需要在客户端使用JavaScr操作后台的C#代码，然后它底层实现这些原理，而这些原理都封装好了，我们按照它提供的接口和结构去实现就好了。

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Client Callback Demo</title> <script type="text/javascript"> function deleteIt(_this) {
 var item = _this.parentNode.parentNode.firstChild.innerText;
 //alert(item); //alert("确定删除第 "+item+" 条记录吗?");
 CallServer(item,"");
 }
 function ReceiveServerData(rValue) {
 //document.getElementById("ResultSpan").innerHTML = rValue;
 alert(rValue + "页面重新加载中");
 //将页面刷新，重新读取数据库数据
 window.location.href = window.location.href
 }
 </script> </head> <body> <form id="form1" runat="server"> <div> <%= result%> </div> </form> </body> </html>

result是后台生成的HTML代码段。

后台实例代码:

public partial class TestPage : System.Web.UI.Page,System.Web.UI.ICallbackEventHandler
 {
 protected void Page_Load(object sender, EventArgs e)
 {
 String cbReference = Page.ClientScript.GetCallbackEventReference(this,"arg","ReceiveServerData","context");
 //回调的JavaScript
 String callbackScript;
 callbackScript = "function CallServer(arg,context)"+
 "{"+cbReference+";}";
 //向页面添加javas代码段
 Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
 BindData();
 }
 protected string returnValue;
 public String result = "<table>";
 private void BindData()
 {
 DataTable mytable=new DataTable();
 mytable=GenerateData();
 for(int i=0;i<mytable.Rows.Count;i++)
 {
 //第i行第0列的值 //result = mytable.Rows[i][0].ToString();
 
 result += "<tr><td>" + mytable.Rows[i][0].ToString() + "</td>";
 result += "<td>" + mytable.Rows[i][1].ToString() + "</td>";
 result += "<td>" + mytable.Rows[i][2].ToString() + "</td>";
 result += "<td>" + mytable.Rows[i][3].ToString() + "</td>";
 result += "<td><input type='button' οnclick='deleteIt(this);' value='Delete'/></td></tr>";
 }
 result += "</table>";
 }
 //Generate the data in memory. protected DataTable GenerateData()
 {

……
 }
 public void RaiseCallbackEvent(String eventArgument)
 {
 //实际情况上执行数据库删除操作，此处为了演示直接返回一个字符串。
 returnValue="删除第"+eventArgument+"记录成功!";
 }

 public string GetCallbackResult()
 {
 return returnValue;
 }
 }

RaiseCallbackEvent(String eventArgumnet)和GetCallbackResult()方法是实现ICallbackEventHandler接口。 、

 通过这中方法，可以完成客户端和服务器端之间的交互。当然这个实例中，页面最后还是要重新刷新的，以便重新render页面。

 这是我个人的想法，不知道有没有地方理解错了，还请前辈指点。谢谢。

实例代码： http://file.cnblogs.com/liminjun88/ClientScript.zip

weixin_34346099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浅谈ASP.NET客户端回调

最近同学要做一个项目，需求是：音乐播放器。大致UI如图:点击右边的“X”图标，可以删除当前选定的这首歌。因为现实界面的代码是复制过来的，并且前辈使用的是拼接字符串，然后绑定到页面的。没有使用ASP.NET服务器控件，所以要做点击图标，然后删除的事件，与我们平时开发有所不同了。我觉得有3中方案可以解决这个问题。1.最坏的办法，把这个UI界面使用Gri...
复制链接

扫一扫