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幫手。

在你的循環有這個，而不是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助手，所以我假設你已經有了編輯的局部視圖。

在你actionmethod返回，而不是局部視圖：

return PartialView("YourPartialView", transaction);