Tech Junkie Blog - Real World Tutorials, Happy Coding!: Hour 16: ASP.NET Core Display Products

Tuesday, August 27, 2019

Hour 16: ASP.NET Core Display Products

In the previous post we successfully used the repository pattern to retrieve products from the database and set them to the Product objects.

In this post we are going to display those products in the Index.cshtml page

Here are the steps:

1. Open the Index.cshtml page in the Views/Home folder
2. Now declare a model of enumerable of products at the top of the page like this 

@model IEnumerable<Product>

You will noticed that the Product class has a red underline on it, when you mouse over Visual Studio will say that the Product reference is missing

Mouseover to find missing reference in Visual Studio












To fix this issue we have to add the Product namespace, which is NorthwindCafe.Web.Models in the _ViewImports.cshtml page.  Add the following line to the _ViewImports.cshtml file

@using NorthwindCafe.Web.Models

Your _ViewImports.cshtml file should look like the following, up to this point

@addTagHelper "*,Microsoft.AspNetCore.Mvc.TagHelpers"  
@using NorthwindCafe.Web.Models

3. We are ready to display some data in the Index.cshtml page first we are just going to make sure that everything is working by just typing in the following code

@foreach(var p in Model)
{
    @p.Name<br>
    @p.Description<br>
    @p.Price<br>
}

When you run the application you should see that the data is coming through and we can display the object in the Index.cshtml page.

4. Now let's use a little bootstrap to spruce it up a little with following markup

<div class="row">
  @foreach (var p in Model)
  {
      <div class="col-md-4" style="margin-top:20px">
          <div class="row">
              <div class="col-md-4 text-right"><strong>Product Name:</strong></div><div class="col-md-4 text-left"> @p.Name</div>
          </div>
          <div class="row">
              <div class="col-md-4 text-right"><strong>Description:</strong></div><div class="col-md-4">@p.Description</div>
          </div>
          <div class="row">
              <div class="col-md-4 text-right"><strong>Price:</strong></div><div class="col-md-4">@p.Price.ToString("c")</div>
          </div>
          <div class="row">
              <div class="col-md-7 text-right"><button class="btn btn-primary">Buy</button></div>
          </div>
      </div>
  }
</div>

The code above lists the products in rows of four columns it format the price with "c" to give it a $ in front of it. The .toString("c") formats the decimal number to the locale of user so if a user is from England he would have the pound symbol.  I've also added a "Buy" button that we will implement later.

The final page should look like this.

Products page in Asp.net Core




















The entire markup for the Index.cshtml page is the following:

@model IEnumerable<Product>


  <div class="row">
      @foreach (var p in Model)
      {
          <div class="col-md-4" style="margin-top:20px">
              <div class="row">
                  <div class="col-md-4 text-right"><strong>Product Name:</strong></div><div class="col-md-4 text-left"> @p.Name</div>
              </div>
              <div class="row">
                  <div class="col-md-4 text-right"><strong>Description:</strong></div><div class="col-md-4">@p.Description</div>
              </div>
              <div class="row">
                  <div class="col-md-4 text-right"><strong>Price:</strong></div><div class="col-md-4">@p.Price.ToString("c")</div>
              </div>
              <div class="row">
                  <div class="col-md-7 text-right"><button class="btn btn-primary">Buy</button></div>
              </div>
          </div>
      }
  </div>

Previous: Hour 15 AspNet.Core Use Repository Pattern To Show Poducts
Next: Hour 17: ASP.NET Core Add log4Net Support To NorthwindCafe

2 comments:

  1. EarlNetNovember 17, 2019 at 12:24 AM

    I have been working on this tutorial, however I am still getting an error on Product class having references even after updating _ViewImports.cshtml, I have been debugging the application for over a week with no success. What is it that I do not do right?

    ReplyDelete
  2. vé máy bay từ canada về việt namNovember 30, 2021 at 9:08 PM

    Đặt vé máy bay tại Aivivu, tham khảo

    ve may bay di my gia re

    vé máy bay từ california về việt nam

    vé máy bay từ đức về việt nam giá rẻ

    vé máy bay giá rẻ từ nga về việt nam

    chuyến bay từ anh về việt nam

    lịch bay từ pháp về việt nam

    chuyen bay chuyen gia

    ReplyDelete

Subscribe to: Post Comments (Atom)

Search This Blog