?his is the fifth 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 4 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.You can find the fourth here. In this new post we will build on the previous posts and we will demonstrate how to display the details of a poster when the user clicks on an individual poster photo/link.
We will add a FormView control on a web form and will bind data from the database. FormView is a great web server control for displaying the details of a single record.
1) Launch Visual Studio and open your solution where your project lives2) Add a new web form item on the project.Make sure you include the Master Page.Name it PosterDetails.aspx 3) Open the PosterDetails.aspx page. We will add some markup in this page. Have a look at the
code below
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server"> <asp:FormView ID="posterDetails" runat="server" ItemType="PostersOnLine.DAL.Poster" SelectMethod ="GetPosterDetails"> <ItemTemplate> <div> <h1><%#:Item.PosterName %></h1> </div> <br /> <table> <tr> <td> <img src="<%#:Item.PosterImgpath %>" border="1" alt="<%#:Item.PosterName %>" height="300" /> </td> <td style="vertical-align: top"> <b>Description:</b><br /><%#:Item.PosterDescription %> <br /> <span><b>Price:</b> <%#: String.Format("{0:c}", Item.PosterPrice) %></span> <br /> <span><b>Poster Number:</b> <%#:Item.PosterID %></span> <br /> </td> </tr> </table> </ItemTemplate> </asp:FormView></asp:Content> I set the ItemType property to the Poster entity class and the SelectMethod to the GetPosterDetails method.The Item binding expression is available and we can retrieve properties of the Poster object.I retrieve the name, the image,the description and the price of each poster.
4) Now we need to write the GetPosterDetails method.In the
code behind of the PosterDetails.aspx page we type public IQueryable<Poster> GetPosterDetails([QueryString("PosterID")]int? posterid) { PosterContext ctx = new PosterContext(); IQueryable<Poster> query = ctx.Posters; if (posterid.HasValue && posterid > 0) { query = query.Where(p => p.PosterID == posterid); } else { query = null; } return query; }
I bind the value from the query string to the posterid 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 PosterID.If there is a matching poster it is fetched from the database.If not,there is no data at all coming back from the database.
5) I run my application and then click on the "Midfielders" link.Then click on the first poster that appears from the left (Kenny Dalglish) and click on it to see the details. Have a look at the picture below to see the results.
You can see that now I have all the details of the poster in a new page.?ake sure you place breakpoints in the
code so you can see what is really going on.
Hope it helps!!!
