在 Nopcommerce 主页上为单独的产品添加块标题

Question

我想添加块标题来分隔主页上的一些产品，

我正在使用 nopcommerce 3.0 源代码，

目前我的主页上有 24 个产品，

我希望显示 22，然后插入标题横幅，

然后在标题横幅下显示最后的两个产品

我能找到的代码是：

HomepageProducts.cshtml 视图

@model IList<ProductOverviewModel>

@using Nop.Web.Models.Catalog;

@if (Model.Count > 0)
{
    <div class="product-grid home-page-product-grid">
        <div class="title">
            <strong>@T("HomePage.Products")</strong>
        </div>
        @foreach (var item in Model)
        {
            <div class="item-box">
                @Html.Partial("_ProductBox", item)
            </div>
        }
    </div>
}

更新

我现在用@Razor 提供的答案修改了代码，

它现在显示前 22 个产品，然后是我的标题，但之后不显示剩余的产品，

@if (Model.Count > 0) 
    {
        <div class="product-grid home-page-product-grid">
            <div class="title">
                <strong>@T("HomePage.Products")</strong>
            </div>

           @{
            int I = 0;
            foreach (var item in Model)
            {
                if(I != 22)
                {
                    <div class="item-box">
                    @Html.Partial("_ProductBox", item)
                    </div>
                    I++;
                }
             }

            <div class="item-box">
                My block title sentence!
            </div>

            foreach(var item in Model)
            {
                if(I > 22)
                {
                    <div class="item-box">
                    @Html.Partial("_ProductBox", item)
                    </div>
                }
            }
           }

        </div>
    }

Answer 1

所以你想显示前 22 个，然后是你的自定义块标题，然后是其余的产品？

走这条线：

@foreach (var item in Model)

并用这两个替换：

@int i = 0;
@for (i = 0; i < Model.Count() && i < 22; i++)

还有：

@Html.Partial("_ProductBox", item)

与

@Html.Partial("_ProductBox", Model[i])

这将导致视图只输出前 22 个产品，之后您可以插入带有以下内容的块标题：

<div class="item-box">
    My block title sentence!
</div>

然后输出剩余的产品：

@for (i = i; i < Model.Count(); i++) 
{
    <div class="item-box">
        @Html.Partial("_ProductBox", Model[i])
    </div>
}

之所以有效，是因为我们在变量 i 中跟踪了已经渲染的产品数量，然后我们从那里继续在模型中找到的产品集合中（如果它们超过 22 个）。

请注意，即使列表末尾的产品少于 22 个，代码仍会输出您的块标题。

所以最终的变化是：

@model IList<ProductOverviewModel>

@using Nop.Web.Models.Catalog;

@if (Model.Count > 0)
{
    <div class="product-grid home-page-product-grid">
        <div class="title">
            <strong>@T("HomePage.Products")</strong>
        </div>
        @int i = 0;
        @for (i = 0; i < Model.Count() && i < 22; i++)
        {
            <div class="item-box">
                @Html.Partial("_ProductBox", Model[i])
            </div>
        }
        <div class="item-box">
            My block title sentence!
        </div>
        @for (i = i; i < Model.Count(); i++) 
        {
            <div class="item-box">
                @Html.Partial("_ProductBox", Model[i])
            </div>
        }

    </div>
}

编辑：抱歉，我忘记将单个产品的引用更改为基于数组，使用 Model[i] 而不是 item。请参阅上面的更改。

Answer 2

我已经在 C# 中创建了一些 foreach 循环，将其转换，你应该很高兴 :)

@if (Model.Count > 0)
    {
        <div class="product-grid home-page-product-grid">
            <div class="title">
                <strong>@T("HomePage.Products")</strong>
            </div>
            @int i = 0;
            @for (i = 0; i < Model.Count() && i < 22; i++)
            {
                <div class="item-box">
                    @Html.Partial("_ProductBox", item)
                </div>
            }


            <------ CONVERT THE PART BELOW TO CSHTML ------>
            Int I = 0;

            foreach (var item in Model)
            {
                If(I != 22)
                {
                    <div class="item-box">
                    @Html.Partial("_ProductBox", item)
                    </div>
                    I++
                }
            }
            <------ CONVERT THE PART ABOVE TO CSHTML ------>


            <div class="item-box">
                My block title sentence!
            </div>
            <------ CONVERT THE PART BELOW TO CSHTML ------>
            foreach(var item in Model)
            {
                if(i > 22)
                {
                    <div class="item-box">
                    @Html.Partial("_ProductBox", item)
                    </div>
                }
            }
            <------ CONVERT THE PART ABOVE TO CSHTML ------>
        </div>
    }

希望这会有所帮助:)

Answer 3

这样的事情应该可以工作。

<div class="product-grid home-page-product-grid">
    <div class="title">
        <strong>@T("HomePage.Products")</strong>
    </div>
    @for (var i = 0; i < Model.Count(); i++)
    {
        var item = Model[i];

        <div class="item-box">
            @Html.Partial("_ProductBox", item)
        </div>

        if (i == 22)
        {
            <div class="banner">banner</div>
        }
    }
</div>