?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!!!
