topcat 姍舞之間的極度凝聚

緣起

最近小喵剛好在寫個東西，裡面有個需求，就是想藉由jQuery來控制ListView產生物件的顯示或隱藏。這其中首先要去找到ListView的Item裡面產生的div，並且為這個div加上自訂且唯一的自訂屬性。那麼小喵就可以藉由這個自訂屬性，從jQuery中找到該項目，並進行顯示或隱藏的控制。這樣的需求要如何能夠呈現呢，請繼續看下去

找出ListView中Item內的第一個

ListView可以千變萬化，用各種不同的型態展現，小喵這次使用的是div的方式，從ListView的ItemTemplate找到裡面第一個物件，就是如下

<div style="background-color: #FFFFFF;">

這個是個div，因此我們希望在ItemDataBound的事件中，用程式幫這個div加上一個自訂的Attribute，並且給予指定的內容。我們希望達到的效果是

<div id="xxx" style="background-color: rgb(255, 255, 255);" myClass="MyClassAttr_xxx">

主要就是後面的myClass=”MyClassAttr_xxx”這個自訂的屬性

要由後端程式能夠處理，馬上想到的就是要加上個runat=server並且給予個Id

於是在aspx裡面的【<div style="background-color: #FFFFFF;">】

<div style="background-color: #FFFFFF;" runat="server" id="divLVItm">

ItemDataBound中程式加上自訂Attribute

接著，就是在ListView的ItemDataBound事件中，將自訂的Attrbute加上囉

由於用的是div，在ASP.NET中，div的runat=server是屬於【System.Web.UI.HtmlControls.HtmlGenericControl】

所以接著就是在ListView的ItemDataBound中，找到divLVItm，並且加上Attribute

'透過FindControl找到div
Dim divLVItm As System.Web.UI.HtmlControls.HtmlGenericControl = CType(e.Item.FindControl("divLVItm"), UI.HtmlControls.HtmlContainerControl)
'幫div加上Attrubute, SN代表某個不重複的順號
divPrgLI.Attributes.Add("myClass", "MyClassAttr_" & SN)

這樣處理後，再從Client端來觀察(透過IE9的F12開發者工具)，看到產生的內容就變成

<div id="divLVItm" style="background-color: rgb(255, 255, 255);" myClass="MyClassAttr_1">

jQuery的顯示隱藏處理

有了以上的處理，接著很容易的就可以透過jQuery找到想要控制的div並且設定隱藏或顯示囉

$(document).ready(function() {
    $('#btn1').click(function() {
        $('div[myClass="MyClassAttr_18"]').toggle();
    });
});

末記

這篇不算難，主要是一些基本的觀念綜合運用，觀念上會用到的是

1. 透過runat=server加上id讓html在server端可以用程式控制
2. div歸屬在System.Web.UI.HtmlControls.HtmlGenericControl
3. 透過自訂的屬性，讓jQuery來使用

小喵自己的筆記，也提供需要的人參考

^_^

以下是簽名：

• 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
• 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
  • http://converter.telerik.com/
  • http://www.carlosag.net/tools/codetranslator/
  • http://www.developerfusion.com/tools/convert/vb-to-csharp/