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

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");
}

希望能有所帮助