c#和Javascript -如何添加移除对象到Javascript数组和回发到服务器

本文关键字：Javascript 对象 数组 服务器 添加 何添加 | 更新日期: 2023-09-27 18:12:52

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

 <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属性?

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

如果你能帮助我，我会很感激的。

c#和Javascript -如何添加移除对象到Javascript数组和回发到服务器

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

因为要创建一个新的表行，所以需要:

  • 委托事件(即:$(document))。on('click'， '.js-delete'， function (e) {)
  • 使用data-id属性将当前索引的值赋给它
  • 在删除一行时，您需要重新排列data-id
    • 的值

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

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

代码片段:

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>

相关文章：