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>

然后有一个部分视图用于编辑Transaction，它将被渲染到id为“editor”的div中。您正在使用EditorForModel帮助程序，因此我假设您已有部分视图供编辑。

在你的actionmethod中返回部分视图：

return PartialView("YourPartialView", transaction);

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

1 个答案: