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

Question

我有

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

使用jQuery,

当点击 addItemButton 时，整个 foreach 循环被隐藏，项目创建表单显示在相同的 space。

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

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

我目前的想法是使用 jQuery 并创建一个对象数组来为按钮和输入元素捕获一个唯一的 ID，然后将它们的 ID 作为一个对象绑定在一起，然后在按钮 1 被按下输入时使用逻辑值等于 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
});

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

binding values to elements in foreach loops

html

asp.net

foreach

jquery

razor-pages