Получить содержимое HTML-таблицы в MVC Controller

Question

ОБНОВЛЕНИЕ ДНА ЭТОГО ПОЧТЫ

У меня есть HTML-таблица, которая выглядит следующим образом:

<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>

Это именно то, что я хочу, и производит следующее:

После того, как таблица заполнена, мне нужно 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 с помощью регулярных выражений или манипуляций со строками здесь не подходит ...

Может кто-нибудь предложить / направить меня к достойному способу делать то, что я хочу?Если у вас есть вопросы, пожалуйста, задавайте.

С уважением!

ОБНОВЛЕНИЕ Благодаря @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(), чтобы иметь возможность получить значения.

СПАСИБО ТАКОЕ ADyson!

Answer 1

Вместо отправки обратно фрагментов HTML, просто отправьте обратно значения внутри HTML.

Вы можете извлечь их с помощью jQuery, например, используя .text(), чтобы получить текст в td (вместо.html()) или .val(), чтобы получить значение в поле ввода (которое само находится внутри другого td, конечно).

Гораздо проще разобрать значения на стороне клиента с помощью jQuery, который предназначен для этой цели, чем пытаться найти его на сервере.Кроме того, вы не отправляете бессмысленную дополнительную разметку HTML туда-сюда.

PS Что-то вроде var tb = $(tdlist[1]).find("input") должно получить ваше текстовое поле (при условии, что оно находится внутри индекса 1 вашей строки).Затем вы можете использовать tb.val() для извлечения значения, введенного в поле.