• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 785
  • Last Modified:

How do I add div tags for each SQL server record returned and a image if that div is clicked?

How do I add div tags for each SQL server record returned and a image if that div is clicked?
0
cbrune
Asked:
cbrune
  • 2
1 Solution
 
Jerry MillerCommented:
I am not 100% sure what you need to do, but to display your SQL records I would use either ListView or a GridView. Then in the click event of the record (button, linkbutton, etc.) display the image associated with the record.
0
 
RouchieCommented:
You need to use a repeater then set the javascript logic via code behind for each row of data.  Here's a full working example but I'm afraid its VB.  You can convert it here if you need to...

http://www.carlosag.net/Tools/CodeTranslator/

<%@ Page Language="VB" Trace="true" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<script type="text/javascript">
		//<![CDATA[
		function showDiv(divId) {
			document.getElementById(divId).style.display = 'block';
			return false
		}
		//]]>
	</script>
</head>
<body>
	<form id="form1" runat="server">
		<div>
			<asp:Repeater ID="rpt" runat="server">
				<ItemTemplate>
					<hr />
					<div>
						<asp:HyperLink ID="lnk" runat="server" NavigateUrl="#">
							<asp:Image ID="img" runat="server" ImageUrl="someimage.jpg" />
						</asp:HyperLink>						
						<asp:Panel ID="pnl" runat="server" Style="display: none; border:1px solid gray">
							I will show if the image is clicked
						</asp:Panel>
					</div>
				</ItemTemplate>
			</asp:Repeater>
		</div>
	</form>
</body>
</html>

Open in new window


Imports System.Data.SqlClient
Imports System.Data

Partial Class _Default
	Inherits System.Web.UI.Page

	Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
		If Not Page.IsPostBack Then
			LoadData()
		End If
	End Sub

	Protected Sub LoadData()
		Dim dt As New DataTable
		dt.Columns.Add(New DataColumn("PersonName", GetType(System.String)))
		Dim dr As DataRow = dt.NewRow
		dr.Item("PersonName") = "Frank"
		dt.Rows.Add(dr)
		dr = dt.NewRow
		dr.Item("PersonName") = "Janet"
		dt.Rows.Add(dr)
		dr = dt.NewRow
		dr.Item("PersonName") = "Bob"
		dt.Rows.Add(dr)
		dr = dt.NewRow
		dr.Item("PersonName") = "Ted"
		dt.Rows.Add(dr)
		rpt.DataSource = dt
		rpt.DataBind()
	End Sub

	Protected Sub rpt_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles rpt.ItemDataBound
		Select Case e.Item.ItemType
			Case ListItemType.Item, ListItemType.AlternatingItem
				Dim pnl As Panel = CType(e.Item.FindControl("pnl"), Panel)
				Dim lnk As HyperLink = CType(e.Item.FindControl("lnk"), HyperLink)
				lnk.Text = e.Item.DataItem("PersonName")
				lnk.Attributes.Add("onclick", "showDiv('" & pnl.ClientID & "');")
		End Select
	End Sub

End Class

Open in new window

0
 
RouchieCommented:
Renders as the attached
Default.aspx.htm
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now