FREELessons: 20Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.13 Pulling in Data for the Product Detail Page

Before getting to the Product Detail view itself, we need to construct the logic for the associated Action. In this lesson, you will use the code you refactored in the last lesson to pull in the data you will need for your View.

3.13 Pulling in Data for the Product Detail Page

Hello, and welcome back to ASP.NET MVC for Designers. In our last lesson we got started creating our product detail action. We haven't created our page yet, but we've created our action, now we just need to fill out our action a little bit. So I'm gonna make a copy of Store10, we don't wanna save over any of our changes we've already made. So we'll just create a new copy of this. And let's rename this Store11, then we'll jump into that Store11 folder and open up the solution. So then we can close our other version of Visual Studio there, and let's open up our shopping controller and our, under views, shopping will open up our index.cshtml page. And this index.cshtml page shows our list of products. Now remember, everywhere we see this at sign followed by some code, this is some Razor code where we're calling on our model to get different piece of information. So up here we're getting different pieces of customer information. And then down here we're grabbing information for each of our products. We're looping through Model.Products in order to display the information for each individual product. With our new page, it's gonna be a little bit different because all we need for the new page is the information for one particular product. So our model type for our new page is simply going to be a product. So we can use the product model for that product detail page. So let's jump back into our shopping controller. And we've already created our product detail page here, but as I've mentioned before, we are now going to pass in an ID to this product detail action. And we're gonna pass that through in the URL by pointing to shopping/product detail/ and then the ID number of the product that we want to view. If you remember, in our list of products down here, each product has a name price description and ID. This product ID is the value that we're going to pass into, of the URL after the controller and the action. So in order for that to work right, we need to pass that value into our action here. And the way we do that is we pass it inside the parentheses for our method definition. So, this product ID is an integer, so I'm gonna type int, and then I'm also gonna put a question mark after int. What this means is that this is an optional value or a nullable value. So if no value is passed in, if we don't type /1 or /2, or whatever that product ID is, then we can handle it in a different way. And, what I wanna do is, if they don't include a number or a product ID or if that product ID doesn't exist, then we want it to basically reroute them to the product list page or this index action up here. So, we have our nullable integer here and we're gonna call it ID. Now keep in mind that you have to call this ID or it's not gonna work properly, because when it's set up in our route config file in the app start directory, route config, you'll see that it's called ID here. And we need to give it that same name. And we can see that name here, too, ID = URL Parameter.Optional. So, you don't really need to worry about how all of this stuff works as long as we use it right. So, we can go back into our controller. We're now passing in an ID. And we can use that ID inside this method to get what we're looking for. Now remember, for this particular view, for our model, all we really need is the product class. So, our model is simply going to be of type product, or the data type for our model is gonna be a product. So let's create our model by typing Product with a capital P, space, model, and we're gonna set that equal to something. And if you've never used C# before, then I'm about to show you some code that you've probably never seen before. This is very original looking code, and it's not gonna make a whole lot of sense at first. But it's really not as complicated as it looks. So what I'm gonna do is, I'm gonna call our GetProducts method, and that will pull all our products from this method that we created down here. It'll pull our beard wax, our tree ax, our shirt, and our suspenders. So it's gonna pull all of those products. But I don't wanna stop there. I only need one of those products. And that product, that product ID for that product needs to match whatever ID is passed into this particular method or this action. So the way I'm gonna do this is after GetProducts, we have our open and closed parenthesis and then without any spaces directly after those parentheses, I'm gonna type .Where, with a capital W, and then I'm just gonna type the rest of this out and then explain it to you. Because if I try to explain it while I'm typing it out it might not make much sense. So I'm going to type it all out. So we have Where(p. And this is gonna be p.ProductID, and then = = the ID that we passed in here. Then I'm gonna type .First. Now once your developers get a hold of this code, they might tweak this a little bit to make it a little more reliable and a little less error prone, but again, we really just want to give them a head start. So let me explain what this is doing. This is calling GetProducts, which returns a list of products. So for all intents and purposes here, this right here is a list of products. So we're looking at that list and we're saying, we wanna grab the item in that list where the product ID is equal to the ID that was sent in, the ID that was passed into this method. And then we have this .First here because we want to grab the first item that matches that criteria. And we're using this little lambda function here, and I don't want you to worry too much about what that means or how that lambda function works. As long as you get this syntax right, you should be okay. So again, we're getting our products where the product ID is equal to the ID that was passed into this particular method. So in other words, this model right here is going to be equal to whatever product has this ID that we're putting into the URL. And I can prove that to you by typing model., and then the properties that show up here are all the properties that we defined on the product model. So if we jump over to our Models folder and open up the product.cs model that we created, we have name, price, description, and ID. Similarly, over here in our CS file, in our Shopping Controller I should say, if we type model., then we can see those same items here, name, price, description, and ID. Now, I don't need to access any of those right now, I just wanted to show you that that was available. So we have our model, and all we need to do now is pass that model into our view so that we can display all of the information for that model, or for that particular product. So we're gonna pass the model into the view. Now we only want that to happen if this ID is not null, so, surrounding all of this code, we're simply gonna say if ID is not, by typing !equals, and we're gonna say, if ID is not equal to null, not nell, null, then we want to do all of this. So I'm gonna drag that up here, and then we want to tab this over like so, so it's only going to do this if that ID is null. Otherwise, let's put an else statement here, we want to redirect. And the way we do that is we're also returning a value here. Anytime we have a data typeset up here that's not void, then we have to return something. So we're gonna return a different type of action result. A view is one type of action result, but another type of action result we can return is called redirect to action. And then inside the parentheses here, we simply type what action we want to redirect to. Now if we're redirecting to a different controller then we also need to include the controller name, as well. But we're just redirecting to another action in this same controller and I want to redirect to the index action. So we're gonna put that inside quotation marks. And then after the closing parenthesis here, we'll type semicolon to end that statement. So if this ID comes back as null, if we just have Shopping/ProductDetail for the URL with no ID entered, then it should redirect us to the product list page or the index page in the shopping controller. Otherwise if it does have a value, then we will put it here. Now, there's definitely more logic that needs to happen here in order to make this more secure, to keep it from breaking if somebody puts an invalid ID, for example. But again, that's something we're gonna let the developers take care of. Every developer has their own way of taking care of things like that, so we're gonna let them handle that. We'll just keep it simple for now. So we've done everything we need to do to set up our action, and in the next lesson we're gonna finish this out by creating the actual view, itself. So thank you for watching and I'll see you in the next lesson.

Back to the top