Question

我有一个可以添加到购物车的产品表视图。每行都有一个DropDownList，允许的数量可以与一个按钮一起订购以添加到购物车。一切都在填充和正确显示。我知道如何在ActionLink中传递项ID，但是如何获取与单击的ActionLink的表行关联的DownDownList的值？

我猜可能会使用点击ActionLink时触发的JQuery吗？

我还想过让每一行成为一种形式，但这似乎有些过分。

有一种简单的MVC方法吗？

Answer 1

准备更多信息以获得正确的问题并继续解决它。感谢Stephen的轻推和信息。

我尝试在详细信息部分的每个Html.BeginForm标记周围添加<tr>。这确实对我有用。我能够轻松地为每个单独的行获取POST的唯一表单信息。但是，当我启用JQuery DataTables时，提交会中断。 DataTables必须捕获提交或以某种方式单击。 Haven没有想到这一点，但它让我尝试了JQuery，这似乎是一个更好的方法。

以下是我构建表数据行的方法：

@foreach (var item in Model)
{
    <tr>
        <td>
            <img src="@item.GetFrontImage()" width="100" />
        </td>
        <td>
            <strong>@Html.DisplayFor(modelItem => item.DisplayName)</strong>
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.CustomerSKU)
        </td>
        <td>
            @Html.DropDownList("OrderQty", item.GetAllowedOrderQuantities(), htmlAttributes: new { @class = "form-control" })
        </td>
        <td>
            <a class="btn btn-default pull-right" data-id="@item.ID">Add to Cart</a>
        </td>
    </tr>
}

这会创建一个ID为OrderQty的select，并且我将项ID插入到链接的data-id属性中。然后，我使用此JQuery捕获信息并将其POST到我的控制器。在这个例子中只需要一个显示结果的测试div：

// Add to Cart click
$('table .btn').click(function () {
    // Gather data for post
    var dataAddToCard = {
        ID: $(this).data('id'),     // Get data-id attribute (Item ID)
        Quantity: $(this).parent().parent().find('select').val()    // Get selected value of dropdown in same row as button that was clicked
    }

    // POST data to controller
    $.ajax({
        url: '@Url.Action("AddToCart","Shopping")',
        type: 'POST',
        data: JSON.stringify(dataAddToCard),
        contentType: 'application/json',
        success: function (data) { $('#Result').html(data.ID + ' ' + data.Quantity); }
    })
});

JQuery函数接收对被单击链接的引用，因此我可以从data-id属性中提取Item ID。然后，我可以使用.parent.parent（让我转到<tr>标记）获取同一行中的下拉列表（选择），然后只需找到下一个＆＃39; select＆＃39 ;标签。对很多人来说可能很明显。

这对我的目的很有用。我还可以使用POST返回的数据更新其他元素。

谢谢

卡尔

Answer 2

对于html中的表格：

<div class="table-responsive">
        <table id="employeeTable"class="table table-bordered">
            <thead>
                <tr>
                    <th class="text-center">ُُُEmpId</th>
                    <th class="text-center">Name</th>
                    <th class="text-center">Absense State</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.Id</td>
                        <td>@item.Name</td>
                        <td class="text-center">@Html.DropDownList("DDL_AbsentStatus", new SelectList(ViewBag.statusList, "Id", "Name"), new { @class = "form-control text-center" })</td>

                    </tr>
                }
            </tbody>
        </table>
    </div>

在javascript中获取所选值：

//Collect Date For Pass To Controller
    $("#btn_save").click(function (e) {
        e.preventDefault();
        if ($.trim($("#datepicker1").val()) == "") {
            alert("ادخل تاريخ يوم صحيح!")
            return;
        }

        var employeesArr = [];
        employeesArr.length = 0;

        $.each($("#employeeTable tbody tr"), function () {
            employeesArr.push({
                EmpId: $(this).find('td:eq(0)').html(),
                EntryDate: $.trim($("#datepicker1").val()),
                StatusId: $(this).find('#DDL_AbsentStatus').val()
            });
        });

        $.ajax({
            url: '/Home/SaveAbsentState',
            type: "POST",
            dataType: "json",
            data: JSON.stringify(employeesArr),
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
                alert(result);
                emptyItems();
            },
            error: function (err) {
                alert(err.statusText);
            }
        });



    })

MVC 5获取表行中DropDownList的值

2 个答案: