FREELessons: 20Length: 2.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.10 Displaying the Data

Our products are set up, and now it’s time to display our items. In this lesson, you will loop through the dummy data and display it in your view in order to simulate what your developers might be coding once they take over the project.

3.10 Displaying the Data

Hello, and welcome back to ASP.NET MVC for Designers. Now that we've created our dummy data, we've created four separate products, we're gonna take those products and loop through them in our code, in our view, so that we can actually display them on the screen. And hopefully, this will mimic the way that our developers will be polling in our data and looping through it from the database. So I want to start again by by making a copy of our store, and well change the name here to store08, and then we'll jump into store08. And all the changes we make in this lesson will be stored there. So, let's close this other window. And we've created our model and we've also updated our shopping controller with our new products. Now, we have one more step before our controller is completely connected with our view. Now, our controller itself is connected with the view because we have this action, this index action we've created, but our model hasn't been hooked up properly yet. We created our model here and we populated it using four different products and then we returned it by passing that model into the view, but the view has to accept that model, and the way that happens is we're gonna jump into that particular view. We'll go to Shopping, and Index. Make sure it's Shopping > Index, not Home > Index. And then in Shopping > Index, at the top we have our ViewBag.Title, but just above that, we're gonna create another line of code that says @model space, and then the type of the model, and the type of that model that we're passing in is a list of products. So we're gonna say List, and then inside angle brackets, Product. Now as we saw in the last lesson, our product, the word Product here has a red underline which means we've got an error. But again, if we click on the word, we get this little drop down this little, let me click away from it and click on it again and move my mouse where you can see that little blue rectangle just below the first letter there, below the p. And if we hover over that rectangle we get this drop down. We can click on the drop down, and we can click on this suggested format. So I'll click on that, and it changes it to Store.Models.Product which is doing something very similar to what our using statement did here in our controller. The only difference is, instead of doing it with a using statement, we're just spelling out the entire path to that class. So again, Store is the name of our project, Models is the name of the folder, and then Product is the name of the class. So again, this particular view, the model for this view, is simply gonna be a list of products, and that list of products is being passed in our controller. So now hopefully we should be able to loop through that list of products that we've passed in in order to create something like what we see here. So I'm gonna get rid of products two through four here, I'm just gonna delete them, and we're gonna keep our row, our opening and closing row div tags, we're gonna keep them as is, but all of the rest of this is gonna be inside a loop. And we're gonna do this using a for loop, and if you've done a for loop in JavaScript, it looks very similar to what we're about to see here. The only difference is, this is using razor syntax. So, we're gonna start our for loop with an @ symbol, and then we'll type in the word for, and we're actually gonna do a for each loop, that would make more sense here. So this is gonna be a little bit different than what we would see in JavaScript with a for loop, but we want to loop through all of the items that we've pulled in to our model. So we're gonna say for each. And inside the parenthesis, I'm going to say var product in model. And then after the parentheses, we'll type an opening curly bracket and then I'll hit Enter, and you'll see our opening curly bracket here, our closing curly bracket here. And for now I'm gonna grab all of this HTML, and I'm going to hit Alt+Up Arrow to move that up, and then Tab to move it over so that it's indented in between these curly brackets, and I'll just get rid of this extra line here. So let me explain what this line of code is doing. What we're doing, and it kinda read like English, we're saying for each product in our model, we're going to display some information, and if we were to test our code right now by hitting Ctrl+F5. Then let me drag this over. We can see we've already got that for loop working a little bit, that for each loop. We can see that it's created four different items here, and if we had more items in our list, then we would see more items here on the page. But we've just got four items on the list, so we're seeing this beard wax four times. And the reason we're seeing the same product four times, is cause right now we just have our HTML hard coded with beard wax. So now we need to change that. So inside this for each loop, we can access each specific product that we've created and stored in our model. We can access each one of these by pointing to this product variable. And so, the first time we run through this for each loop, when it's looking at the very first product that we created, which was this beard wax, we can point to or .ProductName, I should say, and it will return the value Beard Wax. So let's test that. Let's go back to index.cs.html, and instead of typing out beard wax here, I'm gonna type @, because we're using C# now instead of HTML, so we've got to use this razor syntax. I'm gonna say @product.ProductName. And our razor syntax knows when that variable name ends, or when that property name ends, and our HTML begins over here. So that's all we need to do for that particular line. Now, one thing I forgot to mention, that I should probably point out, is that when declare our model up here at the top, we're using a lowercase m, but anytime we refer to it in our razor syntax throughout our view, you'll notice we're using a capital M. It's very important that you follow that convention, otherwise you might find your code not working properly. So again, make sure you use that properly and everything should be fine. So let's test this to see if our product name shows up properly. So again we'll save our file, and we've just made changes to our HTML file. We didn't make any changes to any CS files just now, so we can just jump back over to our browser and then refresh our page. And sure enough, now we see our four different product names. So we know that we're looping through those products properly. So now we just need to update the price and the description. Now, we're not really gonna see any difference in the description because we pasted the same descriptions four times for our models, but that's okay. We should see a difference in price at least. So let's jump back into our code, and for our price, you can probably figure out what you're gonna do now. We're gonna do the same thing we did for the product name except we're doing it for the price now. So @product.ProductPrice. Then for our description, we can highlight this entire description, minus the opening and closing paragraph tags, we need to leave those there, and then, as you might guess, we'll type @product.ProductDescription. So now, if we save and test one more time by hitting CTRL+F5 again, or actually we could just jump back over to our browser and refresh, you'll see that now all of our prices have updated as well. And we don't know it, but our descriptions have updated as well, because we're now using razor syntax for that description. So we know that product description is still being pulled in. If you really want to test it then you can go back to your shopping controller and just add syntax to differentiate these. We'll start this one with Lorem ipsum, maybe in the second one we'll get rid of the first word. On this third one, we'll get rid of the first two words and then here we'll get rid of the first few words, and then we'll start with this one here. So now they each start with a different word. So now, you'll notice we have changed the CS file, so we can't just refresh our page and expect it to work. Instead, we need to rebuild it by hitting CTRL+F5 again. And when it loads our page now, we should be able to jump to our products, and there we go. So now we have four different descriptions. Each one of them starts with a different word. So that's how you can loop through your data, even though we're using dummy data here. You can easily loop through your data to display your products or to display whatever type of data you're trying to display. And we've made things a little bit easier for our developers in the process, because our developers don't really have to change anything on the view itself. They can still run this for each loop. All they need to do is change, in the controller, instead of creating your models this way, they'll just add some logic here to pull all of that data from the database. So really, you've kind of given your developers a head start by creating the view in such a way that they won't really have to change it, unless they need to add more logic to it later on. But again, that's how you can loop through your data in your view in order to display your products on your screen. So, thank you for watching, and I'll see you in the next lesson.

Back to the top