Question

在下面我写我的HTML页面的一部分。

<form method="post" enctype="multipart/form-data">
  <div>
    <label>Brand Name:</label>
    <input type="text" asp-for="@Model.Name">
  </div>
  <div id="divCategory">

  </div>
  <button type="button" id="btnAddCategory">Add Category</button>
  <button>Create new Brand</button>
</form>

，我有两个js和jquery函数，它们向divCategory添加了一个选择。蒙山这个选择我可以添加一些类别。

function countMyCategories() {
  if (typeof countMyCategories.counter == 'undefined') {
    countMyCategories.counter = -1;
  }
  return ++countMyCategories.counter;
}  

$(document).ready(function () {
  $('#btnAddCategory').on('click', function () {
    var catId = countMyCategories();
    $('#divCategory').append(
      '<select id="selectCategory' + catId + '" asp 
      for="@@Model.CatBrands[' + catId + '].CatId" class="mt-3 form-control 
      form-control-sm">' +
      '<option>---Select---</option>' +
      '</select>'
     );

     $.ajax('/API/GetCats')
       .done(function (categories) {
         for (var i = 0; i < categories.length; i++) {
           $('#selectCategory' + catId).append(
             '<option value="' + categories[i].id + '">' + 
              categories[i].name + '</option>'
             )
          }
        });
     });
 });

当我点击添加到由ID在div =“divCategory”中的“添加类别”按钮选择一个标签，但问题是，当我点击“创建新品牌”按钮，我不从这些选择中获取数据服务器，实际上CatBrands为null，但我有名字。我得到这样的东西：

{名称= “LG”，catBrands = NULL}

Answer 1

CatBrands为null，因为您不能以这种方式动态添加来自服务器的数据。页面呈现后，您需要在html中用asp呈现的所有内容。

<form method="post" enctype="multipart/form-data">
  <div>
    <label>Brand Name:</label>
    <input type="text" asp-for="@Model.Name">
  </div>
  <div id="divCategory">
    <select id="selectCategory asp-code-goes-here>
      <option>---Select---</option>
    </select>
  </div>
  <button type="button" id="btnAddCategory">Add Category</button>
  <button>Create new Brand</button>
</form>

Answer 2

我犯了一个严重的错误。我应该这样改变我的功能

$(document).ready(function () {
 $('#btnAddCategory').on('click', function () {
 var catId = countMyCategories();
 $('#divCategory').append(
  '<select id="selectCategory' + catId + '" 
  name = "CatBrands[' + catId + '].CatId" class="mt-3 form-control 
  form-control-sm">' +
  '<option>---Select---</option>' +
  '</select>'
 );

 $.ajax('/API/GetCats')
   .done(function (categories) {
     for (var i = 0; i < categories.length; i++) {
       $('#selectCategory' + catId).append(
         '<option value="' + categories[i].id + '">' + 
          categories[i].name + '</option>'
         )
      }
    });
 });

}）;

如何从添加到html页面的动态元素获取数据？

2 个答案: