DotNetStories
Building an ASP.Net 4.5 Web forms application - part 4
Τhis is the fourth post in a series of posts on how to design and implement an ASP.Net 4.5 Web Forms store that sells posters on line.
There are 3 more posts in this series of posts.Please make
sure you read them first.You can find the first post
here. You can find the second post
here. You can find the third post
here.
In this new post we will build on the
previous posts and we will demonstrate how to display the
posters per category.
We will add a ListView control on the PosterList.aspx and will bind data from the database. We will use the various templates.
Then we will write code in the PosterList.aspx.cs to
fetch data from the database.
1) Launch Visual Studio and open your solution where
your project lives
2) Open the
PosterList.aspx page. We will add some markup in this
page. Have a look at the code below
<section class="posters-featured">
<ul>
<asp:ListView
ID="posterList" runat="server"
DataKeyNames="PosterID"
GroupItemCount="3" ItemType="PostersOnLine.DAL.Poster"
SelectMethod="GetPosters">
<EmptyDataTemplate>
<table id="Table1"
runat="server">
<tr>
<td>We
have no data.</td>
</tr>
</table>
</EmptyDataTemplate>
<EmptyItemTemplate>
<td id="Td1"
runat="server" />
</EmptyItemTemplate>
<GroupTemplate>
<tr
ID="itemPlaceholderContainer" runat="server">
<td
ID="itemPlaceholder" runat="server"></td>
</tr>
</GroupTemplate>
<ItemTemplate>
<td id="Td2"
runat="server">
<table>
<tr>
<td> </td>
<td>
<a
href="PosterDetails.aspx?posterID=<%#:Item.PosterID%>">
<img src="<%#:Item.PosterImgpath%>"
width="100" height="75" border="1"/></a>
</td>
<td>
<a
href="PosterDetails.aspx?posterID=<%#:Item.PosterID%>">
<span class="PosterName">
<%#:Item.PosterName%>
</span>
</a>
<br
/>
<span class="PosterPrice">
<b>Price: </b><%#:String.Format("{0:c}",
Item.PosterPrice)%>
</span>
<br />
</td>
</tr>
</table>
</td>
</ItemTemplate>
<LayoutTemplate>
<table id="Table2"
runat="server">
<tr id="Tr1"
runat="server">
<td
id="Td3" runat="server">
<table
ID="groupPlaceholderContainer" runat="server">
<tr
ID="groupPlaceholder" runat="server"></tr>
</table>
</td>
</tr>
<tr id="Tr2" runat="server"><td id="Td4"
runat="server"></td></tr>
</table>
</LayoutTemplate>
</asp:ListView>
</ul>
</section>
3) We have a ListView control on the page called
PosterList. I set the ItemType property to the
Poster class and then the SelectMethod to the
GetPosters method. I will create this method later
on.
(ItemType="PostersOnLine.DAL.Poster" SelectMethod="GetPosters")
Then in the code below I have the data-binding expression Item available and the control becomes strongly typed.So when the user clicks on the link of the poster's category the relevant information will be displayed (photo,name and price)
<td>
<a
href="PosterDetails.aspx?posterID=<%#:Item.PosterID%>">
<img src="<%#:Item.PosterImgpath%>"
width="100" height="75" border="1"/></a>
</td>
4) Now we need to write the simple method to populate the
ListView control.It is called
GetPosters method.
In the PosterDetails.aspx.cs we type the following
code.
public IQueryable<Poster>
GetPosters([QueryString("id")] int? PosterCatID)
{
PosterContext ctx = new
PosterContext();
IQueryable<Poster> query = ctx.Posters;
if (PosterCatID.HasValue && PosterCatID > 0)
{
query =
query.Where(p=>p.PosterCategoryID==PosterCatID);
}
return query;
}
This is a very simple method that returns information about
posters related to the PosterCatID passed to it.
I bind the value from the query string to the PosterCatID parameter at run time.This is all possible due to the QueryStringAttribute class that lives inside the System.Web.ModelBinding and gets the value of the query string variable id.
5) I run my application and then click on the "Midfilders"
link. Have a look at the picture below to see the
results.
In the Site.css file I added some new CSS rules to
make everything more presentable.
.posters-featured {
width:840px;
background-color:#efefef;
}
.posters-featured
a:link, a:visited,
a:active, a:hover {
color: #000033;
}
.posters-featured
a:hover {
background-color: #85c465;
}
6) I run the application again and this time I do not choose any category, I simply navigate to the PosterList.aspx page. I see all the posters since no query string was passed as a parameter.
Have a look at the picture below
Μake sure you place breakpoints in the code so you can see
what is really going on.In the next post I will show you how
to display poster details.
Hope it helps!!!