FREELessons: 20Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.14 Wrapping Up the Product Detail Page

Hello, and welcome back to MVC for Designers. We've got our action set up now for our product detail page, and in this action we're calling on our GetProducts method that we created, which is the method that is basically creating all of our temporary products for us. Obviously later on the developer is gonna change this GetProducts method to pull in these products from a database instead of just creating them on a fly like this, but at least we've set it up so that they've got a little bit of a head start. So inside this GetProducts method we're actually using this link query, and that's what this is called, this particular type of syntax here. It's called linq, L-I-N-Q. And we're using that to filter down those products into the exact product we need, or the product whose ID was passed in in the URL. Now again, as I mentioned before, the developers are probably going to take this logic here and flesh it out a little bit more, to handle more errors or unexpected inputs. So if somebody puts an ID into the URL, for example, that doesn't exist in the product database, they need to handle that in a little bit of a different way. Right now the only thing we're accounting for is if that ID doesn't show up in the URL at all or if it comes in null, in which case we're just going to redirect them to the index page or the product list page. So now in this lesson, I want to create the actual product detail view. So, let's do that. I'm gonna jump into our Projectfiles folder and create another copy of our project for this particular lesson and we're gonna call it Store12. So all the changes we make in this lesson will be stored here in the Store12 folder. So let's open up that solution, and we can close out the solution that we were just working with. And I wanna open up our shopping controller, and in our shopping controller we have our product detail action. So in order to make a view from this action, we simply right-click on the action name and click on Add View. We're gonna call our view ProductDetail, and before, we created a view without a model, and then we just added the model later. We can actually add a model right now. So, I'm gonna change this to Empty (without model), or from Empty (without model) to Just empty and then for the model class, remember the model we're gonna use for this particular page is the Product model. Because in that product class that we created, we created all the properties we needed for one particular product, and that's what we need access to here, so we're gonna choose the Product model, and then use the rest of the defaults here, and click on Add. So that creates the view for us, and we can see here at the top of the view that the model is of data type Store.Models.Product, which again, is this Product class or Product model that we created earlier, which simply has a name, a price, a description and an ID. So, on this product detail page, all we need to do is add some details specific to that one particular product. And the controller itself is taking care of all of the logic for pulling that ID from the URL, and it's storing it in a model so all we need to do is access that model that we've referenced up here. So, for the H2, for example, instead of ProductDetail here, let's actually put the name of our product. So the way we would do that, if you remember, is we type @Model with a capital M, ., and then the property that we want, which is ProductName. Then we might have a paragraph here, with some strong text in it, maybe we want our price to be bold, so for this we're going to type @Model with a capital M.ProductPrice. Then we'll have one more paragraph here with a description, so we'll say @Model., and we'll just use the up arrows to go up to product description and hit Enter to fill that out, and that will put the entire product description in this paragraph. And then we might want a button to add it to the cart. Now this particular button, we're not gonna program. We're gonna leave that up to our developers because that involves more back end logic that I don't want to get into, and that we as designers really shouldn't be getting into. We're gonna leave that stuff up to the developers. So, we're just gonna leave this href blank for now, or, you can put a pound sign in there, if you want. Whatever you want to do there. But, I do want to give it a class of btn, oops, we just need one equals sign there. We'll give it a class of btn, which is the bootstrap class for a regular button. I'm also gonna give it a class of btn-lg to make it a large button, and then we'll also give it a class of btn-default. So then inside that link, let's just add some text here, Add to cart. And then maybe we'll have two separate buttons here, and the second one will say Checkout. So the only thing left to do is to test this thing and see if it works. So what we want to do now is we want to create a URL that contains the controller, which is Shoppingw forward slash, and then the action name, which in this case is ProductDetail, and then forward slashw and then we're gonna have a product ID so if we go back to sfo shopping controller down to the GetProducts method we can see that our first product has an ID of 1. Right here, zoom in a little so we can see that better. And that's our beard wax. If we use a product ID of 2, we should see info for the tree ax, three is the flannel shirt, and four is the suspenders. So let's test this out. I'm going to hit CTRL+F5 to test that in a browser. And it's throwing that up on a separate page, so let me grab that and drag it over here. And that took us to our default page here, so I'm gonna jump over to products. And we can't click on these learn more buttons yet, cuz we haven't hooked them up. But we can come up here to our URL, and after Shopping we can type forward slash ProductDetail, and then forward slash, and let's use the number 1 for now, and hit Enter. And sure enough, we see that the product that has an ID of 1, which is our beard wax, is now showing the appropriate information. So we have the name of the product, the price, the description, and a couple of buttons. If we change this value to 2, we're still looking at the same HTML page, the only difference is that it's pulling in a different set of data now, so now we're seeing the data for the tree axe. If we change it to 3, we get flannel shirt. If we change it to 4, we get suspenders. If we get rid of it all together, let's see if our redirect works. Sure enough, it takes us back to the product list page, which is exactly what we wanted. Now ,what happens if we give it an ID that doesn't exist, such as 5? Well we're gonna get an error page. But this is one of those instances where we're gonna let the developers take care of that. This is more logic than you really want to get into as a designer, unless you have more programming experience. In fact, if you do have some programming experience, then you probably already have some good ideas about how you would handle that error. But we're gonna go ahead and leave that one alone. So the last thing I wanna do here is to create a link to get us to this page. So if we go back to our product list page, I wanna be able to click on Learn More to take us to our individual product detail page. So we're gonna go back to our index page, so we're gonna go to our Views folder under Shopping, and Index, and here we have that button, so instead of spelling out our button like this, we're going to do this a little bit of a different way. I'm going to use the @Html.ActionLink method, and inside the ActionLink method, we need a few things. First we need the text that's gonna be in the button, so I'm going to put Learn More inside quotation marks. Then we'll type comma, space, and then we need our action name, which in this case, is going to be ProductDetail, and then we need to pass in the appropriate ID. So the way we're gonna do that, is we're gonna type comma after the closing quotation marks for ProductDetail, and I'm gonna type New, and then open and closed curly brackets there, and then inside those curly brackets, I'm gonna set id equal to product.ProductID. And remember, product is whatever individual product we're currently looking at as we're looping through model.product. So we're looking at the product ID of whatever current product we're talking about, and we're storing it in this id walue here. So let's take a look at that and see if that works. We'll save our HTML page there, jump back into our browser, let's refresh our page, and we've just made a change to the HTML page itself, so we don't have to rebuild, we just have to refresh. And here's our new Learn More link, so let's click on this one for beard wax. And sure enough, it takes us to Beard Wax. We'll go back. We'll click on the second one. And it takes us to Tree Axe. Third one takes use to Flannel Shirt. And the fourth one takes us to Suspenders. So we have one problem left, and that's how do we style this? The way we styled our first button is we simply gave is a couple of CSS classes. How can we give CSS classes to our links whenever we use an HTML ActionLink method? Well, let's discover how to do that. Let's jump back into Visual Studio, and we're gonna do something very similar to what we did here. So I'm, just for kicks, gonna move this down to the next line so we can see it a little bit better, and I'll tab it over and that'll work. So it's still part of the same method, I'm just breaking it up so we can read it better. And after the closing curly bracket for id = ProductID I'm gonna type a comma and go to the next line, and here we're gonna do the same thing. We're gonna type new, except instead of, let's try that again. There we go. And then inside the curly brackets, instead of id, I'm gonna point to @class, which will allow us to add a CSS class here, and we're gonna set that equal to whatever value we want. So I'm gonna set it equal to btn, space, and then btn-primary. And that should get us to where we need to be, so let's save our file again, jump back over to our page and refresh, and sure enough, now our second link has the right styling, so let's jump back to her page and just get rid of our first link which is this anchor tag here. We'll delete that, save our page, refresh our page, and now we should be able to navigate to our different product detail pages for our different products. So that's how you handle product detail pages, or any kind of page where you're gonna pass in an ID for a particular item in order to pull in the appropriate information on the page. So thank you for watching, and I'll see you in the next lesson.

Back to the top