在仍然使用 dataTable jquery 运行 JS 的同时调用 C# 代码隐藏

Question

所以我正在使用数据表，我试图能够处理仅添加哪些工作的代码，并且仍然使用不能一起工作的数据表。这两个冲突，所以当我单独拥有它们时它可以工作。

$(function() {
  var table = $('#example').DataTable();
  $('#btnAddToTable').on('click', function(e) {
    var counter = 1;

    var textBox1 = $("#a").val();
    var textBox2 = $("#b").val();
    var textBox3 = $("#c").val();

    table.row.add([
      textBox1,
      textBox2,
      textBox3,
    ]).draw(false);
    counter++;
    e.preventDefault();
  });
});

<asp:TextBox runat="server" ID="a" AutoPostBack="true" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="b" AutoPostBack="true" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="c" AutoPostBack="true" ClientIDMode="Static" ReadOnly="true" />

<asp:Button Text="Add To Table" ID="btnAddToTable" OnClick="btnAddToTable_Click" ClientIDMode="Static" runat="server" />

<table style="max-width: 50%" class="display" id="example">
  <thead>

    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>

    </tr>
  </thead>
</table>

Answer 1

我需要有关您遇到的问题的更多详细信息，但从示例的外观来看，这是我可以看到的。

您在 Asp 按钮上有和 OnClick。这将导致回发，$('#btnAddToTable').on('click', function(e) { ... } 函数所做的任何更改都将被删除。

我不确定你到底想完成什么，但如果你想阻止回发，则在 javascript 函数中返回 false；

更新

尝试将OnClientClick="return addThirdTextBoxBeforePostback();" 添加到按钮。然后将点击时的 jquery 更改为一个名为 addThirdTextBoxBeforePostback 的函数，并在函数中返回 true。

<asp:TextBox runat="server" ID="a" AutoPostBack="true" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="b" AutoPostBack="true" ClientIDMode="Static" />
<asp:TextBox runat="server" ID="c" AutoPostBack="true" ClientIDMode="Static" ReadOnly="true" />

<asp:Button Text="Add To Table" ID="btnAddToTable" OnClientClick ="return addThirdTextBoxBeforePostback();" OnClick="btnAddToTable_Click" ClientIDMode="Static" runat="server" />

<table style="max-width: 50%" class="display" id="example">
  <thead>

    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>

    </tr>
  </thead>
</table>

Javascript

function addThirdTextBoxBeforePostback() {
    var table = $('#example').DataTable();
    var counter = 1;

    var textBox1 = $("#a").val();
    var textBox2 = $("#b").val();
    var textBox3 = $("#c").val();

    table.row.add([
      textBox1,
      textBox2,
      textBox3,
    ]).draw(false);
    counter++;
    return true;
};

*免责声明 - 我没有对此进行测试，并且在存在 OnClick 时 OnClientClick 可能无法正常工作。我只是不记得了