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

Question

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

asp.net-mvcrazorpartial-views

5

我是一名新手，对于asp net mvc还不熟悉，但在web表单方面有扎实的背景。

我想要实现这样一个页面：左侧有资产菜单，当您点击其中一个资产时，右侧会显示该资产的详细信息以供编辑。

现在我考虑需要使用两个强类型的局部视图。一个是左侧菜单，类型为资产列表；另一个是右侧面板，类型为资产。

目前我已经完成了左侧菜单的工作。

控制器

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的新部分视图吗？控制器会是什么样子？我是否仍需通过访问/assets的URL来到达页面，并且我该如何在两个部分视图之间传递值，因为我需要知道在左侧选中哪个资产以进行编辑？

谢谢。

- David Kethel

2个回答

2

您正在正确的道路上，您需要创建两个部分视图并将它们放置在一个父视图中。您也可以考虑在视图中使用AJAX调用来更新部分视图。这里有一篇文章解释了步骤以及您的视图-模型应该如何看起来：ASP.NET MVC 3中使用Razor视图引擎的部分视图以下是其他相关文章：

- Yusubov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- VJAI · Accepted Answer

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

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

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，请不要忘记包括unobtrusive 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")

你可以使用最适合你的那一个。