I want to create an ASP:ImageMap with a dynamic number of hot spots. I tried the code below, but it complains about having a repeater nested inside an image map. Any ideas on how to do this?
<asp:ImageMap ID="imgMap" runat="server" ImageUrl="~/circles.png"
HotSpotMode="PostBack">
<asp:Repeater runat="server" id="repeat" DataSource=<%#circles %>>
<asp:CircleHotSpot PostBackValue="<%#name %>"
Radius="<%#r %>"
X="<%#x %>"
Y="<%#y %>" />
</asp:Repeater>
</asp:ImageMap>
(Please ignore problems with databinding. I'll solve those later.)
You can't place a repeater inside another server tag. The way to dynamically add hotspots to an ImageMap is to dynamically add them in the code behind. You should be able to use something similar to this in your page load event:
CircleHotSpot hotSpot = new CircleHotSpot();
hotSpot.PostBackValue = "xxxx";
hotSpot.X = xx;
hotSpot.Y = yy;
hotSpot.radius = r;
imgMap.HotSpots.Add(hotSpot);
Please forgive the fact that the exact syntax is probably a little off as I haven't written this code in a while, but you should get the idea. If you would like to add multiple hotspots you can stick this block of code in a for/foreach loop and iterate over your list of items that you want to turn into hotspots.
Do you need to use a server control or could you do do it in regular HTML?
somthing like this:
<map id="map1">
<asp:Repeater ID="rep" runat="server">
<ItemTemplate>
<div align=center>
<area href="<%# DataBinder.Eval(Container.DataItem,"page")%>"
shape="circle"
coords="<%# DataBinder.Eval(Container.DataItem,"Coords")%>"
alt="area1" />
</ItemTemplate>
</asp:Repeater>
</map>
<img src="Images/HPIM1784.jpg" alt="bajs" usemap="#map1" />
Related
I want fetch some images from database and show that images through Image slider.
For that purpose I want to use repeater control.
Please can you say what is the easy way to make use of repeater for Image slider.
Here is a way tom implement the repeater for your slider :
<!--Your repeater with the <img /> tags for your slider (can be <li><img /></li> or other pattern)-->
<asp:Repeater ID="RptImages" runat="server" DataSourceID="SqlDataSourceMention">
<ItemTemplate>
<img src='<%# Eval("ImgPath") %>' alt="image-slider" />
</ItemTemplate>
</asp:Repeater>
<!--Your data source using stored procedure for this sample-->
<!--The "ConnectionString" attribute is set in your web.config file-->
<asp:SqlDataSource ID="SqlDataSourceImages" runat="server" ConnectionString="<%$ ConnectionStrings:YourconnectionString %>"
SelectCommand="YourStoredProcedureName" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
This will output a list of tags with the src attribute bound on the "ImgPath" column of your stored procedure result.
Conditions :
I have two tables,
category(id_kat,name_kat)
book(id_book,id_kat,name_book)
id_kat has a child and parent relations.
I'm a little bit confused using ASP.NET, especially when passing value between pages.
Now, i'm showing the category's datas with
<asp:listview id="listview1" runat="server" datakeynames"id_kat" datasourceID="sdskat">
//FYI sdskat is datasource for category table
<itemtemplate>
<li>
<asp:linkbutton id="linking" runat="server" ><%# Eval("name_kat") %></asp:linkbutton>
</li>
</itemtemplate>
</asp:listview>
The problem is, i wanted to pass "id_kat" value when i click the hyperlink. (but redirected to self page).
I want it as a query string (or another way if able).
Thanks a lot.
If you're linking to the same page with different query string parameters, you only need to include ? and after.
<%# Eval("name_kat") %>
You could use <asp:hyperlink id="linking" runat="server" ><%# Eval("name_kat") %></asp:hyperlink> instead. You can then add your url in the navigateURL attribute and append your id_kat on there.
Something like this should work:
<asp:hyperlink id="linking" runat="server" navigateURL="~/page.aspx?id_kat=<%# Eval('id_kat') %>" ><%# Eval("name_kat") %></asp:hyperlink>
the <asp:hyperlink> tag is essentially the tag but using a server side control.
If you have to use a linkbutton then in your code behind you can append the id_kat to the querystring and then response.redirect(url) to the new page.
Why not use a regular anchor?
<a href='foo.aspx?id=<%# Eval("id_kat") %>'><%# Eval("name_kat") %></a>
Hi can anyone help me regarding my problem. I assigned a dynamic Id into the ID property of an image control. The problem is I got an error saying "form tag is not well formed". I replaced the double quote into a single or removed those quotes but I got the same error. How can I resolved this issue? By the way I used c# language.
<img ID="<%# DataBinder.Eval(Container.DataItem, "Id")%>" runat="server" />
Make this
<img ID="<%# DataBinder.Eval(Container.DataItem, "Id")%>" runat="server" />
to this:
<img ID='<%# DataBinder.Eval(Container.DataItem, "Id")%>' runat="server" />
Update: apparently it's indeed not possible to do this. I tried in a test application further with both the html image and Image server control. After thinking a bit further, and taking some coffee, it kind of makes sense that an ID cannot be set as such. How would you set properties on something without an ID in codebehind?
An alternative way what you can do however is this:
<form id="form1" runat="server">
<div>
<asp:PlaceHolder runat="server" ID="phTest"></asp:PlaceHolder>
</div>
</form>
and in codebehind:
HtmlImage image = new HtmlImage();
image.ID = "SomeRandomId";
image.Src = "urltosomeimage";
phTest.Controls.Add(image);
I got a similar problem and I solved it like this:
<img ID='<%# DataBinder.Eval(Container.DataItem, "Id")%>' runat="server" />
The reason for this is that the expression between <%# %> cannot be evaluated if it is not in single quotes.
How about this?
<asp:img ID='<%# DataBinder.Eval(Container.DataItem, "Id")%>' runat="server" />
or try to remove the runat="server" since your img tag is not a server control
If you're using .NET 4.0 set ClientIDMode=Static or change ID not in markup but in code-behind.
And use instead of if you need access it from code-behind.
Is there a way to express
<% objControl.ObjProp=ObjVar; %>
<my:Control ID="objControl" runat="server" />
As something like this, in one line? And without passing ObjVar as a string?
<my:Control ID="objControl" runat="server" ObjProp=ObjVar />
Unless you're in a databound context, no there's no simple way to do this. If it is a databound context (Like in a repeater/gridview) you can simply go ObjProp='<%# ObjVar %>', but outside that context you can't do it inline unfortunately.
use it like
<my:Control ID="objControl" runat="server" ObjProp="<%# ObjVar %>" />
As fyjham has mentioned, you need to do this in a databound context with the <%# %> syntax. If you are trying to set the property dynamically then your other option is to set it within the server side parent's onload code behind method.
What is ObjVar? If it's a static value, you can just add the attribute tag to the control element like so....
<my:Control ID="objControl" runat="server" MyCustomBooleanProperty="true" />
If it's a member variable of the page containing the control, then I'd do so in the code behind...
protected Page_Init()
{
this.objControl.ObjProp = this.ObjVar;
}
If you're databinding to the control, then the others are correct where you use the databinding context.
<my:Control ID="objControl" runat="server" ObjProp=<%#Eval("ObjVar")%> />
Ok I have been working on this gallery for some time and I keep getting little tidbits. It is now time to finish it off. I have a datalist which binds to an array of *.aspx image urls that contain a thumbnail id that is sent through the url. I now need to implement an onclick event, that when a user clicks on a photo, it brings them to the actual picture.
example url:
(thumbnail) = ~/UserPages/Photo/GetThumbnail.aspx?id=7
(actualpic) = ~/UserPages/Photo/GetPhoto.aspx?id=7
What I need: How do i get it so that each photo has an onclick event? I tried adding onclick to the imag src but it didn't work. It is difficult because it is not an actual image control, they exist inside a datalist. I also need to know how to extract the thumbnail url when getting clicked so that I can grab the id and redirect to the actual picture. Help please!
<asp:DataList ID="dlImages" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<img src="<%# ResolveUrl((string)Container.DataItem) %>" />
</ItemTemplate>
</asp:DataList>
Code Behind:
dlImages.DataSource = ImageUrls;
dlImages.DataBind();
Can you wrap it in an a tag?
<ItemTemplate>
<img src="<%# ResolveUrl(String.Format("~/UserPages/Photo/GetThumbnail.aspx?id={0}", Container.DataItem)) %>" />
</ItemTemplate>
This assumes your DataItem contains only the ID.
Try:
<ItemTemplate>
<img src="<%# ResolveUrl((string)Container.DataItem) %>" onclick="doSomething(this)" />
</ItemTemplate>
After that you can simply implement a doSomething function that parses the id out of "this.src" and do whatever you want with it.