asp.net-mvc – 如何在一个视图中呈现强类型的局部视图？

发布时间：2020-12-16 07:28:19 所属栏目：asp.Net 来源：网络整理

导读：我是这个asp net mvc的新手,但在网络表格方面有很强的背景. 我想实现一个具有左侧资产菜单的页面,当您单击其中一个资产时,该资产的详细信息可以在同一页面的右侧进行编辑. 现在我想我将需要使用2个强类型的局部视图. 1表示左侧菜单,类型为资产列表,1表示资产

我是这个asp net mvc的新手,但在网络表格方面有很强的背景.

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

现在我想我将需要使用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局部视图中.第一种方法是您可以创建一个包含资产列表作为属性的视图模型,并使用此视图模型强烈键入索引视图.然后你可以调用Html.Partial将资产传递给它.

防爆.

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

Index.cshtml

@model IndexViewModel

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

第二个方法是你可以有一个子操作,从数据库中获取资产列表并返回局部视图.在这种情况下,您无需强烈键入索引视图.

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

您可以从索引中调用子操作

@Html.Action("Assets")

您可以使用哪一个最适合您.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!