C# asp.net Image Gallery Querystring

Question

Right now I am using this code which is working but once the Image.aspx is not in the same directory as the images it is not working as in a 404. I would like to use the image.aspx universally for all images and keep it in the top directory if possible.

Listview Page:

   <div class="datapager">
   <asp:DataPager ID="DataPager1" runat="server" PageSize="20"  
   PagedControlID="Listview1" QueryStringField="PageID">
        <Fields>
            <asp:NextPreviousPagerField ButtonType="Button"

   ShowFirstPageButton="False" 
                ShowNextPageButton="False" ShowPreviousPageButton="True"   
   ShowLastPageButton="False" ButtonCssClass="PagerField" PreviousPageText="&#171;
   Previous" />
            <asp:NumericPagerField CurrentPageLabelCssClass="NumericPagerField" 
   ButtonCount="10" NextPageText="More" PreviousPageText="More" />
            <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="False" 
                ShowNextPageButton="True" ShowPreviousPageButton="False" 
   ShowFirstPageButton="False" ButtonCssClass="PagerField" NextPageText="Next&#187;"/>
        </Fields>
    </asp:DataPager>    
    </div>
    <div class="topadcell">Amazon Ad</div>
    <asp:listview ID="Listview1" runat="server" 
        onpagepropertieschanging="Listview1_PagePropertiesChanging" >
        <ItemTemplate>
        <li>
        <asp:HyperLink ID="lnkImage" Tooltip='<%# Eval("Name") %>' runat="server" 
    NavigateUrl='<%# Eval("Name","~/Image.aspx?Name=/Images/yeah/a/directory/{0}")%>' >
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Name", "~/Images/yeah/a 
        /directory/{0}") %> ' alt='<%# Eval("Name") %>' 
    Width="125" CssClass="picborder">
        </asp:Image></asp:HyperLink></li>
        </ItemTemplate>
        <LayoutTemplate>
      <ul ID="itemPlaceholderContainer" runat="server" class="gallery" >
        <li id="itemPlaceholder" runat="server" ></li>
      </ul>           
     </LayoutTemplate>
    </asp:listview>
         <div class="datapager">
     <asp:DataPager ID="DataPager2" runat="server" PageSize="20"  
     PagedControlID="Listview1" QueryStringField="PageID">
        <Fields>
            <asp:NextPreviousPagerField ButtonType="Button" 
     ShowFirstPageButton="False" 
                ShowNextPageButton="False" ShowPreviousPageButton="True" 
     ShowLastPageButton="False" ButtonCssClass="PagerField" PreviousPageText="&#171;
     Previous"/>
            <asp:NumericPagerField CurrentPageLabelCssClass="NumericPagerField" 
     ButtonCount="10" NextPageText="More" PreviousPageText="More" />
            <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="False" 
                ShowNextPageButton="True" ShowPreviousPageButton="False"  
     ShowFirstPageButton="False" ButtonCssClass="PagerField" NextPageText="Next&#187;"/>
        </Fields>
    </asp:DataPager>

The .cs page is:

        private void BindListImages()
{
    int i = 0;
    DirectoryInfo dir = new DirectoryInfo(MapPath("~/Images/yeah/a/directory/"));
    FileInfo[] file = dir.GetFiles();
    System.Collections.ArrayList list = new System.Collections.ArrayList();
    foreach (FileInfo file2 in file)
    {
        if (i <= 6000)
        {
            if (file2.Extension == ".jpg" || file2.Extension == ".jpeg" || 
file2.Extension == ".JPG" || file2.Extension == ".gif")
            {
                list.Add(file2);
                i++;
            }
        }

    }
    Listview1.DataSource = list;
    Listview1.DataBind();

}

public class Person
{
    public string Name { get; set; }
}
    protected void Listview1_PagePropertiesChanging(object sender, 
PagePropertiesChangingEventArgs e)
{

    DataPager1.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
    DataPager2.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
    BindListImages();


}

    protected void Page_Init(object sender, EventArgs e)
    {

        BindListImages();
    }

