摘要： 最近同學(xué)要做一個項(xiàng)目，需求是：音樂播放器。大致UI如圖:點(diǎn)擊右邊的“X”圖標(biāo)，可以刪除當(dāng)前選定的這首歌。因?yàn)楝F(xiàn)實(shí)界面的代碼是復(fù)制過來的，并且前輩使用的是拼接字符串，然后綁定到頁面的。沒有使用ASP.NET服務(wù)器控件，所以要做點(diǎn)擊圖標(biāo)，然后刪除的事件，與我們平時開發(fā)有所不同了。我覺得有3中方案可以解決這個問題。1.最壞的辦法，把這個UI界面使用GridView呈現(xiàn)，GridView是服務(wù)
最近同學(xué)要做一個項(xiàng)目，需求是：音樂播放器。大致UI如圖:
點(diǎn)擊右邊的“X”圖標(biāo)，可以刪除當(dāng)前選定的這首歌。因?yàn)楝F(xiàn)實(shí)界面的代碼是復(fù)制過來的，并且前輩使用的是拼接字符串，然后綁定到頁面的。沒有使用ASP.NET服務(wù)器控件，所以要做點(diǎn)擊圖標(biāo)，然后刪除的事件，與我們平時開發(fā)有所不同了。我覺得有3中方案可以解決這個問題。
1.最壞的辦法，把這個UI界面使用GridView呈現(xiàn)，GridView是服務(wù)器控件，所以最后一列可以是ImageButton，然后就有了服務(wù)器控件事件。解決起來就是，之前的原生態(tài)的HTML代碼都刪除掉，然后重新寫代碼。同學(xué)自己就是用的這種方式，這種方法便于理解，容易修改出來。
2.使用AJAX+Handler，就是用Ajax調(diào)用一個asp.net handler處理，handler處理的好處是，結(jié)構(gòu)和代碼進(jìn)行了分離，這種方式也是容易接受。
3.使用ASP.NET自身的回調(diào)函數(shù)。具體參考:客戶端回調(diào)實(shí)現(xiàn) (C#) 示例 http://msdn.microsoft.com/zh-cn/library/ms178210.aspx 。
在MSDN實(shí)例中，客戶端回調(diào)給出了一個解決方案：項(xiàng)目中需要在客戶端使用JavaScr操作后臺的C#代碼，然后它底層實(shí)現(xiàn)這些原理，而這些原理都封裝好了，我們按照它提供的接口和結(jié)構(gòu)去實(shí)現(xiàn)就好了。
<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 + "頁面重新加載中"); //將頁面刷新，重新讀取數(shù)據(jù)庫數(shù)據(jù)
window.location.href = window.location.href
} </script></head><body>
<form id="form1" runat="server">
<div>
<%= result%>
</div>
</form></body></html>result是后臺生成的HTML代碼段。
后臺實(shí)例代碼:
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"); //回調(diào)的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' onclick='deleteIt(this);' value='Delete'/></td></tr>";
}
result += "</table>";
} //Generate the data in memory.
protected DataTable GenerateData()
{
……
} public void RaiseCallbackEvent(String eventArgument)
{ //實(shí)際情況上執(zhí)行數(shù)據(jù)庫刪除操作，此處為了演示直接返回一個字符串。
returnValue="刪除第"+eventArgument+"記錄成功!";
} public string GetCallbackResult()
{ return returnValue;
}
}RaiseCallbackEvent(String eventArgumnet)和GetCallbackResult()方法是實(shí)現(xiàn)ICallbackEventHandler接口。 、
通過這中方法，可以完成客戶端和服務(wù)器端之間的交互。當(dāng)然這個實(shí)例中，頁面最后還是要重新刷新的，以便重新render頁面。
