?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 lives2) 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.
The code follows 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!!!
