My application is an image gallery and with a Repeater control i'm listing the thumbnails (that's in a separate folder, apart from the full scale images). When clicking on a thumbnail a full scale image should be shown in the Image control "fullSizeImage" and a query string should be created which (with a GET of the page) shows that specific image in full scale.
The code for the query string is done, but the problem is that I don't have a clue where to put it (the creation of the query), because the HyperLink control doesn't support event clicks. Is there a way to use for example Repeater ItemCommand, or how could I accomplish what I want here?
Thanks!
from default.aspx:
<asp:Image ID="fullSizeImage" runat="server" />
<asp:Repeater ID="ImageRepeater" runat="server" DataSourceID="" >
<ItemTemplate>
<asp:HyperLink ID="ImageHyperLink" NavigateUrl='<%# Eval("Name", "~/Images/{0}") %>' runat="server" CssClass="thumbnails" >
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Name", "~/Images/Thumbnails/{0}") %>' CssClass="thumbnail" />
</asp:HyperLink>
</ItemTemplate>
</asp:Repeater>
from code behind:
protected void Page_Load(object sender, EventArgs e) {
var directory = new DirectoryInfo(Gallery.PhysicalApplicationPath + "/Images");
var theFiles = directory.GetFiles();
ImageRepeater.DataSource = theFiles;
ImageRepeater.DataBind();
var dataName = Request.QueryString["name"];
fullSizeImage.ImageUrl = dataName;
}
the creation of the query string (that I don't know where to put):
string str = ImageUrl; <- the url of the clicked image
Response.Redirect("default.aspx?name=" + Server.UrlEncode(str);
This works with me
<asp:HyperLink ID="ImageHyperLink" NavigateUrl='<%# "~/default.aspx?name=" + Server.UrlEncode(Eval("Name","~/Images/{0}")) %>' runat="server" CssClass="thumbnails" >
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Name", "~/Images/Thumbnails/{0}") %>' CssClass="thumbnail" />
</asp:HyperLink>
In the code behind you can set up a method tied to the Repeater's ItemDataBound event. In that method you can retrieve the current file, find the HyperLink, and set the link's NavigateUrl to be the string you are generating. Something like the following:
ImageRepeater.ItemDataBound += new RepeaterItemEventHandler(ImageRepeater_ItemDataBound);
private void ImageRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
[File] f = (File)e.Item.DataItem;
HyperLink ImageHyperLink = (HyperLink)e.Item.FindControl("ImageHyperLink");
string str = f.ImageUrl;
ImageHyperLink.NavigateUrl = "default.aspx?name=" + Server.UrlEncode(str);
}
Related
I am trying to display a list of images and on clicking any image, it will get replaced by an "X" image.
So far, I have been able to display the list, but I am not able to make them clickable.
C# code
protected void Page_Load(object sender, EventArgs e)
{
string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Cards"));
List<String> images = new List<string>(filesindirectory.Count());
foreach (string item in filesindirectory)
{
images.Add(String.Format("~/Cards/{0}", System.IO.Path.GetFileName(item)));
}
RepeaterImages.DataSource = images;
RepeaterImages.DataBind();
}
ASPX Content
<asp:Repeater ID="RepeaterImages" runat="server">
<ItemTemplate>
<asp:Image ID="currentImage" runat="server" ImageUrl='<%# Container.DataItem %>' onclick='changeImage()'/>
</ItemTemplate>
</asp:Repeater>
I am using an ASP.NET Dynamic Data Entities web application which contains a QueryableFilterRepeater server control inside the content placeholder on page List.aspx, when I execute the website, the filter control shows all the filters (Label Name along with the corresponding Drop Down) vertically.
Is there any way we can change the layout and display the filters horizontally?
Please find the .aspx code below
<asp:QueryableFilterRepeater runat="server" ID="FilterRepeater">
<ItemTemplate>
<asp:Label runat="server" Text='<%# Eval("DisplayName") %>' OnPreRender="Label_PreRender" />
<asp:DynamicFilter runat="server" ID="DynamicFilter" OnFilterChanged="DynamicFilter_FilterChanged" />
</ItemTemplate>
</asp:QueryableFilterRepeater>
The corresponding .cs file code:-
protected void Label_PreRender(object sender, EventArgs e)
{
Label label = (Label)sender;
DynamicFilter dynamicFilter = (DynamicFilter)label.FindControl("DynamicFilter");
QueryableFilterUserControl fuc = dynamicFilter.FilterTemplate as QueryableFilterUserControl;
if (fuc != null && fuc.FilterControl != null)
{
label.AssociatedControlID = fuc.FilterControl.GetUniqueIDRelativeTo(label);
}
}
protected void DynamicFilter_FilterChanged(object sender, EventArgs e)
{
GridView1.PageIndex = 0;
}
Need suggestions.
Thanks in advance.
I usually wrap the control in a span element and then use CSS to style it the way that i want:
<asp:QueryableFilterRepeater runat="server" ID="FilterRepeater">
<ItemTemplate>
<span class="filter">
<asp:Label runat="server" Text='<%# Eval("DisplayName") %>' OnPreRender="Label_PreRender" />
<asp:DynamicFilter runat="server" ID="DynamicFilter" OnFilterChanged="DynamicFilter_FilterChanged"/>
</span>
</ItemTemplate>
I'm a rookie attempting to build an e-commerce site. My pager control that I use to display page numbers uses a repeater, which looks pretty dull. Can anyone show me how to programmatically change the background color of the page number that the user has selected? Or programmatically connect it to a CSS style sheet block of code that does it. Example: change the color behind the number to an orange square with a black border around it. Thanks.
Current code :
<%# Control Language="C#" AutoEventWireup="true" CodeFile="Pager.ascx.cs" Inherits="UserControls_Pager" %>
<p> Page <asp:Label ID="currentPageLabel" runat="server" />
of <asp:Label ID="howManyPagesLabel" runat="server" /> |
<asp:HyperLink ID="previousLink" Runat="server">Previous</asp:HyperLink>
<asp:Repeater ID="pagesRepeater" runat="server">
<ItemTemplate>
<asp:HyperLink ID="hyperlink" runat="server" Text='<%# Eval("Page") %>'
NavigateUrl='<%# Eval("Url") %>' />
</ItemTemplate>
</asp:Repeater>
<asp:HyperLink ID="nextLink" Runat="server">Next</asp:HyperLink>
</p>
UserControl ASPX:
<p> Page <asp:Label ID="currentPageLabel" runat="server" /> of
<asp:Label ID="howManyPagesLabel" runat="server" /> |
<asp:HyperLink ID="previousLink" Runat="server">Previous</asp:HyperLink>
<asp:Repeater ID="pagesRepeater" runat="server"
onitemdatabound="pagesRepeater_ItemDataBound"> <ItemTemplate>
<asp:HyperLink ID="hyperlink" runat="server" Text='<%# Eval("Page") %>'
NavigateUrl='<%# Eval("Url") %>' /> </ItemTemplate>
</asp:Repeater>
<asp:HyperLink ID="nextLink" Runat="server">Next</asp:HyperLink> </p>
UserControl Code behind:
public class p
{
public string Page { get; set; }
public string Url { get; set; }
public p(string url, string page)
{
Page = page;
Url = url;
}
}
protected void Page_Load(object sender, EventArgs e)
{
List<p> arr = new List<p>();
arr.Add(new p("a.aspx", "a"));
arr.Add(new p("b.aspx", "b"));
pagesRepeater.DataSource = arr;
pagesRepeater.DataBind();
}
protected void pagesRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
HyperLink lnk = (HyperLink)e.Item.FindControl("hyperlink");
string[] URL = Request.Url.Segments;
string currentUrl = URL[URL.Length - 1];
if (lnk != null)
{
string lnkUrl=lnk.NavigateUrl;
if (lnkUrl == currentUrl)
{
lnk.BackColor = Color.Orange;
lnk.Style.Add("border", "1px solid #000000");
lnk.Style.Add("background-color", "orange");
lnk.Style.Add("text-decoration", "none");
}
}
}
You can do that through client side Jquery, for an example if your control that you want to color has an ID "MyControl"
$("#MyControl").css( "color", "red" ),
you don't have to change it from code behind.
Call this code in the document ready of your page as following:
<script>
$(document).ready(function() {
$("#MyControl").css( "color", "red" )
});
</script>
remember its always better to put your script code at the end of the page as it makes your page run faster.
i want to get image url on clicking the image from database in repeater
my database contains(id,url)
my repeater code is:
<asp:Repeater runat="server" ID="repeater" >
<ItemTemplate >
<asp:ImageButton runat="server" Width="200px" Height="200px" ImageUrl='<%#Eval("url") %>' OnCommand="Image_Click" CommandName="ImageClick" CommandArgument='<%#Eval("url") %>' />
</ItemTemplate>
</asp:Repeater>
my .cs code is
protected void Image_Click(object sender, CommandEventArgs e)
{
if (e.CommandName == "ImageClick")
{
string a=e.CommandArgument.tostring();
responce.write(a);
}
}
you can do in ImageClick
((ImageButton)sender).ImageUrl
to get the url of the clicked button
Cast sender to ImageButton and read its ImageUrl property.
Also, is there a reason you are using command instead of handling ImageButtons click event?
Both Vladimir and Guigui answers are prefer way of accessing URL of an image button.
If you also want ID value in addition to URL, you can store multiple values into CommandArgument separated by comma.
<asp:ImageButton runat="server"
ImageUrl='<%#Eval("url") %>'
OnCommand="Image_Command"
CommandName="ImageClick"
CommandArgument='<%# Eval("Id")%> + "," + Eval("url") %>' />
protected void Image_Command(object sender, CommandEventArgs e)
{
if (e.CommandName == "ImageClick")
{
string[] commandArgs = e.CommandArgument.ToString()
.Split(',');
string id = commandArgs[0];
string url = commandArgs[1];
}
}
I want to pass some dynamic information from the listview to UserControl, but I guess I'm missing something.
.aspx page:
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource"
DataKeyNames="id_Image">
<ItemTemplate>
<uc1:Info Name_Lbl='<%# Bind("Name") %>' Description_Lbl='<%# Bind("Description")%>' ID="info1" runat="server" />
</ItemTemplate>
</asp:ListView>
.ascx file:
Name:
<asp:Label ID="NameLabel" runat="server" />
Description:
<asp:Label ID="DescriptionLabel" runat="server" />
.ascx codebehind file:
public string Name_Lbl { get; set; }
public string Description_Lbl { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
NameLabel.Text = Name_Lbl;
DescriptionLabel.Text = Description_Lbl;
}
Everything is working fine if Im trying to get value from string text like:
<uc1:Info Name_Lbl="Name" Description_Lbl="Description" ID="info1" runat="server" />
But when I'm trying to get value from Datasource, the string values in usercontrol are "null"
Can anyone see what I'm doing wrong? Thanks, Jim Oak
DataBinding occurs a lot later in the Control Life cycle than Load.
You assign your text on Load, but your control only receives the text on DataBind
To fix this you can set your text OnPreRender. This occurs after DataBind
protected override void OnPreRender(EventArgs e)
{
NameLabel.Text = Name_Lbl;
DescriptionLabel.Text = Description_Lbl;
}
Everything looks fine in your code just check the code line:
<uc1:Info Name_Lbl='<%# Bind("Name") %>' Description_Lbl='<%# Bind("Description"%>' ID="info1" runat="server" />
You are missing the closing bracket ")" against Description_Lbl. It should be:
<uc1:Info Name_Lbl='<%# Bind("Name") %>' Description_Lbl='<%# Bind("Description")%>' ID="info1" runat="server" />