5

我是这个 asp net 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>

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

谢谢

4

2 回答 2

8

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

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

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，您必须调用Assets.cshtmlusingHtml.Partial/Html.RenderPartial而另一个将在单击资产链接时调用。

索引.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
}

索引.cshtml

@model IndexViewModel

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

第二种方法是您可以有一个从数据库获取资产列表并返回部分视图的子操作。在这种情况下，您不需要强输入Index视图。

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

Index您可以从as调用子操作

@Html.Action("Assets")

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

于 2012-06-29T04:17:27.360 回答
2

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

于 2012-06-29T04:04:20.557 回答