C# JavaScript函數(shù)使用
C# JavaScript函數(shù)
為了使用客戶端代碼實(shí)現(xiàn)EnhancedListBox中項(xiàng)的重排序,你必須使用JavaScript腳本,并且要把它們依附到EnhancedListBox的兩個(gè)按鈕上。為此,我建議你使用“往后考慮”的方法。就象編寫一個(gè)老式的ASP以前的Web頁(yè)面,首先編寫一些生成HTML文件的JavaScript。為此,最好的方法是運(yùn)行該控件,然后觀察其源碼并把它的HTML代碼復(fù)制到一個(gè)編輯器,再添加JavaScript。下面展示了你需要添加到你的控件中的JavaScript的原始形式。然后,借助于StringBuilder/StringWriter技術(shù),該控件構(gòu)建這部分代碼。該JavaScript代碼由兩部分功能組成:接收一個(gè)HTML控件;使用選擇索引并且在列表中上下移動(dòng)它(基本上與我在本文開始我使用服務(wù)器代碼向你展示的一樣)。現(xiàn)在,你要理解,你把該JavaScript代碼添加到Web控件的何處。為了實(shí)現(xiàn)在一個(gè)Web表單上有多個(gè)EnhancedListBox控件的情況下,該JavaScript代碼不會(huì)被重復(fù)復(fù)制,你需要使用Page.ClientScript對(duì)象的ReGISterClientScriptBlock方法輸出它。
要使這個(gè)方法起作用,你必須在重載的OnInit事件中調(diào)用它。
最后,為使按鈕正確工作,你需要把添加的客戶端方法依附到其上。在下面的代碼中,你會(huì)看到引用了一個(gè)方法RenderButtons。盡管我沒有把該代碼在此列出,但是它能夠使用我在以前文章中介紹的技術(shù)生成按鈕。當(dāng)時(shí),在生成實(shí)際HTML標(biāo)簽的之前,標(biāo)簽屬性是使用 AddAttribute方法以棧式存放的。在此,你使用一樣的技術(shù)把客戶端方法依附到你的按鈕。
- string s_MoveUp = "MoveItemUp(document.all." +this.ClientID + ");
- output.AddAttribute(HtmlTextWriterAttribute.OnClick,s_MoveUp);
記住,MoveItemUp是你已經(jīng)編寫成功的C# JavaScript函數(shù)之一。在生成用于排序的按鈕之前,該代碼將以堆棧存放這些JavaScript命令。對(duì)于向下(down)按鈕,你使用一樣的技術(shù)。注意,我使用ClientId代表該生成后的控件的ID;但是,在這個(gè)控件位于一個(gè)復(fù)合控件內(nèi)部時(shí),這個(gè)屬性要考慮使用父控件的名字。
現(xiàn)在,你可以成功地把該控件應(yīng)用于一個(gè)Web表單中。你可以使用與你操作一個(gè)標(biāo)準(zhǔn)ListBox控件一樣的方式在其上添加一些項(xiàng)。
事實(shí)上,這完全是一個(gè)投放位置占位符(或ASP.NET ListBox控件)。當(dāng)你使用重排序按鈕時(shí),你將看到列表中的項(xiàng)相應(yīng)地改變順序?,F(xiàn)在讓我們先記下這個(gè)問題。如果你把一個(gè)按鈕拖動(dòng)到一個(gè)Web表單上 (不需要為之添加代碼)并執(zhí)行一個(gè)回寄,你猜會(huì)發(fā)生什么呢?完全與我以前描述的一樣;任何你使用重排序按鈕作的重排序改變都將恢復(fù)到在最近一次回寄之前該控件看上去的狀態(tài)。因此,讓我們修改一下這個(gè)問題。
首先,我再添加一些JavaScript。注意,這部分代碼被添加到重載的OnInit方法中并且使用StringBuilder/StringWriter技術(shù)進(jìn)行構(gòu)建;而且,這個(gè)JavaScript方法的名字是BuildItemList。這個(gè)函數(shù)負(fù)責(zé)構(gòu)建列表框完整內(nèi)容的一個(gè)字符串描述并且把該串放到要傳遞到該函數(shù)的一個(gè)HTML元素的value屬性中。你可以把這看作是列表內(nèi)容的一種串行化。該串行化的輸出風(fēng)格會(huì)根據(jù)你自己的設(shè)計(jì)的不同而有所不同。調(diào)用這個(gè)C# JavaScript函數(shù)需要依附到該按鈕上的其它代碼。
- string s_MoveUp = "MoveItemUp(document.all." + this.ClientID + "); ";
- string s_BuildItemList ="BuildItemList
(document.all." + this.ClientID + ",document.all.__" + this.ClientID + "); ";- output.AddAttribute(HtmlTextWriterAttribute.Onclick,MoveUp + " " + BuildItemList);
現(xiàn)在,讓我們來分析一下你發(fā)送到BuildItemList函數(shù)的兩個(gè)參數(shù)。第一個(gè)參數(shù)相應(yīng)于生成的控件的ID。第二個(gè)參數(shù)是另外一個(gè)ID,與前一個(gè)命名一致,但是前面有一個(gè)"__"。這是一個(gè)你仍然需要添加到你的Web控件的隱藏的文本框,它將作為一個(gè)“串行化”項(xiàng)列表的占位符。我要在OnPreRender事件中注冊(cè)這個(gè)隱藏的文本域。
- string s_MoveUp = "MoveItemUp(document.all." + this.ClientID + "); ";
- string s_BuildItemList ="BuildItemList(document.all." + this.ClientID +
- ",document.all.__" + this.ClientID + "); ";
- output.AddAttribute(HtmlTextWriterAttribute.Onclick,MoveUp + " " + BuildItemList);
注意,我已經(jīng)使用我們的控件的ID來標(biāo)識(shí)隱藏的文本域。
到目前為止,你已經(jīng)擁有了一個(gè)完整功能的Web控件;其中,客戶端JavaScript被綁定到其中的兩個(gè)按鈕上。該JavaScript成功地實(shí)現(xiàn)在ListBox中的項(xiàng)的重排序并且把其內(nèi)容串行化為一個(gè)字符串;然后,該字符串被存儲(chǔ)在一個(gè)隱藏的文本域中。所有這些都發(fā)生在客戶端。如果一個(gè)回寄發(fā)生,不會(huì)發(fā)生重排序,因?yàn)楫?dāng)重排序時(shí)控件的Item服務(wù)器屬性還沒有收到你對(duì)它作的任何改變的消息;但是幸運(yùn)的是,位于隱藏的文本域中的表單的一個(gè)串行化快照中發(fā)生了這一變化?,F(xiàn)在,你有了可以與Item屬性一起使用的內(nèi)容了。那么,接下來,你該如何實(shí)現(xiàn)呢?
【編輯推薦】