Ch 14 Customizing Templates of the ListView Control

leeWozyWarren · December 1st, 2011, 01:47 PM

Hi

I have completed the try it out for Ch 14 Customizing Templates of the ListView Control.

The page seems to work fine but the image doesn't show, only the broken link symbol. The actual images are in the folder GigPics though...

What could be wrong?

Regards

Lee

Imar · December 3rd, 2011, 01:56 PM

Hi there,

Can you post the code for the page, as well as the relevant piece of HTML from the browser? Also, what values do you have in the database?

Imar

leeWozyWarren · December 3rd, 2011, 02:11 PM

Here is the page code and the browser code:

Code:

<%@ Page Title="Manage Photo Album" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="ManagePhotoAlbum.aspx.vb" Inherits="ManagePhotoAlbum" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:ListView ID="ListView1" runat="server" DataKeyNames="Id" 
        DataSourceID="EntityDataSource1" InsertItemPosition="LastItem">
        <InsertItemTemplate>
            <li style="">
                Description:
                <asp:RequiredFieldValidator ID="reqDesc" ControlToValidate="DescriptionTextBox" runat="server" ErrorMessage="Enter a description!"></asp:RequiredFieldValidator>
                <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:RequiredFieldValidator>
                <asp:TextBox ID="ToolTipTextBox" runat="server" Text='<%# Bind("ToolTip") %>' />
                <br />
                <asp:FileUpload ID="FileUpLoad1" runat="server" />
                <br />
                <asp:CustomValidator ID="CusValImage" runat="server" ErrorMessage="Select a valid .jpg file!"></asp:CustomValidator><br />
                <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 = "false" />
            </li>
        </ItemTemplate>
        <LayoutTemplate>
            <ul class="ItemContainer">
                <li runat="server" id="itemPlaceholder" />
            </ul>
            <div style="">
            </div>
        </LayoutTemplate>
        <SelectedItemTemplate></SelectedItemTemplate>
    </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">
        <WhereParameters>
            <asp:QueryStringParameter DefaultValue="" Name="PhotoAlbumId" 
                QueryStringField="PhotoAlbumId" Type="Int32" />
        </WhereParameters>
    </asp:EntityDataSource>
</asp:Content>

Code:

        <div class="main">
            
    
            <ul class="ItemContainer">
                
            <li style="">
                Description:
                <span id="MainContent_ListView1_DescriptionLabel_0">test</span>
                <br />
                ToolTip:
                <span id="MainContent_ListView1_ToolTipLabel_0">tesy</span>
                <br />
               
               <img id="MainContent_ListView1_ImageUrl_0" src="&lt;%%20Eval(&quot;ImageUrl&quot;)%20%>" />
                <br />
                
                <input type="submit" name="ctl00$MainContent$ListView1$ctrl0$DeleteButton" value="Delete" id="MainContent_ListView1_DeleteButton_0" />
            </li>
        
            <li style="">
                Description:
                <span id="MainContent_ListView1_reqDesc" style="visibility:hidden;">Enter a description!</span>
                <input name="ctl00$MainContent$ListView1$ctrl1$DescriptionTextBox" type="text" id="MainContent_ListView1_DescriptionTextBox" />
                <br />
                ToolTip:
                <span id="MainContent_ListView1_reqToolTip" style="visibility:hidden;">Enter a tool tip!</span>
                <input name="ctl00$MainContent$ListView1$ctrl1$ToolTipTextBox" type="text" id="MainContent_ListView1_ToolTipTextBox" />
                <br />
                <input type="file" name="ctl00$MainContent$ListView1$ctrl1$FileUpLoad1" id="MainContent_ListView1_FileUpLoad1" />
                <br />
                <span id="MainContent_ListView1_CusValImage" style="visibility:hidden;">Select a valid .jpg file!</span><br />
                <input type="submit" name="ctl00$MainContent$ListView1$ctrl1$InsertButton" value="Insert" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$ListView1$ctrl1$InsertButton&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="MainContent_ListView1_InsertButton" />
                <input type="submit" name="ctl00$MainContent$ListView1$ctrl1$CancelButton" value="Clear" id="MainContent_ListView1_CancelButton" />
            </li>
        
            </ul>
            <div style="">
            </div>
        
    

        </div>
        <div class="clear">
        </div>
    </div>
<script type="text/javascript">
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("MainContent_ListView1_reqDesc"), document.getElementById("MainContent_ListView1_reqToolTip"), document.getElementById("MainContent_ListView1_CusValImage"));
//]]>
</script>

<script type="text/javascript">
//<![CDATA[
var MainContent_ListView1_reqDesc = document.all ? document.all["MainContent_ListView1_reqDesc"] : document.getElementById("MainContent_ListView1_reqDesc");
MainContent_ListView1_reqDesc.controltovalidate = "MainContent_ListView1_DescriptionTextBox";
MainContent_ListView1_reqDesc.errormessage = "Enter a description!";
MainContent_ListView1_reqDesc.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_ListView1_reqDesc.initialvalue = "";
var MainContent_ListView1_reqToolTip = document.all ? document.all["MainContent_ListView1_reqToolTip"] : document.getElementById("MainContent_ListView1_reqToolTip");
MainContent_ListView1_reqToolTip.controltovalidate = "MainContent_ListView1_ToolTipTextBox";
MainContent_ListView1_reqToolTip.errormessage = "Enter a tool tip!";
MainContent_ListView1_reqToolTip.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
MainContent_ListView1_reqToolTip.initialvalue = "";
var MainContent_ListView1_CusValImage = document.all ? document.all["MainContent_ListView1_CusValImage"] : document.getElementById("MainContent_ListView1_CusValImage");
MainContent_ListView1_CusValImage.errormessage = "Select a valid .jpg file!";
MainContent_ListView1_CusValImage.evaluationfunction = "CustomValidatorEvaluateIsValid";
//]]>
</script>

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script>
<script type="text/javascript">
//<![CDATA[

var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}

function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        //]]>
</script>
</form>
    <div class="footer">
            <style="text-align:center;">© 2011. All Rights Reserved. The Essentia Group.
    </div>
    

</body>
</html>

Imar · December 4th, 2011, 06:16 AM

Take a look at this:

Code:

 <img id="MainContent_ListView1_ImageUrl_0" src="&lt;%%20Eval(&quot;ImageUrl&quot;)%20%>" />

The path to the image is messed up here. The reason for that is the missing # in the data bidning expression. That is, this:

Code:

 
<asp:Image ID="ImageUrl" runat="server" ImageUrl='<% Eval("ImageUrl") %>' />

should be

Code:

 
<asp:Image ID="ImageUrl" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' />

Hope this helps,

Imar