将值绑定到 foreach 循环中的元素

Question

我有

• foreach 循环填充类别列表和
• 在内部，另一个 foreach 循环填充项目。

使用 jQuery，

• 当单击 addItemButton 时，整个 foreach 循环被隐藏，并且在同一空间中显示项目创建表单。

代码 sn-p 中显示的输入元素将 id 传递给表单。

问题在于，无论单击哪个类别的按钮，它都只会传递第一个类别 ID。

我目前的想法是使用 jQuery 并创建一个对象数组来捕获按钮和输入元素的唯一 id，然后将它们的 Ids 绑定在一起作为一个对象，然后使用逻辑如果按下 button1 输入值等于 categoryid1。我不确定这是否可行，或者是否有更好的方法。

关于如何做到这一点的任何想法？

我想完成什么

• 类别中的每个按钮都会打开表单并将类别 ID 传递给该表单。
• 所有类别只有一个创建项目表单。

foreach 循环

@foreach (var category in categoryList)
{
  <li>
     <a class="sidebar-sub-toggle">
        <i class="ti-home"></i>@category.Name
        <span class="badge badge-primary">2</span>
        <span class="sidebar-collapse-icon ti-angle-down"></span>
     </a>
     <ul>
       <li>
        <button class="addItemButton" type="button">Add Item</button>
       </li>
       <input class="categoryId" value="@category.Id" 
              name="CategoryId" form="itemCreateForm" />

       @foreach (var item in itemList)
       {
          @if (item.CategoryId == category.Id)
          {
             <li><a href="index.html">@item.Name</a></li>
          }
       }
       </ul>
  </li>
}

表格

<form id="itemCreateForm" asp-controller="Items" asp-action="Create">
  <div id="itemCreateFormContent" class="form-group">
    <label class="col-form-label">Item Name</label>
    <input name="Name" type="text" class="form-control">
    <br />
    <label class="col-form-label">Item Type</label>
    <select id="itemTypeList" name="ItemTypeId" class="form-control">    
    </select>
    <button id="addItemType" type="button" class="btn btn-link">Add</button>
    <br />
    <label class="col-form-label">Language</label>
    <select id="languageList" name="languageId" class="form-control">
    </select>
    <button id="addLanguage" type="button" class="btn btn-link">Add</button>
    <br />
    <label class="col-form-label">Framework</label>
    <select id="frameworkList" name="FrameworkId" class="form-control">
    </select>
    <button id="addFramework" type="button" 
            class="btn btn-link">Add</button>
  </div>
  <div class="form-group text-center">
     <input type="submit" value="Create" class="btn btn-primary" />
  </div>
</form>

Answer 1

<input class="categoryId" value="@category.Id" name="CategoryId" form="itemCreateForm" /> 在您的循环中创建多个输入控件，这些控件都与“itemCreateForm”表单相关联。将输入类型控件放入表单本身会更容易。在您的按钮“data-catid”上添加一个属性，然后您可以在单击按钮时轻松获取该属性，并在显示之前将该值推送到表单中的字段中。

在你的循环中，改变：

<button class="addItemButton" type="button">Add Item</button>

到：

<button class="addItemButton" type="button" data-catid="@category.Id">Add Item</button>

在您的循环中，删除：

<input class="categoryId" value="@category.Id" name="CategoryId" form="itemCreateForm" />

在您的表单中，在表单元素内添加：

<input type="hidden" name="CategoryId" />

然后将您的 jquery 更新为：

$(document).on('click','.addItemButton', function() {
  var cat = $(this).data('catid');
  $('[name=CategoryId]').val(cat);
  // Hide your stuff here

  // Show your create form here
});