[ASP.NET]如何在ListView中Item裡面的div上加上自訂的Attributes

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

緣起

最近小喵剛好在寫個東西,裡面有個需求,就是想藉由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來使用

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

^_^

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)