# FrontDesk - Refactoring the Occupied Tables display (Template fields, asp:Panels, and Bootstrap)

Now that the raw data is available to our page, it is time to refactor the markup to improve the presentation of the data. As you work on rafactoring the display, be sure to frequently view the page in the browser to ensure you are getting the look you want.

Add a DTO/POCO class to represent a waiter on duty.

public class WaiterOnDuty
{
    public int WaiterId { get; set; }
    public string FullName { get; set; }
}

Add a method on the BLL to get a list of waiters (these should be waiters that are still employed).

/// <summary>
/// ListWaiters returns the id and full name of all the current waiters
/// </summary>
/// <returns></returns>
[DataObjectMethod(DataObjectMethodType.Select, false)]
public List<WaiterOnDuty> ListWaiters()
{
    using (var context = new RestaurantContext())
    {
        var result = from person in context.Waiters
                        where person.ReleaseDate == null
                        select new WaiterOnDuty()
                        {
                            WaiterId = person.WaiterID,
                            FullName = person.FirstName + " " + person.LastName
                        };
        return result.ToList();
    }
}

Add an ObjectDataSource configured to get the list of active waiters.

<asp:ObjectDataSource runat="server" ID="WaitersDataSource" OldValuesParameterFormatString="original_{0}"
    SelectMethod="ListWaiters" TypeName="eRestaurant.BLL.OrderController"></asp:ObjectDataSource>

Modify the GridView to use a TemplateField instead of BoundFields for the columns. The TemplateField makes use of <asp:Panel> controls to contain content that is shown conditionally, depending on whether the seat is currently occupied or not. If the seat is available, show a form that allows the host to seat walk-in customers. If the seat is occupied, show the details for that table's occupancy. Also apply Bootstrap styles for table and form elements.
- The following markup includes Boostrap-specific styling. Also, when developing the GridView, begin by letting Visual Studio generate the BoundFields for the GridView. Then, view the results in the browser and, piece by piece, replace some of the BoundFields with the presentation in the TemplateField.
- When working with DataBound controls such as the GridView, you can set the control's Itemtype property to the fully-qualified name of the DTO/POCO class that you are displaying in the control.

<div class="col-md-7">
    <details open>
        <summary>Tables</summary>
        <p class="well">This GridView uses a <asp:TemplateField …> for the table number and the controls to handle walk-in seating. Additionally, the walk-in seating form is in a panel that only shows if the seat is <em>not</em> taken. Handling of the action to <b>seat customers</b> is done in the code-behind, on the GridView's <code>OnSelectedIndexChanging</code> event.</p>
        <style type="text/css">
            .inline-div {
                display: inline;
            }
        </style>
        <asp:GridView ID="SeatingGridView" runat="server" AutoGenerateColumns="False"
                CssClass="table table-hover table-striped table-condensed"
                DataSourceID="SeatingObjectDataSource" ItemType="eRestaurant.Entities.DTOs.SeatingSummary">
            <Columns>
                <asp:CheckBoxField DataField="Taken" HeaderText="Taken" SortExpression="Taken" ItemStyle-HorizontalAlign="Center"></asp:CheckBoxField>
                <asp:TemplateField HeaderText="Table" SortExpression="Table" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:Label ID="TableNumber" runat="server" Text='<%# Item.Table %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Seating" HeaderText="Seating" SortExpression="Seating" ItemStyle-HorizontalAlign="Center"></asp:BoundField>
                <asp:TemplateField HeaderText="Reservation Notes / Seat Walk-In">
                    <ItemTemplate>
                        <asp:Panel ID="WalkInSeatingPanel" runat="server" CssClass="input-group input-group-sm"
                                Visible='<%# !Item.Taken %>'>
                            <asp:TextBox ID="NumberInParty" runat="server" CssClass="form-control col-md-1"
                                    TextMode="Number" placeholder="# people"></asp:TextBox>
                            <span class="input-group-addon">
                                <asp:DropDownList ID="WaiterList" runat="server"
                                        CssClass="selectpicker"
                                        AppendDataBoundItems="true" DataSourceID="WaitersDataSource"
                                        DataTextField="FullName" DataValueField="WaiterId">
                                    <asp:ListItem Value="0">[select a waiter]</asp:ListItem>
                                </asp:DropDownList>
                            </span>
                            <span class="input-group-addon" style="width:5px;padding:0;border:0;background-color:white;"></span>
                            <asp:LinkButton ID="LinkButton1" runat="server" Text="Seat Customers"
                                CssClass="input-group-btn" CommandName="Select" CausesValidation="False" />
                        </asp:Panel>
                        <asp:Panel ID="OccupiedTablePanel" runat="server"
                                Visible='<%# Item.Taken  %>'>
                            <%# Item.Waiter %>
                            <asp:Label ID="ReservationNameLabel" runat="server" 
                                    Text='<%# "&mdash;" + Item.ReservationName %>'
                                    Visible='<%# !string.IsNullOrEmpty(Item.ReservationName) %>' />
                            <asp:Panel ID="BillInfo" runat="server" CssClass="inline-div"
                                    Visible='<%# Item.BillTotal.HasValue && Item.BillTotal.Value > 0 %>'>
                                <asp:Label ID="Label1" runat="server" Text='<%# string.Format(" &ndash; {0:C}", Item.BillTotal) %>' />
                            </asp:Panel>
                        </asp:Panel>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </details>
</div>
<asp:ObjectDataSource runat="server" ID="SeatingObjectDataSource" OldValuesParameterFormatString="original_{0}" SelectMethod="SeatingByDateTime" TypeName="eRestaurant.BLL.SeatingController">
    <SelectParameters>
        <asp:ControlParameter ControlID="SearchDate" PropertyName="Text" Name="date" Type="DateTime"></asp:ControlParameter>
        <asp:ControlParameter ControlID="SearchTime" PropertyName="Text" DbType="Time" Name="time"></asp:ControlParameter>
    </SelectParameters>
</asp:ObjectDataSource>

← Occupied Tables Business Rule Violations →