Trying to acheive outputing a variable from csharp into the class of a html element.
Currently i'm doing this:
#foreach (var cocktail in Model)
{
<li>
<div class="drink">
<div class="drink-sprite " ></div>
</div>
<div class="details">
<div class="name">#cocktail.CocktailName</div>
<div class="price">£#cocktail.Price.ToString("0.00")</div>
<div class="description">#cocktail.Description</div>
</div>
</li>
}
essentially in the div class="drink-sprite" I want to put the drink type in the glass so an image is shown based on the class types. so drink-sprite martini - which is dervied from cocktail.type.
Anythoughts?
#foreach (var cocktail in Model)
{
<li>
<div class="drink">
<div class="drink-sprite #cocktail.Type"></div>
</div>
<div class="details">
<div class="name">#cocktail.CocktailName</div>
<div class="price">£#cocktail.Price.ToString("0.00")</div>
<div class="description">#cocktail.Description</div>
</div>
</li>
}
Why don't you just print the variable directly in the class declaration?
Like so:
<div class="drink-sprite #cocktail.Type" ></div>
This should output the cocktail.Type directly into the HTML as you'd need.
If cocktail.Type is null or "" (empty), then this will still work, and won't affect your current implementation.
Related
I have a .NET 6 application where I am using the same set of Bootstrap classes to style cards across multiple views.
In a single view containing multiple cards, I am placing the classes inside variables to reduce duplicate code for the view.
E.g.
{
var card = "card h-100";
var cardHeader = "card-header d-flex justify-content-between align-items-center bg-light-lighten header-title text-info pb-2 pt-2 px-3";
var cardBody = "card-body pt-2 pb-0";
var detailRow = "row mb-2";
var detailLabel = "col-4 col-md-3 col-lg-4 font-weight-bold";
var detailValue = "col";
}
<div class="#card">
<h4 class="#cardHeader">
Details
<a class="#cardHeaderBtn"></a>
</h4>
<div class="#cardBody">
<div class="#detailRow">
<div class="#detailLabel">Status</div>
<div class="#detailValue">#Model.Status</div>
</div>
<div class="#detailRow">
<div class="#detailLabel">Order No</div>
<div class="#detailValue">#Model.OrderNo</div>
</div>
<div class="#detailRow">
<div class="#detailLabel">Buyer</div>
<div class="#detailValue">#Model.BuyerBusinessName</div>
</div>
</div>
</div>
<div class="#card">
<h4 class="#cardHeader">Finance & Units</h4>
<div class="#cardBody">
<div class="#detailRow">
<div class="#detailLabel">Buying</div>
<div class="#detailValue">#Model.BuyExchangeRate</div>
</div>
<div class="#detailRow">
<div class="#detailLabel">Selling</div>
<div class="#detailValue">#Model.SellExchangeRate</div>
</div>
</div>
</div>
I'm sure there is a better way to style all my cards across different views without duplicating the variables code into them, but I am having trouble finding the right keywords to search for what that might be!
What is the best way to reduce duplicate code when it comes to styling elements with the same set of bootstrap classes?
Thank you very much in advance.
i use geckofx c# to get the textcontext. why can't I get the textcontent result if the html element is like this
<div>
<div class="text1">
<div class="text2">Michael</div>
<div class="text2">Andrey</div>
</div>
</div>
output : null
whereas if the html element like this
<div class="text">
<div class="text1">
<div class="text2">Michael</div>
<div class="text2">Andrey</div>
</div">
</div>
output :
Michael, Andrey
I use geckofx code like this
GeckoNodeCollection names = geckoWebBrowser1.Document.GetElementsByClassName("text1");
foreach (GeckoNode name in names)
{
console.writeline(name.TextContent);
}
the difference that I see is in <div> and <div class="text">. I appreciate all the help you provide.
I use geckofx in my project c#, how can I get all the output :
Text 1
Text 2
Text 3
if the code example is like this :
<div class="A">
<div class="B">
<div class="C">
<div class="D">Text 1</div>
</div>
<div class="C">
<div class="D">Text 2</div>
</div>
<div class="C">
<div class="D">Text 3</div>
</div>
</div>
</div>
How about:
var a = this.Document.GetElementsByClassName("A").FirstOrDefault(); //this returns the parent A div (if it exists)
if (a != null)
{
var text = a.TextContent; // and that gets the full text.
}
Please bear in mind that 'GetElementsByClassName' returns a collection, because there can be many elements with the same class.
I have a property in each object item the Model which contains the image name. I need to load each property to properly style the css for each item. I found that you can't yet access the Model in the CSS files.
This is my View and attempt to use the #item.OutputImage in a style tag which doesn't seem to work:
#model IEnumerable<ValueVille.Models.CategoryViewModel>
#{
ViewBag.Title = "Home Page";
}
#foreach (var item in Model)
{
<style>
#nicky-bg-top {
background: #0197BA url("/Content/Images/#item.OutputImage") no-repeat 49.5% 0%;
background-size: 128px 128px;
}
</style>
}
The content that the css class is meant to style is the third div which has the id of nicky-bg-top:
<div class="row whiteBG">
#foreach (var item in Model)
{
<div class="col-sm-3 align-centre">
<img src="#item.OutputImage" alt="#item.Image" />
<div class="blend-box-top" id="nicky-bg-top">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
</div>
}
</div>
You could use inline style like this:
<div style="background-image: url(/Content/Images/#item.OutputImage)">
Or, with Angular
<div style="background-image:url( {{ item.outputImage }} )" ></div>
This leave the rest of your styling in CSS
I decided to just use multiple CSS classes in the CSS file and use them in the View like so using the model's id property:
class="blend-box-top category-head" id="categories-bg-top-#item.Id"
<div class="blend-box-top category-head" id="categories-bg-top-#item.Id">
<div class="item-container">
<div class="desc-plus">
<p>#item.Name</p>
<p>+</p>
</div>
</div>
</div>
I am using visual studio MVC and I did a C# foreach loop menu of food and using bootstrap framework. I can't figure away out to remove the before and after elements that are being created and they are blank. Here is my code:
<div class="container">
#foreach (var mName in Model)
{
<div class="col-md-6">
<p class="menu-list">#mName.menuName</p>
</div>
<div class="col-md-6">
<p class="menu-list-des">#mName.menuDescription</p>
</div>
<div class="col-md-6">
<p class="menu-list">#mName.menuTwo</p>
</div>
<div class="col-md-6">
<p class="menu-list-des">#mName.menuTwoDescription</p>
</div>
}
</div>
Is there away to remove the extra elements?