Question

在一个页面中，我有一个部分，其中正在检查一个集合为null，然后根据部分视图被渲染出来的项目数。

 @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);
    }

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

-cheers

Answer 1

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

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

Answer 2

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

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

click事件将提交表单，您可以定义AjaxOptions以让表单知道您要更新的内容，Post / Get，插入模式等。

Answer 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元素

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

3 个答案: