0

取引一覧があります。それらのいずれかをクリックすると、リストの右側に編集フォーム (選択した項目のデータが入力されたもの) を表示できるようにしたいと考えています。何か案は？

以下は、トランザクションのリストを表示する部分ビューです。

@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 の edit メソッドがどのように見えるかです。

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

1 に答える 1

0

おそらく、これを実現する最も簡単な方法は、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);
于 2012-11-07T07:40:22.247 に答える