Images does not shows up / Ch 14 photoalbum

akumok · July 24th, 2012, 06:11 PM

Imar,

I worked through Ch 14 where we suppose to insert albums with images. I checked folder GigPics, files getting inserted with newly generated GUIDs but,
on the page images does not appear, only frame of empty image control. Any idea? Thanks, Alex

Imar · July 24th, 2012, 06:38 PM

Hi Alex,

Take a look in the Pictures table in the database. Do you see the image URLs there?

If that doesn't shed any light, can you post you markup as well as the final HTML in the browser?

Cheers,

Imar

akumok · July 24th, 2012, 07:18 PM

Thanks Imar, I found problem, left off "/" after "/GigPics".

Another problem, not single album shows up in ManagePhotoAlbum page. I check database everything there. Below is a markup, I ran through Compare utility against your and can not find any difference

<%@ Page Title="Manage Photo Album" Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="ManagePhotoAlbum.aspx.cs" Inherits="_ManagePhotoAlbum" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
<asp:ListView ID="ListView1" runat="server" DataKeyNames="Id"
DataSourceID="EntityDataSource1" InsertItemPosition="LastItem"
oniteminserting="ListView1_ItemInserting">
<InsertItemTemplate>
<li style="">
Description:
<asp:RequiredFieldValidator ID="reqDesc" ControlToValidate="DescriptionTextBox" runat="server"
ErrorMessage="Enter description" />
<asp:TextBox ID="DescriptionTextBox" runat="server"
Text='<%# Bind("Description") %>' />
 ToolTip:
<asp:RequiredFieldValidator ID="reqTooltip" ControlToValidate="ToolTipTextBox"
runat="server" ErrorMessage="Enter a tool tip" />
<asp:TextBox ID="ToolTipTextBox" runat="server" Text='<%# Bind("ToolTip") %>' />
<asp:FileUpload ID="FileUpload1" runat="server" />
 
<asp:CustomValidator ID="cusValImage" runat="server"
ErrorMessage="Select a valid .jpg file" />
<asp:Button ID="InsertButton" runat="server" CommandName="Insert"
Text="Insert" />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Clear" CausesValidation="false" />
</li>
</InsertItemTemplate>
<ItemTemplate>
<li style="">
Description:
<asp:Label ID="DescriptionLabel" runat="server"
Text='<%# Eval("Description") %>' />
 
ToolTip:
<asp:Label ID="ToolTipLabel" runat="server" Text='<%# Eval("ToolTip") %>' />
 
<asp:Image ID="ImageUrl" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' />
 
<asp:Button ID="DeleteButton" runat="server" CommandName="Delete"
Text="Delete" CausesValidation="true"/>
</li>
</ItemTemplate>
<LayoutTemplate>
<ul class="ItemContainer">
<li runat="server" id="itemPlaceholder" />
</ul>
</LayoutTemplate>
</asp:ListView>
<asp:EntityDataSource ID="EntityDataSource1" runat="server"
ConnectionString="name=PlanetWroxEntities"
DefaultContainerName="PlanetWroxEntities" EnableDelete="True"
EnableFlattening="False" EnableInsert="True" EntitySetName="Pictures"
Where="it.photoAlbumId = @photoAlbumId"
oninserting="EntityDataSource1_Inserting">
<WhereParameters>
<asp:QueryStringParameter Name="PhotoAlbumId" QueryStringField="PhotoAlbumId"
Type="Int32" />
</WhereParameters>
</asp:EntityDataSource>
</asp:Content>

Imar · July 25th, 2012, 03:13 AM

Hi there,

Take a look at this:

Code:

 
QueryStringField="PhotoAlbumId"

Are you sure you're passing the correct query string parameter from the new album page? Can you post the code for that page?

Imar

akumok · July 25th, 2012, 11:09 AM

From NewPhotoAlbum page

protected void EntityDataSource1_Inserted(object sender, EntityDataSourceChangedEventArgs e)
{
Photoalbum newPhotoAlbum = (Photoalbum)e.Entity;
Response.Redirect(string.Format("ManagePhotoAlbum. aspx?PhotoAlbumId={0}",
newPhotoAlbum.Id.ToString()));
}

From ManagePhotoAlbum page

protected void EntityDataSource1_Inserting(object sender, EntityDataSourceChangingEventArgs e)
{
int photoAlbumId = Convert.ToInt32(Request.QueryString.Get("PhotoAlbu mId"));
Picture myPicture = (Picture)e.Entity;
myPicture.PhotoalbumId = photoAlbumId;

FileUpload FileUpload1 =
(FileUpload)ListView1.InsertItem.FindControl("File Upload1");
string virtualFolder = "~/GigPics/";
string physicalFolder = Server.MapPath(virtualFolder);
string fileName = Guid.NewGuid().ToString();
string extension = System.IO.Path.GetExtension(FileUpload1.FileName);

FileUpload1.SaveAs(System.IO.Path.Combine(physical Folder, fileName + extension));
myPicture.ImageUrl = virtualFolder + fileName + extension;
}
protected void ListView1_ItemInserting(object sender, ListViewInsertEventArgs e)
{
FileUpload FileUpload1 =
(FileUpload)ListView1.InsertItem.FindControl("File Upload1");
if (!FileUpload1.HasFile || !FileUpload1.FileName.ToLower().EndsWith(".jpg"))
{
CustomValidator cusValImage =
(CustomValidator)ListView1.InsertItem.FindControl( "cusValImage");
cusValImage.IsValid = false;
e.Cancel = true;
}
}

