我需要在 .net Web 应用程序中重复部分(产品卡)如何最好地分离卡片

问题描述 投票:0回答:1

我有一个电子商务类型的解决方案,在index.cs上我确实有我的模型并从数据库检索数据,在index.cshtml上我做了一些进一步的数据操作,通过连接表来获得最畅销的,新添加的等等...... forwach 循环我以一些漂亮的布局展示产品。 效果很好。 然而现在我想在该循环中加入不同的产品卡类型,以打破单调的外观。所以我想将产品卡分解成它自己的.cshtml。 然而,对于 index.cshtml 页面上的所有对象和逻辑,将其转换为剃刀组件或部分组件将需要大量工作,因为我需要将大量内容传递给这些组件。 在 PHP 中这很容易。 有没有其他小部件我可以简单地做 foreach(产品中的var prod) {包括产品卡.cshtml} if(prod.special=true){{包括 prodcard2.cshtml} } 它可以在哪里访问所有父级变量和对象?

一些实际代码

 foreach (var w4 in ofstatus4)
{
ctaCards = GlobalHelp.GetCTAText(w4.Type);
double storeCoupon, itemRate, salePrice = 0;

string zip, lat, lng;
(string, string) exLink;
exLink.Item1 = "";
exLink.Item2 = "";
string itemPicUrl = "/IM/*/" + w4.EMID.ToString() + "/" + Model.Referrer;
string browserTarget = "_self";

if (w4.Type == 4) //Linkout
{
    exLink = GlobalHelp.GetExternalLinkCTA(w4.OFID, w4.Type, Model._context);
    itemPicUrl = exLink.Item2;
    browserTarget = "_blank";
}
if (w4.Zip == null) { zip = "00000"; } else { zip = w4.Zip; }
if (w4.Latitude == null) { lat = "0.0"; } else { lat = w4.Latitude; }
if (w4.Longitude == null) { lng = "0.0"; } else { lng = w4.Longitude; }
string link = "";
//STORE SALE CHECK
if (w4.StorewideSale > 0)
{
    itemRate = (double)w4.Rate;
    storeCoupon = ((double)w4.StorewideSale / 100) * itemRate;
    salePrice = itemRate - storeCoupon;

}
else { salePrice = (double)w4.Rate; }


var search_params = w4.Zip + " " + w4.OfferingName + " " + w4.OfferingDescription + " " + w4.OfferingDetails + " " + w4.ClassInstructor + " " + w4.Specialty + " " + w4.OfferingCategory + " " + w4.Tags;

    var score = await GlobalHelp.GetSurveyScore(0, w4.OFID, Model._context);

        <div class="prod_list">

            
                @if (w4.Type != 4)
        {
            link = "location.href = '" + @itemPicUrl + "';";
        }
        else
        {
            link = "window.open('" + @itemPicUrl + "','_newtab');";
           
        }
            <div class="card" data-id="w4.OfferingCategory" style="padding:3px;" onclick="@link">
         <div class="con-star">
                    <h7 data-id="@search_params"></h7>
                </div>
            
                    <div class="con-image">
                    @{
                         <img src="https://@Model.Platform.AzureStorageName/offerings/@w4.OFID/of_hero.png" loading="lazy" class="image" data-alt-src="https://@Model.Platform.AzureStorageName/sellers/@w4.SPID/spprofile.png,https://@Model.Platform.AzureStorageName/marketoperators/@Model.MarketOperator.MOID/mo_logo.png" onerror="loadAltImage(this);" />
                    }
                    
                </div>
                @{
                            <[email protected](score.avgScore)-->
                Random random = new Random();
                double rating =  random.Next(4,6);
                int ratingcnt = 0;
                if (rating > 0.0 )
                {
                    ratingcnt = random.Next(5, 20);
                }

                if (Model.MarketOperator.MOID == 147 || Model.MarketOperator.MOID == 155 || Model.MarketOperator.MOID == 168 || Model.MarketOperator.MOID == 172)
                {} else
                {

                <div class="row gt-0 p-0 g-0" style="padding:0;margin:0,0;"><div id="[email protected]" class="col-6 rateyo [email protected] g-0 p-0" style="margin-left:5px;margin-right:5px" data-score="@Convert.ToDouble(score.avgScore)"></div><div class="col-6 g-0 p-0" style="font-size: .8rem;margin-top:0; font-color:green;"><font color="green">@score.totalReview</font></div></div>
                }
                    }


                    

            <div class="con-text">

                                                                    
                    <h6 data-id="@zip" data-id1="@lat" data-id2="@lng" data-id3="@w4.OfferingCategory.ToUpper()">
                    @w4.OfferingCategory
                </h6>
            </div>
.net razor-pages
1个回答
0
投票

设计您的 prodcard 和 prodcard2 部分,并在每个文件的顶部设置模型类型:

@model [whatever type "prod" is]

然后在您的 Index.cshtml 中:

@foreach(var prod in products) 
{
    if(!prod.special)
    {
        <partial name="prodcard" model="prod" />
    }
    else
    {
        <partial name="prodcard2" model="prod" />
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.