The image.aspx page is:

        <span class="imagewarpper">
<img id="fullsize" src='<%# Request.QueryString["Name"]%>'   
alt='<%=Request.QueryString["Name"] %>' title="<%= Request.QueryString["Name"] %>" 
class="picture"/>
</span>

score 0 · Answer 1 · answered Aug 17 '13 at 19:13

0

The quick and dirty solution would be to change the image.aspx file in order to make it absolutely point to the image file.

Let's say the images are stored in the /resources/img folder; the code would then look like this:

<span class="imagewarpper">
<img id="fullsize" src='/resources/img/<%# Request.QueryString["Name"]%>'   
alt='/resources/img/<%=Request.QueryString["Name"] %>'
title="<%= Request.QueryString["Name"] %>" class="picture"/>
</span>

Notice how src and alt parameters received some additional code that is composed and rendered together with the parameter name.

There are better ways to implement this, but I think this is clear enough to show you the necessary changes.

answered Aug 17 '13 at 19:13

OnoSendai

3,960
2
22
46

That would still mean editing image.aspx which I have that working as long as I add "~/Images/yeah/a/directory/" to the beginning of <%= Request.QueryString["Name"] %> on the image.aspx and then put image.aspx in the same directory as the images I am cool, once I try to put image.aspx in the main directory it breaks. I hope that makes sense? – BrianCizMe Aug 17 '13 at 20:13
Yes, it does make sense, but theoretically it would work without a hitch because of the leading-slash(/). Note that it's not the same as tilde-slash (~/), which you can check here (http://stackoverflow.com/questions/6424114/slash-vs-tilde-slash-in-style-sheet-path-in-asp-net). In that case, you may adapt your application root path to a site root path format. – OnoSendai Aug 17 '13 at 20:26
Thanks for all the help. I tried to your above method and the picture wasn't loading on the Image.aspx page either. I got this working by using this NavigateUrl='<%# Eval("Name","~/Image.aspx?Name=Images/yeah/a/directory/{0}")%>' > on the gallery page. I removed the / in the path in front of the Images/yeah/a/directory. You had mentioned "quick and dirty" and I would like this to be clean. Any suggestions. Right now my alt and title tags are now coming up with the full image path instead of just the image name as I would like. Thanks. – BrianCizMe Aug 31 '13 at 11:09
Thanks for all the help. I finally got around to fooling with this again and got it working. NavigateUrl='<%# Eval("Name", "~/Image.aspx?Image1=Images/Yeah/a/Directory/{0}&Name={0}") %>'. Now the image opens on the new page and I can use the query string on the new page to give the image a label and use the it for the page title, alt tag, image title {tooltip} and meta description for SEO. Now I have moved most of this to a master page and can use it for the hundreds of thousands of images on the site and run ads on the image page as well as have navigation. – BrianCizMe Oct 06 '13 at 14:02

score 0 · Answer 2 · answered Oct 06 '13 at 14:15

Got this figured out and thought that I would put this here for any one that is reading this and needs help. The code behind stays the same I only changes a few things on each page.

Listview Page:

        <ItemTemplate>
    <li>
    <asp:HyperLink ID="lnkImage" Tooltip='<%# Eval("Name") %>' runat="server" NavigateUrl='<%# Eval("Name", "~/Image.aspx?Image1=Images/yeah/a/directory/{0}&Name={0}") %>' >
    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("Name", "~Images/yeah/a/directory/{0}") %> ' alt='<%# Eval("Name") %>' Width="125" CssClass="picborder">
    </asp:Image></asp:HyperLink></li>
    </ItemTemplate>

The Image.aspx Page:

    <img id="fullsize" src='<%= Request.QueryString["Image1"]%>' alt='<%= Request.QueryString["Name"]%>' title='<%= Request.QueryString["Name"]%>' class="picture"/>

C# asp.net Image Gallery Querystring

2 Answers2