Chapter 14

Tulsi · October 18th, 2012, 02:06 PM

Hi Imar,

I'm having trouble getting this step to work. I created the styles.css file and added it to my master page, but I'm not seeing it being applied. I'm not sure what I'm doing wrong?

I've included the master page

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="FrontEnd.master.cs" Inherits="MasterPages_MasterPage" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>    
    <link href="../Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <form id="form1" runat="server">  

        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
            </Scripts>
        </asp:ScriptManager>                          

        <div id="PageWrapper">
          <div id="Header"><a id="A1" href="~/" runat="server"></a></div>

          <div id="MenuWrapper">
                <asp:Menu ID="Menu1" runat="server" cssclass="MainMenu"
                    DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
                    StaticEnableDefaultPopOutImage="False" 
                    onmenuitemclick="Menu1_MenuItemClick">
                 </asp:Menu>

                <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" 
                    ShowExpandCollapse="False">
                    <LevelStyles>
                        <asp:TreeNodeStyle CssClass="FirstLevelMenuItems" />                                                
                    </LevelStyles>    
                    <NodeStyle  BackColor="White"/>                
                </asp:TreeView>


                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
                    ShowStartingNode="False" />
          </div>

          <div id="MainContent">

            <asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath><br /><br />

            <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
               
            </asp:ContentPlaceHolder>
              
          </div>
          <div id="Sidebar">
            Select a Theme:  <br />
            <asp:DropDownList ID="ThemeList" runat="server" AutoPostBack="True" 
                  onselectedindexchanged="ThemeList_SelectedIndexChanged">
                <asp:ListItem>Monochrome</asp:ListItem>
                <asp:ListItem>DarkGrey</asp:ListItem>
              </asp:DropDownList>
              <br />
              <br />                            
                <Wrox:Banner ID="Banner1" runat="server" DisplayDirection="Vertical" />              
              <br />
          </div>
          <div id="Footer">   
            Footer goes here.                                       
          </div>

        <asp:ContentPlaceHolder ID="cpClientScript" runat="server">
        </asp:ContentPlaceHolder>

        </div>
    </form>
</body>

</html>

Thank you.
Tulsi

Imar · October 19th, 2012, 03:24 AM

Hi there,

Can you post the code for the style sheet and for the ListView?

Also, check if Styles.css is being applied at all, for example by adding a Universal selector like this:

Code:

 
*
{
  border: 2px solid Red;
}

That gives everything in the page a red border so you can quickly see if Styles.css is loaded and applied.

Cheers,

Imar

Tulsi · October 22nd, 2012, 03:26 PM

Hi Imar,

I tested out the style sheed code... It looks like styles.css is being loaded and applied since I see the red border.

Here's the code for styles.css:

Code:

*
{
  border: 2px solid Red;
}

.ItemContainer
{
  width: 600px;
  list-style-type: none;
  clear: both;
}

.ItemContainer li
{
  height: 300px;
  width: 200px;
  float: left;
}

.ItemContainer li img
{
  width: 180px;
  margin: 10px 20px 10px 0;
}

Code for listview..

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" DataSourceID="EntityDataSource1" 
        DataKeyNames="Id" InsertItemPosition="LastItem" 
        onselectedindexchanged="ListView1_SelectedIndexChanged" 
        oniteminserting="ListView1_ItemInserting">
                        
        <InsertItemTemplate>
            <li style="">
                Description:
                <asp:TextBox ID="DescriptionTextBox" runat="server" Text='<%# Bind("Description") %>' TextMode="MultiLine" />
                <asp:RequiredFieldValidator ID="reqDesc" runat="server" ErrorMessage="Enter a description." ControlToValidate="DescriptionTextBox"></asp:RequiredFieldValidator>

                <br />ToolTip:
                <asp:TextBox ID="ToolTipTextBox" runat="server" Text='<%# Bind("ToolTip") %>' />
                <asp:RequiredFieldValidator ID="reqToolTip" runat="server" ErrorMessage="Enter a tool tip." ControlToValidate="ToolTipTextBox"></asp:RequiredFieldValidator>

                <br />             
                <asp:FileUpload ID="FileUpload1" runat="server" />
                <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>
                <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" 
        EntityTypeFilter="" Select="" Where="it.PhotoAlbumId = @photoAlbumId" 
        oninserting="EntityDataSource1_Inserting">
        <WhereParameters>
            <asp:QueryStringParameter Name="PhotoAlbumId" QueryStringField="PhotoAlbumId" 
                Type="Int32" />
        </WhereParameters>
    </asp:EntityDataSource>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpClientScript" Runat="Server">
</asp:Content>

Thank you.

Tulsi

Imar · October 22nd, 2012, 03:28 PM

Hi Tulsi,

Look like you missed "Then add a class attribute and set it to ItemContainer." in step 9 on page 508. Since the CSS targets ItemContainer and its child elements, it's important to have that class on your ul.

Cheers,

Imar

Tulsi · October 25th, 2012, 12:56 PM

Thank you Imar. I added that class attribute and everything works great now.

Thank you again.

Tulsi