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