Video

Stappenplan

1. In de ReadingOne van Order een lijst van OrderItems toevoegen:
   1. Een OrderItemList vullen in de OnGet methode van de OrderModel klasse in het ReadingOne.cshtml.cs bestand:
      1. voeg een property toe:

         public List<Bll.OrderItem> OrderItemList { get; set; }

      2. pas de OnGet methode aan:

         public void OnGet(int? id)
         {
             this.Order = dbContext.Order.SingleOrDefault(m => m.Id == id);
             Order.ShippingMethod = dbContext.ShippingMethod.SingleOrDefault(m => m.Id == this.Order.ShippingMethodId);
             Order.Status = dbContext.OrderStatus.SingleOrDefault(m => m.Id == this.Order.StatusId);
             Order.Customer = dbContext.Customer.SingleOrDefault(m => m.Id == this.Order.CustomerId);
             OrderList = dbContext.Order.ToList();
             OrderItemList = dbContext.OrderItem.ToList();
         }

   2. In de ReadingOne.cshtml view de html toevoegen om de lijst van orderitems voor de geselecteerde order te tonen:

      <h2>Order Items</h2>
      <table class="list">
          <thead>
              <tr>
                  <th>
      
                  </th>
                  <th>
                      BookId
                  </th>
                  <th>
                      OrderId
                  </th>
                  <th>
                      Quantity
                  </th>
              </tr>
          </thead>
          <tbody>
              @foreach (var item in Model.OrderItemList)
              {
                  <tr>
                      <td>
                          <a href="OrderItem/DeleteOne/@item.Id">Delete</a> |
                      </td>
                      <td>
                          @item.BookId
                      </td>
                      <td>
                          @item.OrderId
                      </td>
                      <td>
                          @item.Quantity
                      </td>
                  </tr>
              }
          </tbody>
      </table>

2. Voeg de methode OnPostInsertOrderItem in de OrderModel klasse toe:

   public ActionResult OnPostInsertOrderItem(Bll.OrderItem orderItem)
   {
       if (!ModelState.IsValid)
       {
           // als er een foutief gegeven is ingetypt ga terug
           // de pagina en toon de fout
           return Page(); // return page, nog een nieuwe ingeven
       }
       // dbContext.OrderItem.Update(orderItem);
       dbContext.OrderItem.Add(orderItem);
       dbContext.SaveChanges();
       // keer terug naar de ReadingOne pagina van Order
       return RedirectToPage("ReadingOne");
   }

3. Voeg een property toe:

   public Bll.OrderItem OrderItem { get; set; }

4. In ReadingOne view van Order een form toevoegen om een OrderItem te kunnen inserten:

   <h3>InsertingOne OrderItem</h3>
   <hr />
   <br />
   <form method="post">
       <fieldset>
           <input type="hidden" value="@Model.Order.Id" id="" name="OrderItem.OrderId" />
           <div>
               <label asp-for="OrderItem.BookId"></label>
               <input asp-for="OrderItem.BookId" />
           </div>
             
           <div>
               <label asp-for="OrderItem.Quantity"></label>
               <input asp-for="OrderItem.Quantity" />
           </div>
       </fieldset>
       <div>
           <button type="submit" value="Insert" asp-page-handler="InsertOrderItem">Insert Order Item</button>
       </div>
   </form>

   1. Geef de Id van de Order mee waaraan de Order Items moeten worden toegevoegd:

      <input type="hidden" value="@Model.Order.Id" id="" name="OrderItem.OrderId" />

   2. De handler heet InsertOrderItem, die moet de methode InsertOrderItem van de OrderModel klasse oproepen en uitvoeren.
5. Nu nog de Delete knop voor OrderItem
   1. Voeg de methode OnGetDeleteOrderItem in de ReadingOneModel klasse van Order toe:

      public ActionResult OnPostDeleteOrderItem(Bll.OrderItem orderItem)
      {
              dbContext.OrderItem.Remove(orderItem);
              dbContext.SaveChanges();
              return RedirectToPage("ReadingOne");
       
      }

   2. Zorg dat de knop binnen het form element staat en voeg een knop in de tabel met OrderItems toe:

      <form method="post">
          <h2>Order Items</h2>
          <table class="list">
              <thead>
                  <tr>
                      <th>
      
                      </th>
                      <th>
                          BookId
                      </th>
                      <th>
                          OrderId
                      </th>
                      <th>
                          Quantity
                      </th>
                  </tr>
              </thead>
              <tbody>
                  @foreach (var item in Model.OrderItemList)
                  {
                      <tr>
                          <td>
                              <button type="submit" name="OrderItem.Id" value="@item.Id" asp-page-handler="DeleteOrderItem">Delete</button>
                          </td>
                          <td>
                              @item.BookId
                          </td>
                          <td>
                              @item.OrderId
                          </td>
                          <td>
                              @item.Quantity
                          </td>
                      </tr>
                  }
              </tbody>
          </table>
          <h3>InsertingOne OrderItem</h3>
          <hr />
          <br />
          <fieldset>
              <input type="hidden" value="@Model.Order.Id" id="" name="OrderItem.OrderId" />
              <div>
                  <label asp-for="OrderItem.BookId"></label>
                  <input asp-for="OrderItem.BookId" />
              </div>
      
              <div>
                  <label asp-for="OrderItem.Quantity"></label>
                  <input asp-for="OrderItem.Quantity" />
              </div>
          </fieldset>
          <div>
              <button type="submit" value="Insert" asp-page-handler="InsertOrderItem">Insert Order Item</button>
          </div>
      </form>