Using LINQ a Listview to display an image

digink · April 23rd, 2010, 09:03 PM

I just had a question,

I am trying to write some code to display an image in a listview I have that is bound to a linq data source.

My linq data source is bound to a table that is has a value as a FK in another table that contains the URL for images, what I want to do is for each value that is listed in the list view to show the first correlating picture. Here are the code snippets to better illustrate what I am trying to do.

Code:

Partial Class MyBasePage
  Inherits BasePage

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    Using myDataContext As New PrimaryLINQDataContext

      Dim resortPicture As New Image

      Dim firstPicture = (From r In myDataContext.Resorts, p In myDataContext.Pictures _
                          Where r.ResortID = p.ResortID _
                          Select p.ImageUrl).First()

      resortPicture.ImageUrl = firstPicture

    End Using

  End Sub
End Class

With that I am trying to find the resulting picture for every record that relates to something in the resorts table with matching resortID's

Now what I am having trouble with is trying to set an image inside the listview to display this, what I've come up with is this but it keeps throwing errors:

Code:

    <ItemTemplate>
      <li style="">
        <asp:Image id="Image1" runat="server" ImageUrl='<%# Eval("resortPicture") %>' />
        <br />
        SalePrice:
        <asp:Label ID="SalePriceLabel" runat="server" Text='<%# Eval("SalePrice") %>' />
        <br />
        RentPrice:
        <asp:Label ID="RentPriceLabel" runat="server" Text='<%# Eval("RentPrice") %>' />
        <br />
      </li>
    </ItemTemplate>

I realize this is probably not correct but I was trying to reference the book for examples and am still coming up short, any insight would be appreciated!

Imar · April 24th, 2010, 04:19 AM

Hi there,

The ListView is designed to work with a collection of items. In your Page_Load, you're retrieving a single item. Where does your ListView get its data from? Can you elaborate a bit about your database structure and what you're trying to accomplish?

Imar

digink · April 24th, 2010, 11:32 AM

Sure,

My list view gets the data from a LINQDataSource on the page that is receiving 2 values from a Resorts table (RentPrice and Sale Price).

The DB structure is I have a Resorts table that store information about resorts like ResortID, ResortName, and resortlocation. Then I have a Listings table that ties to the resorts table with ResortID as a FK and other attributes for listings that tie to that specific resort. Lastly I have a Pictures table that also ties with the ResortID Forein Key and stores image URLs for images that are uploaded using your FileUpload method in the book.

Essentially what I am trying to accomplish here is for each listing you can define it as a HotProperty in the Listings table and the LINQDataSource is setup to pull values from the Listings table where the HotProp value is = to True. All I want to do is also receive the FIRST correlating picture from the Pictures table the ties to the ResortID and eventually also get the ResortName that ties to that ResortID.

I hope this helps, thanks for your help as this has really been causing me some headache!

Imar · April 24th, 2010, 12:52 PM

Hi there,

You really have to be more specific. With descriptions such as "a table that ties to another table on a foreign key", you're likely to get answers like: "you can us a LINQ query to join the two and use FirstOrDefault to grab the first one" which is pretty useless.

How about posting your data model and the code you have so far? And what about describing your feature set more clearly? You understand your domain so you understand stuff like

Quote:

All I want to do is also receive the FIRST correlating picture from the Pictures table the ties to the ResortID and eventually also get the ResortName that ties to that ResortID.

but I don't.

Posting a SQL CREATE script with some INSERT statements to create some test records, the code you have so far and a clear description of what you want to do would make things a lot easier.

Cheers,

Imar

digink · April 24th, 2010, 01:48 PM

Sorry about that, let me try to be as specific as I can. If you feel I'm leaving anything else out let me know.

Here is a picture of the DBML set up: http://www.flickr.com/photos/29514260@N02/4548067631/

Now I have a management section for this project, and there you have a page that uses a SQL connection and a details view to insert records into the Resorts table. I have another similar page with a SQL connection that does the same for listings similar to things you illustrate in your book. Lastly I have a page that allows you to upload pictures to the Pictures table but does so by how you do it in your book, first uploading the path to a location within the site, In my case ResortPictures, and then just saving the ImageURL in the DB. If you need me to post any code snippets of these please let me know, I don't think you'll need them to see what I want to do but by all means let me know if you do.

