当模型为集合类型时动态呈现分部视图

本文关键字：视图 动态 模型 集合 集合类 类型 | 更新日期: 2023-09-27 17:56:29

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

 @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 返回调用中处理，或者有没有办法允许 razor 语法/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);
    }

我将不胜感激任何关于如何在集合是返回类型时最好地呈现分部视图的建议。

-干杯

当模型为集合类型时动态呈现分部视图

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

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

通过 ajax 处理返回的部分视图。

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

单击事件将提交表单，您可以定义 AjaxOptions 以让表单知道您要更新的内容，无论是发布/获取、插入模式等。

为了使集合在分部视图中呈现，我修改了分部视图以引用集合类型，然后将内容包装在 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 元素

相关文章：