FREELessons: 10Length: 1.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Displaying a List of Objects

ASP.NET Core MVC uses the Razor view engine to generate HTML. In this lesson, you’ll learn how to send data from the controller to the view, switch in and out of C# code, and display a list of things.

Related Links

4.1 Displaying a List of Objects

In the previous lesson we created a new entry to our routing table so that we can make requests for specific products and then we wrote a couple of controllers. The first is a products controller which really we should get rid of because this was a more generic controller and we aren't going to be doing anything with it. So, let's go ahead and delete that. Now the other controller was for our guitars controller and this would control basically anything that we needed as far as our guitars are concerned. So, we would be displaying our guitars, we would be editing them and so on and so forth. So in this lesson we are going to create a view for the index action method and the idea is we would display all of our guitars that we have within our store. So in order to do that we need some data. So I've added a few files to the project and you will find them in the code download. The first is inside of a folder called models. It's called Guitar.cs. And it's just a simple guitar class. It has a few properties, and that's it. So that's going to be our model class for our guitars. Now, as far as working with the actual data, we want to go to the data folder. And inside of here are two files the first has an interface called IGuitarRepository it defines a method for retrieving all of the guitars. There's one for retrieving an individual guitar and then one for updating a guitar. And then there is a concrete class called StaticGuitarRepository that implements that interface. Now the idea about StaticGuitarRepository is that this is working with a static set of data, and you can see that here. There is a private read only list of guitar called _store. So this class is going to be working with that data store. So the idea is that we could use this class for our testing purposes and development but then whenever we wanted to actually interface with an actual data store then we would write another class for working against that data stored be it a database, or a flat file, or whatever. So there are the three methods implemented. All gets and updates but this is going to throw a not implemented exception because we aren't going to do anything as far as updating our entities in this lesson. So those are the files that you will need to add to your project. And we can just get started. So we're going to create a view for our index. Now if we look at the home controller the default was for our action methods to return an I action result and then to return a view. So this view method actually returns what's called a view result. It's just a different type of result. We have a variety of types of results. We have a JSONResult, we have a Contentresult. So if we wanted to return just symbol content like a string, we could do that. And we could also create our own types of results. If we wanted to generate a PDF document we could create a PDF result and make that class implement this I action result so that we could just return PDF or whatever we wanted to call that method. So, an IActionResult is just the result of executing an action. And in the case of our index, we want that action to return a view. So, we're going to change this from returning a string back to IActionResult. And then we are simply going to return View(). Now by simply saying return View(), we're saying that we are going to return a view that's called index for our GuitarsController. So that means inside of our Views folder we need to have a sub folder called Guitars. So, let's create a new folder called Guitars and then inside of Guitars we're going to have a new file simply called Index.cshtml. So our index action method is going to return the view of index CSHTML. So inside of this file let's just say h1 and this is our list of guitars and that should be enough. So let's go to the browser and let's make a request here. And we should just see our view, although we don't. So why is that? Something probably didn't get saved. Let's make sure that saved. GuitarsController was not saved. That's the problem. So we'll wait a second for that to re-compile. Let's refresh and then we should see our view. Now notice that instead of just returning a string of data we now have not just the markup that we wrote, but we have everything else. The reason being because our application is set to automatically include the layout page, and the layout page defines basically everything that is not part of our view so all of the menu, the footer. If there were any side bars those would be listed there as well. And we can see that setting inside of this _ViewStart. Now the files that begin with an underscore are thought of as helper files. These are files that aren't really going to be used directly by an action method that would be something that is either included within another view or they are used for the purposes of the layout page, or this _ViewStart is for defining default things for all of our views. So inside of _ViewStart, we see that the layout page is set to _layout. So by default all of our views are going to use this layout page so that we don't have to define that inside of our views. Now we could if we wanted to inside of index HTML we could say layout equals _layout, but we don't have to because that is inside of the view start. Okay, so we have our basic view, but we want to display a list of guitars. We don't want just some static content. Now there are some pages where we might want some static content, but that is not the case here. So what we want to do is inside of our guitars controller, we want to use our repository so that we could retrieve all of our guitars and then pass that on to the view so that the view could show those guitars. So let's add a private read only staticGuitarRepository. Did I spell that correctly? Let me look and set a guitar repository wow. Let's call that _repo and we'll go ahead and new that up. Now we're going to need to add a using statement for our data namespace. So if you're on Windows hit Ctrl+Dot, if you're on MAC hit Command+Dot and then select the option of using And that's going to pull in that using statement there so that inside of index we can say var guitars = _repo, and we want to call the all method to retrieve all of our guitars. But then we need to tell our view that hey here's some data that you need to render and all we do with that, is simply pass in the data that we want that view to display. So now our view is accepting data. The view itself needs to be aware that there is a model to work with. And so at the very top we say @model, and then we define the type of data that we are going to be working with. So this is going to be an IEnumerable of Guitar. Now we're going to get an error here. Let's go to the browser, let's refresh. And if we were in development mode then we would see what that error is. Basically it's going to say that it doesn't know what guitar is. So in this case we need to write the fully qualified name of this class. So this would be secondapp.Models.Guitar and if we go back to the browser and refresh then that error is going to go away. So here's the thing about the razor view engine that's what this is called with nvc. Any time you want to switch into code you use an (@) sign. So if you have an if statement you would say @if and then you would have your condition. And then let's see here inside of our curly braces let's say that if this was true which it obviously is, then we would have an h2 element that said hello h2. And so the idea of the razor view engine is that we could switch in and out of C# and HTML rather seamlessly. There's none of the ugly <%> from the old-school ASP and as well as the That you would find with PHP. It's simply an @ sign followed by an expression or a keyword or something else. So if we wanted to have a code block we could say @ and then an { and we could say var foo = "Hello". And then if we wanted to actually print that in the output we could say then the variable name foo and so if we view that in the browser there we see the results that we wanted. So in our case we want to display our list of guitars and we have that as our model. So we can say @ and then for each var guitar in and in order to reference our model it's simply called Model with a capital M. And we need this to be in a list. So let's actually do a ul element and then for each will say @guitar. and for right now let's just use the model property. So if we go back, refresh, we're going to see this is our list of guitars Talmon, the 245, and Stratocaster. So we are now displaying a list of our guitars but we also need to be able to display an individual guitar and we will do that in the next lesson.

Back to the top