如何将 table 行内表单中的两个值传递给控制器？剃刀

Question

我该怎么做table

<table class="table table-bordered table-striped" style="width:100%">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Price
                </th>
                <th>
                    Quantity
                </th>
                <th>
                    Options
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.Items)
            {
                <tr>
                    <td>@item.Name</td>
                    <td>@item.Price</td>
                    <td><input type="number" name="Quantity"/> </td>
                    <td><input type="submit" class="btn btn-primary" value="Add" /></td>
                </tr>
            }
        </tbody>

    </table>

像下面的 table 一样工作（这个工作正常）

<table class="table table-bordered table-striped" style="width:100%" >
                   <thead>
                       <tr>
                           <th>                            
                               Name
                           </th>
                           <th>
                               Prrice
                           </th>
                           <th>
                               Quantity
                           </th>
                           <th class="text-center">
                               Options
                           </th>
                       </tr>
                   </thead>
                    <tbody>
                        @foreach(var item in Model)
                        {
                        <tr>
                            <td width="55%">@item.Name</td>
                            <td width="10%" class="text-right">@item.Price $</td>
                            <td width="10%" class="text-right">@item.Quantity</td>
                            <td width="25%">
                                <div class="w-100 btn-group"role="group">
                                    <a asp-controller="item" asp-action="Update" asp- asp-route-Id="@item.Id" class="btn btn-outline-primary mx-1">Update</a>
                                    <a asp-controller="item" asp-action="Delete" asp-route-Id="@item.Id" class="btn btn-outline-danger mx-1">Delete</a>
                                </div>
                            </td>
                        </tr>
                        }
                    </tbody>
                </table>

我想将 item.quantity 和 item.id 传递给控制器。

物品型号

public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public float Price { get; set; }
        public int Quantity { get; set; }
    }

我发现您可以将每个项目放在一个 table 中，并为每个一个表格，但我想知道 asp.net 是否可以使它更简单

Answer 1

如果您需要 post ALL ROW VALUES（假设每一行都是一个不同的对象）然后使用 table 之外的表单并将所需的属性输入到输入中以获得 posted.

如果您需要 post 单行值（仅提交值被修改的行），那么您可以编写一些 JS 并制作 post 或 ajax post 当前行中的所有输入。

$(document).on('keypress', 'input[data-ajax="row"]', function (e) {
if (e.keyCode !== 13) {
    return;
}

var self = $(this);
var row = self.closest('tr');
var url = '/controller/action';

var propertyNames = new Array();
var propertyValues = new Array();
row.find('input[data-ajax="row"]').each(function () {
    $(this).attr('readonly', 'readonly');
    propertyNames.push($(this).attr('id'));
    propertyValues.push($(this).val());
});

$.ajax({
    url: url,
    type: 'POST',
    data: { propertyNames, propertyValues },
    success: function (data) {
        //SUCCESS CODE HERE (reload)
    },
    error: function (data) {
        console.log('error');
        alert('error');
    }
});

return;

});

请注意，您需要将 data-ajax="row" 属性添加到您的输入中。您还可以删除动态代码并在行范围内找到所有需要的控件。 Ej: var name = row.find('#name').val()

如何将 table 行内表单中的两个值传递给控制器？剃刀

how to pass two values in a form inside a table row to the controller ? Razor

asp.net-mvc

razor

如何将 table 行内表单中的两个值传递给控制器​​？剃刀

how to pass two values in a form inside a table row to the controller ? Razor

asp.net-mvc

razor

如何将 table 行内表单中的两个值传递给控制器？剃刀