C# 和 Javascript - 如何将删除对象添加到 Javascript 数组并回发到服务器？

Question

我有一个表单，其中有一个部分供用户添加多个约会日期。表单的这一部分包含以下字段：开始日期、结束日期和添加按钮。

 <form action="/someaction">
   Start Date <input type="text" id="StartDate" name="StartDate"><br>
   End Date: <input type="text" id="EndDate" name="EndDate"><br>
   <a class="btn btn-default js-add" href="#" role="button">Add</a>

    <table class="table" >
        <tbody id="dates" >

        </tbody>
    </table>

   // Other form fields

   <input type="submit" value="Submit">
</form> 

每次用户添加约会时，我都想将值存储在 JavaScript 对象数组中，并显示数组中的项目数以及添加的对象的详细信息，并提供将其从列表中删除的选项。以下是我的初步尝试：

<script>
   var appointments = [];

   $(".js-add").click(function (e) {
      e.preventDefault();

      var startDate = $("#StartDate").val();
      var endDate = ("#EndDate").val()

      // What can I use to uniquely identify each object incase we need to delete???
      appointments.push( { startDate: startDate , endDate: endDate });

      $('<tr/>', { html: '<td >' + startDate + '</td><td>' + endDate + '</td><td><a class="js-delete" href="" data-id="">delete</a></td>'})
        .appendTo($('#dates'));
   }

    $(".js-delete").click(function (e) {
      e.preventDefault();

      var id = $(this).attr("data-id");

      // How do I remove the selected object from the array???
      // appointments.splice(x,1);

    }
</script>

如何使用数组索引从数组中删除对象。我在删除链接上有一个 data-id 属性，它将包含数组索引。

但是每次添加或删除对象时，数组索引都会发生变化，那么如何更新现有行的 data-id 属性？

其次，我如何将此对象传递回服务器，因为它没有附加到任何表单输入字段？

我们将不胜感激？

Answer 1

如何从数组中删除对象。我在删除链接上有一个 data-id 属性，但我可以用什么来唯一标识对象。

因为您创建了一个新的表格行，所以您需要：

• 委托事件（即：$(document).on('click', '.js-delete', function (e) {)
• 使用 data-id 属性为其分配当前索引的值 数组中的元素。
• 在删除一行时，您需要重新排列 data-id 的值

如何将这个对象传回服务器

您可以使用隐藏的输入字段并将其值设置为数组值。

sn-p：

var appointments = [];

//
// delegated event
//
$(document).on('click', '.js-delete', function (e) {
  e.preventDefault();

  var id = +$(this).attr("data-id");
  appointments.splice(id, 1);
  $(this).closest('tr').remove();
  //
  // rearrange the values of data-id attributes
  //
  $('#dates tr td:nth-child(3) a').each(function(index, element) {
    var tId = +$(element).attr("data-id");
    if (tId > id) {
      $(element).attr("data-id", tId - 1);
    }
  });
});

$(function () {
  $(".js-add").click(function (e) {
    e.preventDefault();

    var startDate = $("#StartDate").val();
    var endDate = $("#EndDate").val();

    // In order to uniquely identify each object you can set the
    // value of data-id attribute with current array index
    appointments.push( { startDate: startDate , endDate: endDate });

    $('<tr/>', { html: '<td >' + startDate + '</td><td>' + endDate + '</td><td><a class="js-delete" href="" data-id="' + (appointments.length - 1) + '">delete</a></td>'})
    .appendTo($('#dates'));

    //
    // a possible sorting.... Consider to use a date compare
    // instead of a string compare function.
    //
    $.each($('#dates tr').get().sort(function(a, b) {
      return a.childNodes[0].textContent.localeCompare(b.childNodes[0].textContent);
    }), function(index, ele) {
      $('#dates').append(ele);
    });
  });

  //
  // On form submit stringify your array and save it into
  // an hidden input field
  //
  $('input[type="submit"]').on('click', function(e) {
    e.preventDefault();
    $('#appointments').val(JSON.stringify(appointments));
    console.log($('#appointments').val());
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>


<form action="/someaction">
    <input id="appointments" type="hidden">
    Start Date <input type="text" id="StartDate" name="StartDate"><br>
    End Date: <input type="text" id="EndDate" name="EndDate"><br>
    <a class="btn btn-default js-add" href="#" role="button">Add</a>
    <table class="table" >
        <tbody id="dates" >

        </tbody>
    </table>

    <!-- Other form fields -->

    <input type="submit" value="Submit">
</form>