c# - MVC3 在与项目列表相同的页面上显示编辑视图

Question

我有一个交易清单。当我单击其中一个时，我希望能够在列表右侧显示编辑表单（填充了所选项目的数据）。有任何想法吗？

下面是显示交易列表的部分视图。

@model IEnumerable<BudgetPlus.Models.Transaction>
@{
    ViewBag.Title = "Index";
}
<p>
    @Html.ActionLink("Create New", "Create", null, new { @class = "button-link" })
</p>
<table>
    <thead>
        <tr>
            <th class="column-Date">Date</th>
            <th class="column-Description">Description</th>
            <th class="column-Category">Category</th>
            <th class="column-Amount">Amount</th>
            <th class="action-button"></th>
            <th class="action-button"></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Date)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Category.DisplayName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Amount)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id })
                </td>
                <td>
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    </tbody>
</table>
<div>
    @Html.EditorForModel("Edit")
</div>

这就是我的 TransactionController 中的编辑方法的样子。

    public ActionResult Edit(int id)
    {
        Transaction transaction = db.Transactions.Find(id);
        ViewBag.CategoryId = new SelectList(db.Categories, "Id", "DisplayName", transaction.CategoryId);
        return View(transaction);
    }

Answer 1

实现这一点的最简单方法可能是使用 Ajax.Actionlink 助手。

在你的 for 循环中有这个而不是 Html.Actionlink：

@Ajax.ActionLink("Edit", "Edit", new { id=item.Id }, new AjaxOptions { UpdateTargetId = "editor", HttpMethod = "Get", InsertionMode = InsertionMode.Replace });

在桌子的右侧：

<div id="editor"></div>

然后有一个用于编辑事务的部分视图，它将被呈现到 id 为“editor”的 div 中。您正在使用 EditorForModel 助手，所以我假设您已经有一个部分视图进行编辑。

在您的操作方法中返回部分视图：

return PartialView("YourPartialView", transaction);