如何在同一模型的视图中使用局部视图？

Question

我有一个具有以下功能的简单表单。

1. 第一部分：它有一个表格，可以显示数据库表格中的值，例如tblProfile 它包含三列，如profileid, profilename, description，每行都有一个编辑按钮来编辑值。

2. 第二部分：在同一页面中，我有三个文本框可以将值输入到同一个数据库表中，例如tblProfile。单击提交按钮后，它会将值插入表格并立即将其显示在上面提到的表格上，并根据最后一个profileid 将在profileid 文本框中显示顶部+1 id。如果单击表格上的任何编辑按钮，这三个文本框将填充值。修改后必须更新。

我创建了一个使用IEnumerable<MyModel> 作为模型的视图，以便所有配置文件值都显示在表中（强类型视图）。现在对于表单部分，我创建了一个局部视图，它也是一个强类型视图，但它使用 MyModel 作为其模型类型，而不是 IEnumerable<MyModel>。

我对应该将保存、更新、取消等按钮放在哪里感到困惑：在主视图中还是在局部视图中。如何完成功能？我在主解决方案中使用 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>

现在，当您想要更新记录时，您需要调用服务器以将您的“插入”部分替换为“更新”部分。您可以通过创建一个容纳表中每条记录的“编辑”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 选项定义了我们的返回数据应该如何在视图中处理。在这种情况下，我们希望它替换当前的“插入”局部视图，因此我们选择“替换”。最后，我们定义了我们想要插入局部视图的元素，我们命名为“partialDiv”。

此时，唯一缺少的是我们的 ajax 调用的操作。

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

  return PartialView("UpdatePartialView", record);
}

此操作使用“编辑”ajax 链接中的 profileid 从数据库中检索其记录，然后我们将返回部分视图，并将记录作为其模型。结果应该是这个局部视图现在将被插入到我们的“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");
}

希望有帮助