I have an ecommerce type solution where on the index.cs I do have my models and retrieving data from database, on the index.cshtml.
I do some futher data manipulation with joining tables to get top sold , newly added etc...
In a foreach loop I show the products in some nice layout. Works great. However now I want to sprinkle in different prodcard types inside that loop to break up a monotone look.
However with all the objects and logic on the index.cshtml page it will be loads of work to turn this into a razor component or a partial as I would need to pass much into these.
In PHP this would be easy.
Is there any other widget where I could simply do:
foreach(var prod in products)
{include prodcard.cshtml}
if(prod.special=true){{include prodcard2.cshtml}
}
where it has access to all parent level variables and objects?
Some Actual Code:
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>
Design your prodcard and prodcard2 partials, and set the model type at the top of each file:
@model [whatever type "prod" is]
Then in your Index.cshtml:
@foreach(var prod in products)
{
if(!prod.special)
{
<partial name="prodcard" model="prod" />
}
else
{
<partial name="prodcard2" model="prod" />
}
}