如何在一个视图中呈现强类型分部视图

我是这个asp网络mvc的新手，但在Web表单方面有很强的背景。

我想实现一个具有左侧资产菜单的页面，当您单击其中一个资产时，该资产的详细信息可以在同一页面的右侧进行编辑。

现在我想我需要使用 2 个强类型部分视图。 1 表示资产列表类型的左侧菜单，1 表示资产类型的右侧面板。

到目前为止，我的左侧菜单工作正常

控制器

public class AssetsController : Controller
{
    //
    // GET: /Assets/
    public ActionResult Index()
    {
        var assets =Repo.getAssetList();
        return View(assets);
    }
}

布局视图

 @model IList<CasWebSite.Models.Asset>
<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <h1>
        Assets</h1>

    @RenderBody()
</body>
</html>

索引视图

    @model IList<CasWebSite.Models.Asset>
@{
    Layout = "_Layout.cshtml";
}
<ul>
    @foreach (var asset in Model)
    {
        <li>@asset.Name </li>
    }
</ul>

那么如何在另一个视图中添加我是否创建一个类型的 Asset 的新部分视图，控制器会是什么样子，我仍然会通过转到 url/assets 来访问页面，以及如何在 2 个部分视图之间传递值，因为我需要知道在左侧选择了哪个资产进行编辑？

谢谢

如果我理解正确，您有一个视图，您希望在一个部分视图中显示资产列表，并在选择时显示另一个部分视图以编辑资产。

首先，应创建两个分部视图。

Assets.cshtml （部分视图）

@model IList<Models.Asset>
.. iterate the model and display the menu of assets

EditAsset.cshtml （部分视图）

@model Models.Asset
.. create the form and render the fields for editing

现在在主视图中Index.cshtml您必须使用 Html.Partial/Html.RenderPartial 调用Assets.cshtml，而另一个将在单击资产链接时调用。

Index.cshtml

@Html.Partial("Assets", Model.Assets) @*rendering the partial view*@
... other html
<div id="editAssetContainer">  @*edit form placeholder*@
</div>

请注意，您还应该有一个名为 editAssetContainer 的占位符，您将在其中显示编辑表单。

现在悬而未决的事情是如何在单击资产链接时在占位符中呈现编辑表单。您可以通过两种方式做到这一点：直接使用 jquery 或使用 Ajax.ActionLink。您可以将Asset.cshtml分部视图中的所有资产链接创建为 ajax 链接。如果您使用的是 Ajax.ActionLink，请不要忘记包含不显眼的 ajax 库）

例如Ajax.ActionLink

@Ajax.ActionLink(linkText, 
"EditAsset", // the action that returns the partial view
new {assetId = @asset.Id }, // the assetId that to be passed to the action
new AjaxOptions // you can specify the targetid and others here..
   { UpdateTargetId = "editAssetContainer", 
      InsertionMode = InsertionMode.Replace 
   }
)

在这两种情况下，您都需要在控制器中执行一个返回EditAsset.cshtml的操作。

public PartialViewResult EditAsset(int assetId)
{
   var asset = .. get asset using assetId from db.
   return PartialView(asset);
}

更新：

有两种

方法可以将模型加载到Assets.cshtml局部视图中。第一种方法是，您可以创建一个视图模型，其中包含资产列表作为属性，并使用此视图模型强键入index视图。然后，您可以调用Html.Partial将资产传递给它。

前任。

public class IndexViewModel
{
   public IList<Asset> Assets;
   .. other properties if there any
}

Index.cshtml

@model IndexViewModel
@Html.Partial("Assets", Model.Assets).

第二个优点是，您可以有一个子操作，该操作从数据库中获取资产列表并返回部分视图。在这种情况下，您无需强键入Index视图。

[ChildActionOnly]
public PartialViewResult Assets()
{
   var assets = .. get from db
   return View(assets);
}

可以将Index中的子操作称为

@Html.Action("Assets")

您可以使用最适合您的一种。

您走在正确的轨道上，您需要创建两个分部视图并将它们放置在父视图中。还可以考虑在视图中调用 AJAX 来更新部件。在这里，您是一篇解释步骤以及视图模型需要如何外观的帖子 - ASP.NET MVC 3 中的部分视图，带有 Razor 视图引擎

了解渲染部分
分部视图和强类型自定义视图模型
MVC ASP.NET 中部分视图、JQuery 和 AJAX 的强大功能

相关内容

最新更新

热门标签：