当模型是集合类型时动态渲染部分视图答案

【问题标题】：Rendering partial views dynamically when the model is a collection type当模型是集合类型时动态渲染部分视图
【发布时间】：2014-04-04 01:54:07
【问题描述】：

在一个页面中，我有一个部分正在检查一个集合是否为空，然后根据项目的数量呈现出部分视图。

 @if (@Model.AssociatedNarrative != null)
        {
            <hr />
            <div id="narratives" class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"><a data-toggle="collapse" href="#collapseNarrative">Narratives [ @Model.AssociatedNarrative.Count() ]</a></h4>
                        </div>
                        <div id="collapseNarrative" class="panel-collapse collapse">
                            <div class="panel-body">

                                @foreach (var narr in @Model.AssociatedNarrative)
                                {
                                @Html.Partial("_NfirsAssociatedNarrative", narr)
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>

局部视图

<div class="col-md-12">
    <p><strong>Date Entered</strong>&nbsp; @Html.DisplayFor(x => x.DateEntered)</p>
</div>
@if (!string.IsNullOrWhiteSpace(@Model.Title))
{
    <div class="col-md-12">
        <p><strong>Narrative Title</strong>&nbsp; @Html.DisplayFor(x => x.Title)  </p>
    </div>
}
<div class="col-md-12">
    <p>@Html.DisplayFor(x => x.NarrativeText)</p>
    <hr />
</div>

我更改了此功能，以便数据仅在点击事件时加载。我目前陷入困境的地方是找出当附加模型是集合时将部分视图返回/渲染到 UI 的最佳方法。我如何将它传递给 UI，以便它（部分）呈现每个项目？这是否需要在 ajax 返回调用中处理，或者有没有办法让剃刀语法/ mvc 来处理这个？

public ActionResult GetNarratives(string id)
    {
        //Get Narratives 
        sampleModel fm = new sampleModel();
        List<Narrative> narr = new List<Narrative>();
        narr = fm.GenerateMockBaseNarratives(4);

        return PartialView("_AssociatedNarrative", narr);
    }

如果集合是返回类型，我将不胜感激有关如何最好地呈现局部视图的任何建议。

-干杯

【问题讨论】：

标签： c# asp.net-mvc asp.net-mvc-4

【解决方案1】：

第一次通过时，代码看起来不错，但也许您正在寻找RenderPartial 而不是Partial：

@foreach (var narr in @Model.AssociatedNarrative)
{
    @Html.RenderPartial("_NfirsAssociatedNarrative", narr)
}

【讨论】：

foreach 在加载时工作正常，但是当我想通过事件动态加载部分视图时无法使用它。我错过了什么？

【解决方案2】：

您需要通过 ajax 处理返回的局部视图。

@Ajax.BeginForm(......){ }

点击事件会提交表单，你可以定义你的 AjaxOptions 让表单知道你想要更新什么，是 Post/Get，你的插入模式等等。

【讨论】：

我查看了@Ajax 事件，但 ObjectTargetID 似乎是问题所在。既然我要返回一个集合，我将如何发布到 ID，因为它需要是唯一的？当我只需要发布一次部分内容时，这似乎效果很好，但是如果您在一个集合中有多个项目怎么办？
目标ID是你要插入数据的地方，可以使用InsertionMode.Replace，如果再次调用ajax方法只会替换现有的局部视图，否则可以使用InsertionMode。追加，它会将数据追加到 div 中。

【解决方案3】：

为了让集合在局部视图中呈现，我将局部视图修改为现在引用 Collection 类型，然后将内容包装在 for 循环中：

    @model List<MyApp.Business.Narrative>

    <!-- Associated Narrative-->
    @for (int i = 0; i < @Model.Count(); i++)
    {
        <div class="col-md-12">
            <p><strong>Date Entered</strong>&nbsp; @Html.DisplayFor(x => x[i].DateEntered)</p>
        </div>
        if (!string.IsNullOrWhiteSpace(@Model[i].Title))
        {
            <div class="col-md-12">
                <p><strong>Narrative Title</strong>&nbsp; @Html.DisplayFor(x => x[i].Title)  </p>
            </div>
        }
        <div class="col-md-12">
            <p>@Html.DisplayFor(x => x[i].NarrativeText)</p>
            <hr />
        </div>

}

在基本视图中我使用@Ajax.ActionLink 来引用控制器和方法

@Ajax.ActionLink("Narratives", "GetNarratives", new { id = 4 }, 
                            new AjaxOptions { 
                            UpdateTargetId = "narrContainer", 
                            InsertionMode = InsertionMode.Replace, 
                            HttpMethod = "GET" })

InsertMode 和 UpdateTargetId 允许我用局部视图替换 DOM narrContainer 中的 div 元素

【讨论】：