Day25 - 加上 jQuery UI Selectmenu

这一篇来把上一篇范例订单项目的名称改为下拉选单的项目

下拉选单要使用套件 jQuery UI Selectmenu

Case01

ViewModel

• 把 OrderItem Name Property 改为以下 Property

  ...
  
  /// <summary>
  /// 订单项目编号
  /// </summary>
  [Display(Name = "订单项目编号")]
  public int? OrderItemId { get; set; }
  
  ...
  

Controller

• 建立取得订单项目清单 method

  private Option[] GetOrderItems()
  {
      return new Option[]
              {
                  new() { Value = 1, Text = "系统重灌" },
                  new() { Value = 2, Text = "交通费" },
                  new() { Value = 3, Text = "客制化服务" },
              };
  }
  

• Get Case01 Action

  • 给定下拉选单所有订单项目
  • 把范例简单化，预先给定既有的资料

  [HttpGet]
  public IActionResult Case01()
  {
      // 给定下拉选单所有订单项目
      ViewBag.OrderItemsJson = GetOrderItems().ToJson();
  
      ...
  
      // 把范例简单化，预先给定既有的资料
      var vm = new ViewModel
                {
                    Items = new OrderItem[]
                            {
                                new () { OrderItemId = 1, UnitPrice = 600, Quantity = 1},
                                new () { OrderItemId = 2, UnitPrice = 300, Quantity = 1},
                                new () { OrderItemId = 3, UnitPrice = 1000, Quantity = 1},
                                new (),
                            },
                };
  
      return View(vm);
  }
  

View

• 把订单项目标题的名称，改为项目

  <th>
      <label>项目</label>
  </th>
  

• 把订单项目名称 input 改为绑定至订单项目编号

• 下拉选单给定所有的订单项目

• 额外建立一个自订的 attribute item-index 来存放订单项目的 index

  • 目的是为了在 Selectmenu 变更时，可以正确把值回写回对应的订单项目的订单项目编号

  
  <td>
      <select name="select-menu"
              v-bind:item-index="index"
              v-model="item.OrderItemId">
          <option value="null">请选择</option>
          <option v-for="order_item in order_items"
                  v-bind:value="order_item.Value" >
            {{ order_item.Text }}
          </option>
      </select>
  </td>
  
  

• vue

  • 以变数存放所有订单项目
  • onMounted 设定初始化 Selectmenu 及 select 某个下拉选单项目的动作

  
  const order_items = @(Html.Raw(ViewBag.OrderItemsJson));
  
  onMounted(() => {
      $('[name="select-menu"]').selectmenu({
          width: 200,
          select: function (event, ui) {
  
              // 从 item-index 取出 Items 内对应的 Item
              const item_index = event.target.attributes.getNamedItem('item-index').value;
              const item = vue_model.value.Items[parseInt(item_index)];
  
              // 更新其 OrderItemId
              item.OrderItemId = parseInt(ui.item.value);
          }
      });
  })
  
  
  return {
              order_items,
  }
  

这篇先到这里，下一篇来看看把 jQuery UI Selectmenu 放到 Vue Component 内 !