get first picture of specified album

sophia · #1 (**permalink**) July 29th, 2012, 01:00 PM

Hello Imar,

On a page I am filtering pictures according albums. I want that in a repeater only first picture be shown for a selected album from dropdownlist, but I am getting eror

"An invalid data source is being used for Repeater2. A valid data source must implement either IListSource or IEnumerable."

My code is below

Code:

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataTextField="Name" DataValueField="Id" AppendDataBoundItems="true">
      <asp:ListItem Value="">Select Plot</asp:ListItem>
</asp:DropDownList>

<asp:Repeater ID="Repeater2" runat="server">
<ItemTemplate>
      <asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("SmallImageUrl") %>'/>
</ItemTemplate>
</asp:Repeater>

and code behind is as below

Code:

protected void Page_Load(object sender, EventArgs e)
{
        if (DropDownList1.SelectedValue != string.Empty)
        {
            using (ASPNETDBEntities myEntities = new ASPNETDBEntities())
            {
                int albumId = Convert.ToInt32(DropDownList1.SelectedValue);
                var myPics = (from pic in myEntities.Pictures
                              where pic.AlbumId == albumId
                              select pic).FirstOrDefault();
                Repeater2.DataSource = myPics;
                Repeater2.DataBind();
            }
        }
}

Please tell me what I am doing wrong and how I can get only first picture in selected album

Many thanks

Imar · #2 (**permalink**) July 29th, 2012, 02:15 PM

Hi there,

Your LINQ code is fine, but you cannot use a Repeater to display its results. As its name implies, it's used to display multipe items, while First gives you a single instance. You have a few options:

1. Add this single instance to a list, such as a List<Picture> and use that for the DataSource. Feels a bit odd though as you really only have single instance.

2. Use a different control such as a DetailsView which si designed to display a single record at a time.

3. Don't use a Data Control, but a simple Image control instead and assign its ImageUrl from code behind directly.

Hope this helps.

Cheers,

Imar

sophia · #3 (**permalink**) July 30th, 2012, 02:41 PM

Hello Imar,
I have replaced Repeater with Details View and now it is not giving error.
But I am not getting the result what I want.

code behind is

Code:

int albumId = Convert.ToInt32(DropDownList1.SelectedValue);
var myPic = new List<Picture> { (from pic in myEntities.Pictures
                                                  where pic.AlbumId == albumId
                                                  select pic).FirstOrDefault()};

                DetailsView1.DataSource = myPic;
                DetailsView1.DataBind();

and the markup code is

Code:

<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" AutoGenerateRows="false">
        <Fields>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# Eval("LargeImageUrl") %>' ClientIDMode="Static"><asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("SmallImageUrl") %>' /></asp:HyperLink>
                </ItemTemplate>
            </asp:TemplateField>
        </Fields>
    </asp:DetailsView>

is it that what you meant?

In the second repeater I actually wanted to hyperlink the first image in selected album.

Without any databound controls in simple html I have few images which are connected to first image by ID attribute and by applying some javascript, a cool effect is given.

Code:

<a href="bigimage1" rel="zoom-id:hyperlink2;" rev="mediumimage1"><img src="smallimage1"/></a>

<a href="bigimage2" rel="zoom-id:hyperlink2;" rev="mediumimage2"><img src="smallimage2"/></a>

<a href="bigimage3" rel="zoom-id:hyperlink2;" rev="mediumimage3"><img src="smallimage3"/></a>


<a href="bigimage1" id="hyperlink2" rel="zoom-width:300px; zoom-height:200px;"><img src="smallimage1"/></a>

I want to get all these values dynamically so I used repeater and detailsview

Code:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="EntityDataSource1">
            <ItemTemplate>
                <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("LargeImageUrl") %>' rel="zoom-id:HyperLink2" rev='<%# Eval("MediumImageUrl") %>'><asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("SmallImageUrl") %>' /></asp:HyperLink>
            </ItemTemplate>
            </asp:Repeater>

<asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px" AutoGenerateRows="false">
        <Fields>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl='<%# Eval("LargeImageUrl") %>' ClientIDMode="Static" rel="zoom-width:300px; zoom-height:200px;"><asp:Image ID="Image2" runat="server" ImageUrl='<%# Eval("SmallImageUrl") %>' /></asp:HyperLink>

But it is not producing same result. where might be error?

Many thanks

Imar · #4 (**permalink**) July 30th, 2012, 02:45 PM

>> But I am not getting the result what I want.

And what is the result you're getting?

Also,mwhy don't you ditch the DetailsView and simply use the HyperLink and image controls directly? Much simpler....

Imar

sophia · #5 (**permalink**) July 30th, 2012, 03:17 PM

Quote:

why don't you ditch the DetailsView and simply use the HyperLink and image controls directly

How I can bind the hyperlink and image controls collectively with the single picture? how I apply datasource property.
I want to assign LargeImageUrl property to HyperLink's NavigateUrl property and SmallImageUrl property to Image's ImageUrl property for a single Picture (First picture for every selected album).

please give example...

Imar · #6 (**permalink**) July 30th, 2012, 03:23 PM

Just do it in code behind. E.g.

myImage.ImageUrl = myPictureSmallIImageUrl;

Where myPicture is a single picture, not a list...

Imar

sophia · #7 (**permalink**) July 31st, 2012, 02:19 PM

Quote:

myImage.ImageUrl = myPictureSmallIImageUrl;

Thanks, it is working. Actually I used such code many months ago but did not remember. You made it recall again, Thank you.

Quote:

And what is the result you're getting?

By using simple html tags <a> and <img> I am writing this code manually (notice rev property with its value started by ../)

Code:

<a href="../images/bigimage1" rel="zoom-id:hyperlink2;" rev="../images/mediumimage1"><img src="../images/smallimage1"/></a>

But when I wanted to automate this procedure by using repeater then this functionality breaks

Code:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="EntityDataSource1">
            <ItemTemplate>
                <asp:HyperLink runat="server" NavigateUrl='<%# Eval("LargeImageUrl") %>' rel="zoom-id:HyperLink2" rev='<%# Eval("MediumImageUrl") %>'><asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("SmallImageUrl") %>' /></asp:HyperLink>
            </ItemTemplate>
            </asp:Repeater>

As I don't see rev property for server control HyperLink so I manually wrote it. When parsed and I saw the source code of page then it was different than the html controls code. It generates the below code...

Code:

<a id="ContentPlaceHolder1_Repeater1_HyperLink1_0" href="../images/bigimage1" rel="zoom-id:hyperlink2;" rev="~/images/mediumimage1"><img src="../images/smallimage1"/></a>

Now again notice rev property, it starts with ~/, which is getting me error. I want it to be started from ../ (../../ according folder structure).

So how I can manipulate rev property and fix this problem.

Many Thanks

Imar · #8 (**permalink**) August 2nd, 2012, 03:34 AM

Hi there,

Since rev is not a known property, the path you assign to it is not converted for you. A few solutions:

1. Don't use ~/ but use / as that's a plain client URL

2. Use ResolveUrl() to convert the ~ to the proper root path.

3. In code behind hook into each item, and add the rev attribute to the control's Attributes collection.

All of this is a bit too off-topic for the book's forum category so if you have follow up questions, please start a new thread in an appropriate category: http://p2p.wrox.com/asp-net-4-539/

Cheers,

Imar

sophia · #9 (**permalink**) August 2nd, 2012, 02:42 PM

Thanks Imar,
for temporarily I have used another field AlternateImageUrl and assigning values started from ../

I will later on go to 2nd or 3rd option you have suggested.

Thanks once again

Need to download code?

Navigation