将 ViewData 从视图返回到控制器剃须刀页面

Question

我的观点是 C#：

@{
    var itemList = (List<Item>)ViewData["itemsList"];
}
<div class="row" style="margin-top: 10px;">
    <div class="col-md-6">
        @if (itemList != null)
        {
            var id = 0;
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th></th>
                    <th>Id</th>
                    <th>Type</th>
                </tr>
                </thead>
                <tbody>
                    @foreach (var result in itemsList)
                    {
                        <tr>
                            <td>@(++id)</td>
                            <td><input type="checkbox" value="true" @(result.Checked ? "checked" : "")></td>
                            <td>@result.Id</td>
                            <td>@result.Type</td>
                        </tr>
                    }
                </tbody>
            </table>
        }
        <div class="row justify-content-end" style="margin-top: 20px;">
            <div class="col-md-2">
                <form asp-controller="Control" asp-action="Remove" method="post">
                    <input type="hidden" name="tableName" value="table"/>
                    <input type="hidden" name="items" value="@itemList"/>
                    <div style="margin-left: -10px;" class="col-md-2">
                        <button class="btn btn-danger" title="Remove" type="submit">Remove</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

我想从用户选中复选框的表格中删除项目。我的想法是使用列表（result.Checked 属性）更新每个选中的项目，然后将数组发送到 Remove 方法：

[HttpPost]
public async Task<IActionResult> Remove(string tableName, List<ChangeQueueItem> items)
{
    try
    {
        var toDelete = items.Where(x => x.Checked == true);

        await _repository.RemoveFromQueue(toDelete, tableName);
    }
    catch (Exception e)
    {
        TempData["error"] = e.Message;
    }
    return RedirectToAction("Index");
}

我正在尝试像这样发送该列表：

<input type="hidden" name="items" value="@itemList"/>

但是该值为空。我该怎么做？

更新：此处加载数据：

[HttpGet]
public async Task<IActionResult> Index()
{
     var items = await _repository.GetAll();
     
    ViewData["itemsList"] = items;
    ViewData["error"] = TempData["error"];

    return View("Index");
}

Answer 1

首先，您使用ViewData["itemsList"] = items; 设置值，但通过var itemList = (List<Item>)ViewData["itemList"]; 获取它。

将键值更改为一致：例如，将视图中的itemList 替换为itemsList。

第二，将列表从视图传递到控制器操作方法，将索引应用于项目（仅显示<tbody> 内容）：

<tbody>
    @using (Html.BeginForm("Remove", "Control"))
    {
        @Html.Hidden("tableName", "table")
        @for (int i = 0; i < itemsList.Count; i++)
        {
            @Html.Hidden("items[" + i + "].Id", itemsList[i].Id)
            @Html.Hidden("items[" + i + "].Type", itemsList[i].Type)
            <tr>
                <td>@(++id)</td>
                <td>@Html.CheckBox("items[" + i + "].Checked", itemsList[i].Checked)</td>
                <td>@itemsList[i].Id</td>
                <td>@itemsList[i].Type</td>
            </tr>
        }
        <tr><td><button class="btn btn-danger" title="Remove" type="submit">Remove</button></td></tr>
    }
</tbody>

或者没有助手也一样（只显示<tbody>的内容）：

<tbody>
    <form asp-controller="Control" asp-action="Remove" method="post">
        <input type="hidden" name="tableName" value="table" />

        @for (int i = 0; i < itemsList.Count; i++)
        {
            <input type="hidden" name="@("items[" + i + "].Id")" value="@itemsList[i].Id" />
            <input type="hidden" name="@("items[" + i + "].Type")" value="@itemsList[i].Type" />
    <tr>
        <td>@(++id)</td>
        <td><input  name="@("items[" + i + "].Checked")" type="checkbox" value="true" @(itemsList[i].Checked ? "checked" : " ") /></td>
        <td>@itemsList[i].Id</td>
        <td>@itemsList[i].Type</td>
    </tr>
        }
        <tr><td><button class="btn btn-danger" title="Remove" type="submit">Remove</button></td></tr>
    </form>
</tbody>

Answer 2

您似乎没有设置TempData["itemList"]；我在代码中看不到。

你应该使用类似的东西来设置它：

TempData["itemList"] = toDelete;