最近同学要做一个项目,需求是:音乐播放器。大致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#代码,然后它底层实现这些原理,而这些原理都封装好了,我们按照它提供的接口和结构去实现就好了。
Client Callback Demo
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 = ""; result += "
" + mytable.Rows[i][1].ToString() + " | "; result += "" + mytable.Rows[i][2].ToString() + " | "; result += "" + mytable.Rows[i][3].ToString() + " | "; result += "
…… } public void RaiseCallbackEvent(String eventArgument) { //实际情况上执行数据库删除操作,此处为了演示直接返回一个字符串。 returnValue="删除第"+eventArgument+"记录成功!"; } public string GetCallbackResult() { return returnValue; } }
RaiseCallbackEvent(String eventArgumnet)和GetCallbackResult()方法是实现ICallbackEventHandler接口。 、
通过这中方法,可以完成客户端和服务器端之间的交互。当然这个实例中,页面最后还是要重新刷新的,以便重新render页面。
这是我个人的想法,不知道有没有地方理解错了,还请前辈指点。谢谢。 实例代码: