如何根据 C# 中的行级复选框从 HTML 表中获取值？答案

【问题标题】：How to get a value from HTML table based on row-level checkbox in C#?如何根据 C# 中的行级复选框从 HTML 表中获取值？
【发布时间】：2019-02-09 04:06:00
【问题描述】：

我有一个包含三个 HTML 表格的 aspx 页面。 HTML中的表格之一如下所示：

<table id='example' >
   <thead>
      <tr>
         <th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]"/></th>
         <th>SchoolID</th>
         ...
      </tr>
   </thead>
   <tr>
      <td>
         <input type='checkbox' name='name0' />
      </td>
      <td>200116</td>
   </tr>
   <tr>
      <td>
         <input type='checkbox' name='name1' />
      </td>
      <td>200116</td>
   </tr>
   ...
</table>

这个表看起来像：

我需要为最终用户在 C# 中检查的行获取 SchoolID。最好的方法是什么？

我目前正在尝试使用 HTMLAgilityPack 将我的 HTML 表作为数据表，但我没有成功。它正在获得第一张桌子，我需要第三张桌子。然而，我不确定这是否是最好的方法。请指教。

var doc = new HtmlDocument();
//doc.Load(Request.Url.ToString()); //gives error.
doc.Load(filepath); //this works

//this is returning me the first table of my page, i need the third table.
var nodes = doc.DocumentNode.SelectNodes("//table/tr");

var table = new DataTable("exampleDataTable");

任何帮助将不胜感激！

编辑：原来我不能使用 HTMLAgilityPack，因为我实际上是在 C# 中创建表然后发送到前端。使用 filepath 不起作用，因为默认情况下 .aspx 文件中没有表。

EDIT2：秒，我找到了web.load函数，也许我可以使用Request.Url。

【问题讨论】：

如果您不能使用 HTMLAgilityPack，请edit 删除有关 HTMLAgilityPack 的文本（和标签）。您是否可以控制呈现这些表格的代码？
@HereticMonkey 我不确定我是否可以使用它。是的，我可以控制代码呈现所有这些表。 2 个表已经在 aspx 中，它们是静态的。其中第三个是由 C# 代码生成的。
我只需将value 属性添加到其值与学校 ID 相同的复选框。然后，当它们与表单一起提交时，您将获得选中项目的值。您可能希望将它们都命名为 chosenSchoolId[] 之类的名称，以便在您的操作中获得一个数组。
主要问题是我无法在 C# 中获取 HTML 表的任何值
我不确定我是否理解该声明。 ASP.NET 通过将表单值发送回服务器来工作。如果这些表包含在表单中，并且该表单被发送回服务器，则选中框的值将在页面的代码隐藏中传输到 C#。

标签： c# html asp.net html-agility-pack asp.net-4.5

【解决方案1】：

您可以在提交按钮的click() 监听器中通过 jQuery 获取所选行的 SchoolID。

var tableControl = document.getElementById('mytable');
$('#myBtn').click(function() {

var arrayOfValues = []
    $('input:checkbox:checked', tableControl).each(function() {
            arrayOfValues.push($(this).closest('tr').find('td:last').text());
        }).get();
    alert(arrayOfValues);
});


$('#chkAll').change(function() {
  $('input:checkbox').not(this).prop('checked', this.checked);
});

工作演示：JSFiddle

【讨论】：