Day21 - 轻前端 Vue - 动态 新增/删除 Collection 项目(四)

Case01

与 Day20 重点差异的部份：

• Controller 内 Action：

  [HttpGet]
  public IActionResult Case01()
  {
      // 透过 ViewBag 给定前端 Orderitem 空物件 !
      ViewBag.EmptyItemJson = new OrderItem().ToJson();
  
      var vm = new ViewModel
                  {
                      OrderDate = null,
  
                      // Array 先给定空阵列後，前端就可以不用额外处理 !
                      Items     = Array.Empty<OrderItem>(),
                  };
  
      return View(vm);
  }
  
  // ...
  

• View ：

  • 加上新增订单项目

    <th>
        <button type="button"
                v-on:click="add_item">
            新增
        </button>
    </th>
    

  • 加上删除订单项目

    <td>
        <button type="button"
                v-on:click="del_item(index)">
            删除
        </button>
    </td>
    

  • Vue 的部份

    • 新增 / 修改 的部份
      • 避免新增都加入相同 reference object，先将 empty_item 转成 json 字串，再转回 object !

    // ...
    
      setup(){
    
          // ...
    
          const empty_item = @(Html.Raw(ViewBag.EmptyItemJson));
    
          const add_item = function() {
              const cloned_empty_item = JSON.parse(JSON.stringify(empty_item));
              vue_model.Items?.push(cloned_empty_item);
          }
    
          const del_item = function(index) {
              vue_model.Items?.splice(index, 1);
          }
    
          // ...
    
          return {
              // ...
    
              add_item,
              del_item,
    
              // ...
          }
      }
    
    // ...
    

这篇先到这里

因为不使用 Html Helper / Tag Helper，所以无法从 __RequestVerificationToken 取出 Antifogery Token

下一篇来看看另一种加上 Antiforgery Token 的做法 !