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

Question

I have a list of transactions. When I click one of them, I'd like to be able to display the edit form (populated with the selected item's data) to the right of the list. Any ideas?

Below is the partial view that displays the list of transactions.

@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>

And this is what the edit method in my TransactionController looks like.

    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

Probably the easiest way to achieve this is to use Ajax.Actionlink helper.

In your for loop have this instead of Html.Actionlink:

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

And on the right side of your table:

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

Then have a partial view for editing the Transaction, which will be rendered into the div with id "editor". You are using EditorForModel helper so I assume you have a partial view for editing already.

In your actionmethod return the partial view instead:

return PartialView("YourPartialView", transaction);