ListView - Show LayoutTemplate on empty data source
For a shopping cart page, the list of items is displayed in a html table. I use a ListView for that and it works great.
When the cart is empty, the text 'This cart is empty' appears. But it only renders the code in the EmptyDataTemplate. My goal is to display the table headers ('delete', 'product', 'quantity', etc.) without repeating that html code in the EmptyDataTemplate.
Trying being clever I changed my EmptyDataTemplate into an EditItemTemplate and used the bit of code displayed below.
Can anyone think of a more more elegant solution for this problem??
[C# code]
lvShoppingCart.DataSource = _cart.Items;
lvShoppingCart.DataBind();
if (_cart.ProductCount == 0)
{
lvShoppingCart.DataSource = new List<string>() { "dummy cart item" };
lvShoppingCart.EditIndex = 0;
lvShoppingCart.DataBind();
}
[ASPX code]
<asp:ListView ID="lvShoppingCart" runat="server">
<LayoutTemplate>
<table style="width: 600px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50">
<strong>Delete</strong>
</td>
<td width="400">
<strong>Product</strong>
</td>
<td width="100">
<strong>Quantity</strong>
</td>
<td width="100">
<strong>Price</strong>
</td>
<td width="100">
<strong>Total</strong>
</td>
</tr>
</table>
<hr />
</td>
</tr>
<tr id="itemPlaceHolder" runat="server">
</tr>
<tr id="trShoppingCartUpdateBtn" runat="server">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50">
</td>
<td width="400">
</td>
<td colspan="3" width="300">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<asp:ImageButton ID="btnImgUpdateQuantities" ImageUrl="../img/refresh.gif" AlternateText="update shopping cart"
OnClick="btnUpdateQuantities_Click" runat="server" />
</td>
<td>
<asp:LinkButton ID="btnUpdateQuantities" Text="update cart" OnClick="btnUpdateQuantities_Click"
runat="server" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr id="trShoppingCartTotals" runat="server">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4">
<div align="right">
<strong>Totals: </strong>
</div>
</td>
<td width="100">
<asp:Label ID="lblCartTotal" runat="server" Text="0" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
<EditItemTemplate>
<tr>
<td colspan="5" align="center">
<p>
<em>This cart is empty.</em>
</p>
</td>
</tr>
</EditItemTemplate>
<ItemTemplate>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50">
<a href='<%# ShoppingCartUrl %>?action=remove&id=<%# Eval("Product.Id") %>'>X</a>
</td>
<td widt开发者_运维知识库h="400">
<%# Eval("Product.DisplayName") %>
</td>
<td width="100">
<label>
<asp:TextBox ID="txtQuantity" Text='<%# Eval("Quantity") %>' runat="server" size="3" />
</label>
</td>
<td width="100">
<%# Eval("Price", "{0:C}") %>
</td>
<td width="100">
<%# Eval("TotalPrice", "{0:C}") %>
</td>
</tr>
</table>
<hr />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
You can add an empty InsertItemTemplate and set InsertItemPosition="LastItem"
Below you can find a simplified example of the shopping cart code. It is using the 'InsertItemTemplate' solution provided in the answer of user757933. I find this a more elegant solution than using the 'EditItemTemplate' which requires a 'dummy' data source.
Usage: By default you should see an empty cart. When you uncomment the lines for 'bread', 'apples' and 'eggs' the message 'This cart is empty' should be hidden, instead you will see the three items appear in the cart.
[ASPX code]
<asp:ListView ID="lvShoppingCart" runat="server">
<LayoutTemplate>
<pre>
---------------------------------------------------------------------------
| Product | Quantity | Price | Total |
---------------------------------------------------------------------------
<div id="itemPlaceHolder" runat="server">
</div>
---------------------------------------------------------------------------
| | <asp:Label ID="lblCartTotal" runat="server" Text="0" /> |
---------------------------------------------------------------------------
</pre>
</LayoutTemplate>
<InsertItemTemplate>
| This cart is empty |
</InsertItemTemplate>
<ItemTemplate>
| <%# Container.DataItem.ToString().PadRight(17) %> | | | |
</ItemTemplate>
</asp:ListView>
[C# code]
internal class Cart : IEnumerable<string>
{
public List<string> Items { get; set; }
public Cart()
{
Items = new List<string>();
}
public IEnumerator<string> GetEnumerator()
{
return Items.GetEnumerator();
}
IEnumerator IEnumerable.GetEnumerator()
{
return GetEnumerator();
}
}
protected void Page_Load(object sender, EventArgs e)
{
Cart _cart = new Cart();
//_cart.Items.Add("bread");
//_cart.Items.Add("apples");
//_cart.Items.Add("eggs");
lvShoppingCart.DataSource = _cart;
// Make sure the 'InsertItemTemplate' is hidden from view when items are added to the cart.
lvShoppingCart.InsertItemPosition = _cart.Items.Count == 0 ? InsertItemPosition.LastItem : InsertItemPosition.None;
lvShoppingCart.DataBind();
Label _lblCartTotal = lvShoppingCart.FindControl("lblCartTotal") as Label;
if (_lblCartTotal != null)
{
_lblCartTotal.Text = string.Format("<strong>Total: </strong> {0}", _cart.Items.Count);
}
}
精彩评论