如何在同一模型的視圖中使用局部視圖？

Question

我有一個具有以下功能的簡單表格。

1. 第一部分：它有一個表，該表將顯示數據庫表中的值，例如tblProfile ，它包含三列，如profileid, profilename, description並在每一行中都有一個用於編輯值的編輯按鈕。

2. 第二部分：在同一頁面中，我有三個文本框，用於將值輸入到同一數據庫表中，例如tblProfile 。 單擊提交按鈕后，它將值插入表中，並立即將其顯示在上述表中，並根據最后一個profileid在profileid文本框中顯示top + 1 id。 如果在表上單擊任何編輯按鈕，則將使用值填充這三個文本框。 修改后，必須對其進行更新。

我創建了一個使用IEnumerable<MyModel>作為模型的視圖，以便所有配置文件值都顯示在表中（強類型視圖）。 現在，我為表單部分創建了一個局部視圖，該視圖也是一個強類型化視圖，但是它使用MyModel作為其模型類型，而不是IEnumerable<MyModel> 。

我對應該將“保存”，“更新”，“取消”等按鈕放在何處感到困惑：在主視圖或局部視圖中。 如何完成功能？ 我在Main解決方案中使用VS2010 SP1，MVC4和EF，該解決方案有一個MVC項目，兩個文件夾：BusinessLayer和DataAccesLayer。 BusinessLayer文件夾包含用於BO和BA的單獨的類庫，DataAccesLayer文件夾包含一個類庫文件，另外兩個文件夾用於EF .edmx文件，另一個用於DA類。

我該如何實施？

Answer 1

簡單方法：創建一個用於添加新記錄的局部視圖，以及另一個用於更新現有記錄的局部視圖。 采用這種方法的原因是分開考慮您的事后處理方式應如何處理您的請求。 除非您添加bool標志來告訴操作post命令是插入還是更新，否則它將不知道如何處理數據。 因此，我建議創建單獨的局部

// Insert partial "InsertPartialView"
@YourApp.Models.MyModel

@using (Html.BeginForm("InsertNewRecord", "Home"))
{
  // your field controls here

  <input type="submit" value="Add" />
}

---

// Update partial "UpdatePartialView"
@YourApp.Models.MyModel

@using (Html.BeginForm("UpdateRecord", "Home"))
{
  // your field controls here

  <input type="submit" value="Update" />
}

在控制器中，使用“ InsertNewRecord”操作添加新記錄，並使用“ UpdateRecord”更新現有記錄。

現在，最初，您可以在視圖中顯示“插入”部分，因此添加記錄不需要花費很多時間來提供此部分視圖。

<div id="partialDiv">
  @Html.Partial("InsertPartialView")
</div>

現在，當您想要更新記錄時，您需要調用服務器，以將“插入”部分替換為“更新”部分。 您可以通過創建一個“ edit” ajax-action鏈接來實現此目的，該鏈接可容納表中的每個記錄：

@Ajax.ActionLink("Edit", "GetUpdatePartial", new { id = item.profileid }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "partialDiv" })

如果您以前從未使用過ajax鏈接，我將對此進行解釋。 前三個參數是鏈接的文本，操作的名稱和項目的ID，與常規的Html-actionlink相同。 第4個參數使我們可以定義ajax選項。 “ GET”方法是不言自明的-我們在此調用中不處理任何數據，僅從數據庫中檢索。 InsertionMode選項定義了應如何在View中處理返回數據。 在這種情況下，我們希望它替換當前的“插入”局部視圖，因此我們選擇“替換”。 最后，我們定義要在其中插入局部視圖的元素，我們將其命名為“ partialDiv”。

在這一點上，唯一缺少的是我們的ajax調用操作。

[HttpGet]
public PartialViewResult GetUpdatePartial(int id)
{
  var record = db.tblProfile.Single(r => r.profileid == id);

  return PartialView("UpdatePartialView", record);
}

該操作使用“編輯” ajax鏈接中的profileid從db中檢索其記錄，然后返回以記錄為模型的部分視圖。 結果應該是該局部視圖現在將插入到我們的“ partialDiv”中，從而代替了初始的“插入”局部視圖。

如果需要，請執行以下其他操作：

[HttpPost]
public ActionResult InsertNewRecord(MyModel model)
{
  if (model.IsValid)
  {
    db.tblProfile.Add(model);
    db.SaveChanges();
  }

  return RedirectToAction("Index");
}

---

public ActionResult UpdateRecord(MyModel model)
{
  if (model.IsValid)
  {
    db.Entry(model).State = EntityState.modified;
    db.SaveChanges();
  }

  return RedirectToAction("Index");
}

希望能有所幫助