akumok · July 25th, 2012, 11:29 AM

Imar,

I just want to point out, if I can not see all the items probably something wrong with listview binding, code have nothing to do with it, from what I see, code only relevant to inserting new album functionality and no matter what, am I inserting or not, listview should be populated from database. Am I wrong? Thanks, Alex

Imar · July 25th, 2012, 11:55 AM

I am not sure I understand what you're saying. Can you elaborate?

If you see pictures in the database and not in ManageAlbum, then yes, something is wrong with the binding. Can you sjhow the Markup for the page as well?

Imar

akumok · July 25th, 2012, 12:01 PM

ManagePhotoAlbum page does not show any album at all, looks like ItemTemplate for ListView is not working after changes I made in relation to bringing pictures. Below is the markup for this page. Thank you

Code:

<%@ Page Title="Manage Photo Album" Language="C#" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="true" CodeFile="ManagePhotoAlbum.aspx.cs" Inherits="_ManagePhotoAlbum" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
    <asp:ListView ID="ListView1" runat="server" DataKeyNames="Id" 
        DataSourceID="EntityDataSource1" InsertItemPosition="LastItem" 
        oniteminserting="ListView1_ItemInserting">
        <InsertItemTemplate>
            <li style="">
                Description:
                <asp:RequiredFieldValidator ID="reqDesc" ControlToValidate="DescriptionTextBox" runat="server"
                 ErrorMessage="Enter description" />
                <asp:TextBox ID="DescriptionTextBox" runat="server" 
                    Text='<%# Bind("Description") %>' />
                <br />ToolTip:
                <asp:RequiredFieldValidator ID="reqTooltip" ControlToValidate="ToolTipTextBox" 
                runat="server" ErrorMessage="Enter a tool tip" />
                <asp:TextBox ID="ToolTipTextBox" runat="server" Text='<%# Bind("ToolTip") %>' />
                <asp:FileUpload ID="FileUpload1" runat="server" />
                <br />
                <asp:CustomValidator ID="cusValImage" runat="server" 
                 ErrorMessage="Select a valid .jpg file" />
                <asp:Button ID="InsertButton" runat="server" CommandName="Insert" 
                    Text="Insert" />
                <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" 
                    Text="Clear" CausesValidation="false" />
            </li>
        </InsertItemTemplate>
        <ItemTemplate>
            <li style="">
                Description:
                <asp:Label ID="DescriptionLabel" runat="server" 
                    Text='<%# Eval("Description") %>' />
                <br />
                ToolTip:
                <asp:Label ID="ToolTipLabel" runat="server" Text='<%# Eval("ToolTip") %>' />
                <br />
                <asp:Image ID="ImageUrl" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' />
                <br />
                <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" 
                    Text="Delete"  CausesValidation="true"/>
            </li>
        </ItemTemplate>
        <LayoutTemplate>
            <ul class="ItemContainer">
                <li runat="server" id="itemPlaceholder" />
            </ul>
        </LayoutTemplate>
    </asp:ListView>
    <asp:EntityDataSource ID="EntityDataSource1" runat="server" 
        ConnectionString="name=PlanetWroxEntities" 
        DefaultContainerName="PlanetWroxEntities" EnableDelete="True" 
        EnableFlattening="False" EnableInsert="True" EntitySetName="Pictures" 
        Where="it.photoAlbumId = @photoAlbumId" 
    oninserting="EntityDataSource1_Inserting">
        <WhereParameters>
            <asp:QueryStringParameter Name="PhotoAlbumId" QueryStringField="PhotoAlbumId" 
                Type="Int32" />
        </WhereParameters>
    </asp:EntityDataSource>
</asp:Content>

Imar · July 26th, 2012, 03:39 AM

Hi there,

I copied and pasted your code in my Planet Wrox project and it all worked fine (had to rename Photoalbum to PhotoAlbum to match my table / EF name, but that was it).

How are you browsing to this page? Do you go through NewAlbum.aspx first? Also, when you look in the database, do you see the correct PhotoAlbumIds for the pictures in the Pictures table?

Imar

akumok · July 26th, 2012, 10:30 AM

Imar,

I checked both tables, Photoalbum and Picture, have 3 records with correct PhotoalbumId and correct url with GUID jpg. pointing to the folder where 3 .jpg files were present. I opened NewAlbum.aspx and added test album and use picture from your resources, and when ManagePhotoAlbums page was loaded I had only one item, the one I've entered now during this session with no sign for other previous 3. Thanks, Alex