Now what I want to do is have a control that uses something like a Listview to display records from the Listings table of the Sale Price and/or Rent Price of a listing record that has been labled as a hot property (which is a boolean value within the table). So far I can get it to display all the hot property sale/rent prices but I am having trouble displaying the correlating images which are in the picture table and the resort name in the resort table which are all linked with ResortID as shown in the diagram above.

I would post the code I have now for this control but I've edited it feverishly to try to get it to work and it is no where near what I had posted early and still doesn't remotely work.

So in summation what I want to do is take a record from the Listings table and view its Sale and/or Rent price if it is marked as a hotprop. I also want to find the FIRST picture that has the same ResortID as the listing (you could have many pictures for a given resort) and also find the ResortName linked to that ResortID from the Resorts table.

I think posting my krap code would only be more confusing so unless you want me to do it I'll leave it out. Hopefully the table diagram will give you more of what you're looking for without me posting SQL create and insert statements but let me know if you'd like those.

Edit: everything I have done up to this point has been modifications to the examples in your book to apply it to my purposes. Also Imar if you'd like I would not mind PMing you all of my code if you want to look at it, please let me know if that would help as I really do want to get this project completed and this would help me in setting up another page I need to do after I have figured this out.

Imar · April 24th, 2010, 03:19 PM

Quote:

I think posting my krap code would only be more confusing so unless you want me to do it I'll leave it out. Hopefully the table diagram will give you more of what you're looking for without me posting SQL create and insert statements but let me know if you'd like those.

Sure. But like I said, without something to play with or debug, the answers remain vague. I hope you understand I am not going to recreate a database and schema based on the LINQ model, populate it with data, write my own ListView and then try to understand your requirements...

So, let's turn it around. Based on the PlanetWrox sample, the following solution gives you a list of all the Albums and for each album, the first picture. You can add where clauses where necessary:
ASP Page / ListView

Code:

<asp:ListView ID="ListView1" runat="server">
  <LayoutTemplate>
    <div id="itemPlaceHolder" runat="server">
    </div> 
  </LayoutTemplate>
  <ItemTemplate>
    Name <asp:Label ID="LabelName" Text='<%# Bind("Name") %>' runat="server"></asp:Label><br />
    First image<asp:Image ID="Image1" ImageUrl='<%# Bind("ImageUrl") %>' runat="server"></asp:Image><br />
  </ItemTemplate>
</asp:ListView>

Code Behind:

Code:

protected void Page_Load(object sender, EventArgs e)
{
  using (PlanetWroxDataContext myContext = new PlanetWroxDataContext())
  {
    var allAlbumsWithFirstImage = from i in myContext.PhotoAlbums
                                                 select new
                                                 {
                                                    i.Id,
                                                    i.Name,
                                                    ImageUrl = i.Pictures.First().ImageUrl
                                                  };
    ListView1.DataSource = allAlbumsWithFirstImage;
    ListView1.DataBind();
  }
}

Does that help?

Imar

Imar · April 24th, 2010, 03:25 PM

Almost missed the edit:

Quote:

Also Imar if you'd like I would not mind PMing you all of my code if you want to look at it

Sure; send me a message through my personal web site and I'll reply so you have my address.

Cheers,

Imar

digink · April 24th, 2010, 03:34 PM

I will test that out tonight, meanwhile I sent you an email from your personal website and once you reply I will also send over my project so you can get a better idea of what I am referring to.

Thanks again

Imar · April 24th, 2010, 05:40 PM

You're welcome Good luck....

Imar

digink · April 25th, 2010, 09:28 PM

I finally got it to work based off of your last example!

Thanks for your help Imar, if anyone is curious I used the following code which is essentially what Imar has above just based off my database setup:

Code:

    Using myDataContext As New PrimaryLINQDataContext


      Dim firstPicture = From p In myDataContext.Pictures.ToList(), r In myDataContext.Resorts.ToList() _
                         , l In myDataContext.Listings.ToList() Where p.ResortID = r.ResortID _
                         And l.ResortID = r.ResortID AndAlso l.HotProp = True _
                         Select l.SalePrice, l.RentPrice, r.ResortName, p.ImageUrl

      ListView1.DataSource = firstPicture
      ListView1.DataBind()

    End Using

Except now I am just having a problem where if a resort has more than 1 image it displays the record twice with both images, how could I have it only display the record with and only with the first image? I tried a p.ImageUrl.First() but that throws an error stating that the BIND has no ImageUrl value that exists.