获取 HTML Table 内容到 MVC 控制器

Question

UPDATE BOTTOM OF THIS POST

我有一个 HTML table 看起来像：

<table class="table table-hover" id="selectedProductsForContract">
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="col-md-8">
                <p>Product name</p>
            </td>
            <td class="col-md-1">
                <input type="number" class="form-control" value="1">
            </td>
            <td class="col-md-2">
                <button type="button" class="btn btn-danger">
                    Remove
                </button>
            </td>
        </tr>

    </tbody>
</table>

我打算在选择时用列表框中的值动态填充。我正在使用 @Html.ListBox()

生成列表框

@Html.ListBox("allProducts", allProductsForSupplier, new { ID = "allProductsListbox", @class = "form-control", @onclick = "AddSelectedProductToTable()" })

列表框的 onclick 事件如下所示：

<script>
    function AddSelectedProductToTable() {

    var selectedProduct = $("#allProductsListbox option:selected").text();    

    $("#selectedProductsForContract").find('tbody')
        .append($('<tr>' +
            '<td class="col-md-8"><p>' + selectedProduct + '</p></td>' +
            '<td class="col-md-1"> <input type="number" class="form-control" value="1"> </td>' +
            '<td class="col-md-2">  <button type="button" class="btn btn-danger" onclick="RemoveSelectedProductFromTable(this)"> Remove </button > </td>' +
            '</tr>'));

    }
</script>

这正是我想要的，并产生以下结果：

填充 table 后，我需要 POST 将选择的产品名称和数量返回服务器。

我尝试了几种方法，但最接近的是使用以下方法：

<script type="text/javascript">
    $(function () {
      $("#btnInsert").click(function () {
        var itemlist = [];

        //get cell values, instead of the header text.
        $("table tr:not(:first)").each(function () {
            var tdlist = $(this).find("td");
            var Item = { ID: $(tdlist[0]).html(), Name: $(tdlist[1]).html() };
            itemlist.push(Item);
        })

        $.ajax({
            url: '@Url.Action("InsertValue", "Contract")', //
            dataType: "json",
            data: JSON.stringify({ itemlist: itemlist }),
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function (result) {
                alert("success");
            },
            error: function (xhr) {
                alert("error");
            }
        });
      });
    });
</script>

哪个 POST 返回到以下控制器：

[HttpPost]
public JsonResult InsertValue(Item[] itemlist)
{
    foreach (var i in itemlist)
    {
        //loop through the array and insert value into database.
    }
    return Json("Ok");
}

并产生以下输出：

我认为有比我现在正在做的更好的方法，但我有点迷失在这里，我认为用正则表达式或字符串操作解析 HTML 不是这里的答案...

任何人都可以 suggest/guide 我以一种体面的方式做我想做的事吗？有问题请追问

亲切的问候！

更新感谢@Adyson，我已将 AddSelectedProductToTable() 更改为以下内容：

 $("table tr:not(:first)").each(function () {

        var tdlist = $(this).find("td");
        var input = $(tdlist[1]).find("input");

        var Item = { ID: $(tdlist[0]).text(), Name: $(input[0]).val() };
        itemlist.push(Item);   

    })

其中添加了var input = $(tdlist[1]).find("input");，我需要将这部分的text()更改为val() : Name: $(input[0]).val() 以便能够检索值。

非常感谢阿迪森！

Answer 1

不是 post返回 HTML 的片段，而是 post 返回 HTML.

中的值

您可以使用 jQuery 提取那些，例如使用 .text() 获取 td 中的文本（而不是 .html()），或使用 .val() 获取输入字段中的值（它本身位于另一个 td，当然）。

使用专为此目的设计的 jQuery 在客户端解析值比在服务器上尝试解析要容易得多。而且你也不要来回发送毫无意义的额外 HTML 标记。

P.S。 var tb = $(tdlist[1]).find("input") 之类的东西应该让你的文本框（假设它在你的行的索引 1 内）。然后你可以使用tb.val()提取输入框中的值。

获取 HTML Table 内容到 MVC 控制器

Get HTML Table content to MVC Controller

jquery

asp.net-mvc

model-view-controller

html-table

postback