Chapter 15: Try it out Creating Advanced Style Solutions

wgrayson · September 30th, 2012, 05:24 PM

Well, I'm stuck in the water. I'm not able to see the alternating shades, nor the png up and down arrows on genres.aspx. I believe the code is correct for Genres.aspx (it is below.) I don't think genres.aspx is able to read/find the "management" folder in the App/Themes folder, but I don't know how to troubleshoot that. Any assistance would be appreciated. So, here's the code from "genres.aspx." I believe I've reviewed the set up for the App_Themes/Management folder, including the correct setup for the Gridview Skin and I've uploaded the two thumbnail images as requested. But let me know which of these files I should submit for review as well. Thanks.

Code:

<%@ Page Title="Planet Wrox - Management - Genres" Language="C#" MasterPageFile="~/MasterPages/Management.master" AutoEventWireup="true" CodeFile="Genres.aspx.cs" Inherits="Management_Genres" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" runat="Server">
  <asp:Label ID="ErrorMessage" runat="server" CssClass="ErrorMessage" EnableViewState="False"></asp:Label>
  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="Id" DataSourceID="SqlDataSource1" 
        EmptyDataText="There are no data records to display." AllowPaging="True" 
        AllowSorting="True" CellPadding="4" ForeColor="#333333" GridLines="None" 
        OnRowDataBound="GridView1_RowDataBound" EnableModelValidation="True">
     
    <Columns>
      <asp:TemplateField ShowHeader="False">
        <EditItemTemplate>
          <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"></asp:LinkButton>
          &nbsp;<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
        </EditItemTemplate>
        <ItemTemplate>
          <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit"></asp:LinkButton>
          &nbsp;<asp:LinkButton ID="DeleteLink" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete"></asp:LinkButton>
        </ItemTemplate>
        <ItemStyle Width="100px" />
      </asp:TemplateField>
      <asp:BoundField ItemStyle-Width="200px" DataField="Name" HeaderText="Name" SortExpression="Name">
        <ItemStyle Width="200px"></ItemStyle>
      </asp:BoundField>
      <asp:BoundField DataField="SortOrder" HeaderText="SortOrder" SortExpression="SortOrder" />
    </Columns>
            
        </asp:GridView>
  <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="Id" DataSourceID="SqlDataSource1" DefaultMode="Insert" Height="50px" Width="125px">
    <Fields>
      <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
      <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
      <asp:BoundField DataField="SortOrder" HeaderText="SortOrder" SortExpression="SortOrder" />
      <asp:CommandField ShowInsertButton="True" />
    </Fields>
  </asp:DetailsView>
  <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:PlanetWroxConnectionString1 %>" DeleteCommand="DELETE FROM [Genre] WHERE [Id] = @Id" InsertCommand="INSERT INTO [Genre] ([Name], [SortOrder]) VALUES (@Name, @SortOrder)" ProviderName="<%$ ConnectionStrings:PlanetWroxConnectionString1.ProviderName %>" SelectCommand="SELECT Genre.Id, Genre.Name, Genre.SortOrder, COUNT(Review.Id) AS NumberOfReviews FROM Genre LEFT OUTER JOIN Review ON Genre.Id = Review.GenreId GROUP BY Genre.Id, Genre.Name, Genre.SortOrder" UpdateCommand="UPDATE [Genre] SET [Name] = @Name, [SortOrder] = @SortOrder WHERE [Id] = @Id" OnDeleted="SqlDataSource1_Deleted">
    <DeleteParameters>
      <asp:Parameter Name="Id" Type="Int32" />
    </DeleteParameters>
    <InsertParameters>
      <asp:Parameter Name="Name" Type="String" />
      <asp:Parameter Name="SortOrder" Type="Int32" />
    </InsertParameters>
    <UpdateParameters>
      <asp:Parameter Name="Name" Type="String" />
      <asp:Parameter Name="SortOrder" Type="Int32" />
      <asp:Parameter Name="Id" Type="Int32" />
    </UpdateParameters>
  </asp:SqlDataSource>
  <script type="text/javascript">
      $(function () {
          $('.GridView tr:odd:not(.GridViewPagerStyle)').addClass('GridViewAlternatingRowStyle');
      });
  </script>
</asp:Content>

Imar · September 30th, 2012, 06:15 PM

Hi there,

A few things you can check:

1. Did you create a Web.config file in the Management folder and set up the Management theme there on the <pages> element?

2. Is your page not accidentally based on your custom template and/or inheriting the BasePage?

3. Do you see a link to the Management Theme folder when you view the source of the page in the browser?

4. Are you HTML elements in the Management master page set up correctly so they match the CSS?

Cheers,

Imar

wgrayson · October 4th, 2012, 11:22 PM

#3 is the answer. When viewing source code, I'm not seeing any link to the management folder. I assume the browser would write the code as a standard css link between the head tags. What should I do to correct this? Thanks in advance.

This is the line of code that shows what base page I'm using: It should be the correct one.

Code:

<%@ Page Title="Planet Wrox | Management | Genres" Language="C#" MasterPageFile="~/MasterPages/Management.master" AutoEventWireup="true" CodeFile="Genres.aspx.cs" Inherits="Management_Genres" %>

wgrayson · October 4th, 2012, 11:53 PM

As always, it's a simple error. I copied over the images and not the actual style sheet from the source code to the Management Folder in the App_Themes Directory. Problem solved.