Day17 - 进入轻前端 Vue 前的范例

这篇主要整合以下几点来实作

Tag Helper
动态新增/删除订单项目
後端加上计算功能

方便之後与轻前端 Vue 的版本做个比较 !

Case01

延续前一次的范例

後端变更

public class ViewModel
{
    // ...

    [Display(Name = "小计")]
    public decimal? SubTotalAmount { get; set; }

    [Display(Name = "税金")]
    public decimal? Tax { get; set; }

    [Display(Name = "总计")]
    public decimal? TotalAmount { get; set; }
}

public class OrderItem
{
    // ...

    /// <summary>
    /// 单价
    /// </summary>
    [Display(Name = "单价")]
    public decimal? UnitPrice { get; set; }

    // ...

    /// <summary>
    /// 金额
    /// </summary>
    [Display(Name = "金额")]
    public decimal? Amount { get; set; }
}

Contoller 新增计算功能 Action

[HttpPost, Route("api/[controller]/[action]")]
[ValidateAntiForgeryToken]
public IActionResult Calculate([FromForm]ViewModel vm)
{
    if (vm?.Items?.Length > 0 == false)
    {
        return Ok(vm);
    }

    vm.SubTotalAmount = 0;
    foreach (var item in vm.Items)
    {
        item.Amount = item.UnitPrice * item.Quantity;

        vm.SubTotalAmount += item.Amount.GetValueOrDefault();;
    }

    vm.Tax         = vm.SubTotalAmount * 0.05m;
    vm.TotalAmount = vm.SubTotalAmount * 1.05m;

    return Ok(vm);
}

前端变更

Case01.cshtml


...

  <th>
      <label asp-for="Items.FirstOrDefault().UnitPrice"></label>
  </th>

...

  <th>
      <label asp-for="Items.FirstOrDefault().Amount"></label>
  </th>

...

  <p>
      <label asp-for="SubTotalAmount"></label>
      <label>@(Model?.SubTotalAmount)</label>
      <input type="hidden"
             readonly
             asp-for="SubTotalAmount" />
  </p>
  <p>
      <label asp-for="Tax"></label>
      <label>@(Model?.Tax)</label>
      <input type="hidden"
             readonly
             asp-for="Tax" />
  </p>
  <p>
      <label asp-for="TotalAmount"></label>
      <label>@(Model?.TotalAmount)</label>
      <input type="hidden"
             readonly
             asp-for="TotalAmount" />
  </p>
...

OrderItem.cshtml

...

    <td>
        <input type="number"
            name="Items[@(itemIndex)].UnitPrice"
            step=1
            min=0
            onblur="Calculate()"
            asp-for="UnitPrice" />
    </td>

...

    <td>
        <label>@(Model?.Amount)</label>
        <input type="hidden"
            readonly
            name="Items[@(itemIndex)].Amount"
            asp-for="Amount" />
    </td>

...

js 部份


// ...

window.CalculateUrl = '@Url.Action("Calculate")';

// ...

window.Calculate = function () {

    fetch(CalculateUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'RequestVerificationToken': AntiForgeryToken,
        },
        body: $('form').serialize(),
        })
    .then(response => response.json())
    .then(data => {
        RenewAmounts(data);
    })
}

window.RenewAmounts = function (viewModel) {

    $('#Items > tr > td > input[name$="Amount"]').each( (index,dom) => {
        const amount = viewModel?.Items[index]?.Amount;

        $(dom)?.val(amount)
                ?.prev()?.text(amount);
    });

    $('#SubTotalAmount')?.val(viewModel?.SubTotalAmount)
                        ?.prev()?.text(viewModel?.SubTotalAmount);

    $('#Tax')?.val(viewModel?.Tax)
                ?.prev()?.text(viewModel?.Tax);

    $('#TotalAmount')?.val(viewModel?.TotalAmount)
                        ?.prev()?.text(viewModel?.TotalAmount);
}

// ...

画面如下：