Now I have created five products.
What we want to do is on the homepage, let's display all the products.
So I will start the application here, and we will be working inside the customer area.
We have home controller and inside home we have the index view that will close everything else here
with home controller.
We need to get a unit of work to access all the product so that look at that and we at the using statement.
Then insect index.
Think about what will be the model that they will need.
We need a collection of product.
So we need to get all the product left and we have to send them to the view.
So right here, we will get an innumerable way to control dark water using statement of generics.
And this will be on product.
We need a list of products.
I will call this product list as equal opportunity for our product to get our.
We want to retrieve all of the products, but when we do that, we also want to include the properties
of category and cover type.
If you make a case in mistake here, this won't work.
So we have our product list.
Let's give that product list to our few.
Once we have that inside our view, if you right click here and go to view, we will navigate here to
the home page.
Inside any of The View, the first topic that you should do is to say what will be the model of this
view?
We are passing from controller and I innumerable of product.
So that is what we will receive right here.
You can see the product here is not found.
That could be because of the view import.
We already have the models, so I'm surprised why that is not found here.
And you can see it is getting confused with the product index and product absurd.
We want to go to the models here so we can directly say bulk book dark models dark product.
Sometimes using the same names for folder can be confusing with the reference.
Then we have our enumerable right here, so that will additive give that some bootstrap classes for
row and padding bottom of three.
What we want to do is we want to have a for each loop so that we can look through all of the products
that we have and display them so we can say variable product in our model.
When you define the model for the view, the end will always be lower case.
And whenever you want to access the model that you defined here inside your view, that will be a capital
M. Make sure to always remember that or else it won't work inside here would be to create a day of of
class column large three so that in a large screen, we will see Ford products next to each other.
And in a movie on screen, I can see empty six so that we can see two products next to each other.
These are just bootstrap partition in here.
We will create a class give back row and padding off to finally within that will additive give it a
class of card.
And let me also give batting one, give it a great border and a border radius of.
I think so.
Actually, I do not want card here that middle column 12 for the full plate.
And finally, I will add a class of card.
In fact, that we will be displaying the image so we can set the SIRC and that is inside our product.
So here we will sit at the rate we have product dot image, the URL that will display an image and we
will give it some bootstrap classes of card image top and rounded.
So with that, our image looks good.
Let's run the application and see if we can view the images for all the products.
And great, we can see all the images, I have used a duplicate image here for two products.
So I will fix that later on.
Let's have more details right here.
So if we go back after the image was additive, give it a class of padding left off one in there, we
would add a paragraph, give that a glass of car title and heading five.
We want to display that title of the book.
I will also give that the Bush draft class text primary and the title will be inside product title.
In the next line.
We want to display the author.
So let me copy and paste it one more time here.
This won't be etch five.
Let's remove that and we can make this text secondary.
Here, we want to display the author name.
Let me save this.
Go back and refresh.
And that looks good.
Then we can copy this Dave bastard again with adding left one, we want to display the price.
So in fact, photograph here we will see a list price colon.
And then if you remember, we have the list price as well as the other price that we have with.
We've had a strike here because we want the list price to be displayed in a bold attack here.
We will see a dollar sign and then intact product.
We have list price.
I will convert that to two decimal, so we will set two.
Zero point zero zero.
Let's refresh.
And this looks great.
Our list price is cancelled out.
And then on the next line, we want to display that this book is available as low as.
And we want to display the Price 500 book because that is the lowest price that someone can buy.
So let me copy this again.
They said one more time, this time we will say as low as and inside bold will display price hundred.
We don't want to strike that out.
Let's remove that.
Let me see if that.
Let's go back and refresh.
And this looks much better.
Let me give this text in rather than second free and perfect.
This looks much better.
Now, I have added the same book two terms here, so let me go to product and added one of them.
We do not have vanish in sunset.
Let me add that.
That's update.
And go back.
But in fact, a five books are looking great right now, so our homepage here looks good.
But before the altar, we can add a by keyword right here before author.
We can use by.
Let me save that.
And that looks good.
Also, since we are inside card here, I can have a div gift that a class of card party and I will close
that right here.
Perfect.
That is much better now in future, Apple, not waste time on trading or the bootstrap and styling that
we did in this with you.
And the reason is this course is purely on net core and MVC.
So I want to give you guys as much as I can when it comes to MVC and darknet core rather than focusing
on styling.
So I will provide snippets moving forward, and I will show you how you can use them directly in the
code.
So that being said, the home page looks good.
The only thing that remains here is adding a button to after card.
Here we will add one death and an anchor tag in that anchor tag.
We want to redirect to some action.
Let's call that detailed action, and we will give it some bootstrap classes of BTN between primary
and form control.
Now, when we go to the details page, we will need the ID of the product so we can use the ESB route
and we can pass the page either.
This will be product that I.D..
In fact, the anchor, Ted, let me display details, save this.
Go back and take a look and perfect.
This looks good.
Let's continue from the next read you.