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

Question

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

第一部分：它有一个 table，它将显示来自数据库 table 的值，例如tblProfile 它包含三列，如 profileid, profilename, description，每行都有一个编辑按钮来编辑值。
第二部分：在同一个页面中，我有三个文本框来输入同一个数据库的值table，例如tblProfile。单击提交按钮后，它会将值插入 table 并立即显示在上面提到的 table 上，并根据最后一个 profileid 显示 top+1 id在 profileid 文本框中。如果单击 table 上的任何编辑按钮，这三个文本框将填充值。修改后必须更新。

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

我对应该将保存、更新、取消等按钮放在哪里感到困惑：在主视图中还是在局部视图中。如何完成功能？我在主解决方案中使用 VS2010 SP1 和 MVC4 和 EF，它有一个 MVC 项目和两个文件夹：BusinessLayer 和 DataAccessLayer。 BusinessLayer 文件夹包含用于 BO 和 BA 的单独 class 库，DataAccessLayer 文件夹包含一个 class 库文件，以及另外两个文件夹，一个用于 EF .edmx 文件，另一个用于 DA class .

我该如何实施？

Answer 1

简单方法：创建一个用于添加新记录的局部视图，以及用于更新现有记录的另一个局部视图。采用这种方法的原因是为了将 post-action 应该如何处理您的请求的问题分开。除非你添加一个 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" 更新现有记录。

现在最初，您可以在视图中显示您的 "insert" 部分，因此添加记录不需要为该部分视图提供服务。

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

现在，当您想要更新记录时，您需要调用服务器以将 "insert" 部分替换为 "update" 部分。您可以通过创建一个 "edit" ajax-action link 来完成此操作，该操作可容纳 table:

中的每条记录

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

如果您以前从未使用过 ajax link，我会解释这一点。前三个参数是 link 的文本、动作的名称和项目的 ID——与常规 Html-actionlink 没有什么不同。第 4 个参数让我们定义 ajax 选项。 "GET" 方法是不言自明的——我们不处理这个调用的任何数据，只从数据库中检索。 InsertionMode 选项定义了我们的 return 数据应该如何在视图中处理。在这种情况下，我们希望它替换当前的 "insert" 部分视图，因此我们选择 "replace"。最后，我们定义要插入局部视图的元素，我们命名为 "partialDiv".

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

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

  return PartialView("UpdatePartialView", record);
}

此操作使用 "edit" ajax-link 中的 profileid 从数据库中检索其记录，然后我们 returning 部分视图以记录为模型。结果应该是这个局部视图现在将被插入到我们的 "partialDiv" 中，替换初始的 "insert" 局部视图。

如果您需要，可以执行以下其他操作：

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

希望对您有所帮助

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

How to work with a partial view within a view for same model?

c#

asp.net-mvc

entity-framework

partial-views

asp.net-mvc-4