الفكرة هي أنه مع ظهور الـ HTML 5 ظهرت بعض الخصائص الجديدة التي لم تكن موجود في الإصدارات السابقة من HTML. و من هذه الخصائص الجديدة Data attribute , وهذه الخاصية لها إستخدامات كثيرة و متعدة , لكن حبيت أجربها من ASP.net Cotrols مثل الـ Textbox و الــ Image Cotrols
في المثال التالي إستخدمت Repeater من أجل إظهار الصور و إستخدمت html link button من أجل إظهار محتويات الصور
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<div id="gallery">
<ul id="dirimgs" class="thumbnails">
</HeaderTemplate>
<ItemTemplate>
<li>
<a id="simg" href="#imgDetails" data-toggle="modal" role="button" data-id='<%# DataBinder.Eval(Container.DataItem, "imgpath")%>' data-imgname ="<%# DataBinder.Eval(Container.DataItem, "imgpath")%>" >
<img id="Img1" src=' <%# Eval("imgpath")%>' class="thumbnail" height="100" width="100" runat="server" />
</a>
<asp:CheckBox ID="chk1" runat="server" />
<asp:Label ID="lnk" runat="server" Text='<%# eval("imgname") %>' Style="visibility: hidden;" />
</li>
</ItemTemplate>
<FooterTemplate>
</ul></div>
</FooterTemplate>
</asp:Repeater>
الرجاء ملاحظة الـ data-toggle و data-id , data-imgname
هنا نكتب data- ثم نظفيف إسم أو معرف نستخدمة لحفظ البيانات فمثلاً data-id إستخدمته من أجل مسار الصورة ثم بإستخدام الـ Jquery يمكن تمريره إلى الـ Asp.net control
------------------------------------------------------------------------------------------------------------------------------------------------------
و لإظهار متحويات الصورة إستخدمت Jquery مع twitter bootstrap modal
أولا الـ Jquery
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" >
$(function () {
$('#simg').on('click', function () {
var dd = $(this).data("id");
var iname = $(this).data("imgname");
$('#<%=img1.ClientID%>').attr("src", dd.replace("~/","../"));
$("#imgtitle").text (iname);
});
});
</script>
ثانياً الـ twitter boostrap modal
<!-- Modal windows -->
<div id="imgDetails" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3>معلومات الصورة</h3>
</div>
<div class="modal-body">
<asp:Image ID="img1" runat="server"/>
<br />
<label id="imgtitle" class ="input-xlarge"></label>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
أتمنى أن تكون الفكرة و ضحت, و أعتذر مسبقاً عن أي أخطاء