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?
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.
Below I have a grid layout in Razor.
The last 2 col should be between two separate cols... but it appears that the IF statement's are resulting in combining both the bottoms cols into one.
Am I doing this wrong?
It worked with just the second col to last col, but when I added the latest (at the bottom) - it is merging them now.
Here below, you'll see the code, and I attached a screen shot of what it looks like.
<div class="list-group container" id="JobRequestMonitorTable">
<div class="row list-group-item list-group-item-heading container divTableHeading">
<div class="col-md-4"> Job Code </div>
<div class="col-md-5"> Description </div>
<div class="col-md-2"> Schedule </div>
<div class="col-md-1"> Running </div>
<div class="col-md-1"></div>
</div>
#if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
{
<div class="row list-group-item-danger">
<div class="col-md-1 text-center">#ViewBag.ErrorMessage</div>
</div>
}
#foreach (var item in Model.JobRequests)
{
<div class="row list-group-item container">
<div class="col-md-4">#item.JobCode</div>
<div class="col-md-5">#item.Description</div>
<div class="col-md-2">#item.Schedule</div>
#if (#item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
<div class="col-md-1 text-break"></div>
#if (!item.IsRunning)
{
<span class="glyphicon glyphicon-list-alt"></span>
}
<div class="col-md-1"></div>
</div>
}
To clarify: I want these two cols to be SEPERATE cols:
#if (#item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
<div class="col-md-1 text-break"></div>
#if (!item.IsRunning)
{
<span class="glyphicon glyphicon-list-alt"></span>
}
<div class="col-md-1"></div>
You could add an empty icon if the item isn't running:
#if (#item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
#else
{
<span class="glyphicon"></span>
}
You need to put the <span> tags inside the <div> tags, which is what is defining your columns. You'll also need to probably change the item.Description column to col-md-4, as Bootstrap has a maximum of 12 columns across (each col being width: 8.3333%).
<div class="col-md-1 text-break">
#if (#item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
</div>
<div class="col-md-1">
#if (!item.IsRunning)
{
<span class="glyphicon glyphicon-list-alt"></span>
}
</div>
I have assigned a list to ViewBag as below.
this is the code ...
var cer = tac.getAwards(hotelLocID);
List<Certificates> allcertificates = new List<Certificates>();
foreach (var items in cer)
{
allcertificates.Add(new Certificates
{
certifyimageurllarge = items.awardimage.largeimage,
certifyimageurlsmall = items.awardimage.smallimage,
certifyimageurltiny = items.awardimage.tinyimage,
awardedyear = items.year,
awardtype = items.awardtype
});
}
ViewBag.certificates = allcertificates;
in here allcertificates list count is 2.but I want to show only first one in the View.this is my view
#foreach(var items in #ViewBag.certificates)
{
<div class="row" style="padding-left:3%;">
<div class="col-md-2 col-xs-2"><img class="img img-responsive" src="#items.certifyimageurltiny" /></div><div class="col-md-6 col-xs-8" style="margin-left:-6%;padding-top:2%;">#items.awardtype | #items.awardedyear</div>
</div>
}
How can I do that.
Try this instead of foreach:
<div class="row" style="padding-left:3%;">
<div class="col-md-2 col-xs-2">
<img class="img img-responsive" src="#ViewBag.certificates[0].certifyimageurltiny"/>
</div>
<div class="col-md-6 col-xs-8" style="margin-left:-6%;padding-top:2%;">
#ViewBag.certificates[0].awardtype | #ViewBag.certificates[0].awardedyear
</div>
</div>
A minimal change would be to simply add a line with break; just above the closing }.
job done in View side like this
<div class="row" style="padding-left:3%;">
<div class="col-md-2 col-xs-2"><img class="img img-responsive" src="#ViewBag.certificates[0].certifyimageurltiny" /></div><div class="col-md-6 col-xs-8" style="margin-left:-6%;padding-top:2%;">#ViewBag.certificates[0].awardtype | #ViewBag.certificates[0].awardedyear</div>
</div>
this link : here helped me lot.thanx everyone who supprted me.
I'm trying to render out my projects sorted under the right category. I have it right now so right product will go under right category but it doesn't render out the name. It renders out the object so it looks rather weird.
This is my code:
int i = 0;
var categories = ViewBag.Category as List<Category>;
var products = ViewBag.Products as List<Product>;
foreach (var cateory in categories)
{
i++;
<div class="panel-group accordion" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapse_#i">
#cateory.Name
</a>
</h4>
</div>
<div id="collapse_#i" class="panel-collapse collapse">
<div class="panel-body">
<div class="col-md-12">
#cateory.Products
</div>
</div>
</div>
</div>
</div>
}
And this is the output.
System.Collections.Generic.HashSet`1[ProductCatalog.Models.Product]
I have tired this #cateory.Products.Select(n => n.Name).ToString(); but did not do much.
Following code is executed fine
#foreach (var item in Model.SubCategories)
{
<div class="item-box">
<div class="sub-category-item">
<h2 class="title">
<a href="#Url.RouteUrl("Category", new { SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name
</a>
</h2>
</div>
</div>
}
this works also
#foreach (var item in Model.SubCategories)
{
<div class="item-box">
<div class="sub-category-item">
<h2 class="title">
<text>#item.SeName</text>
#*<a href="#Url.RouteUrl("Category", new { SeName = item.SeName })" title="#item.PictureModel.Title">
#item.Name
</a>*#
</h2>
</div>
</div>
}
But when I want to write same code with simple a href attribute as below, VS ignores the line. I cant even set a break point over the line a href. Am I doing something wrong?
#foreach (var item in Model.SubCategories)
{
<div class="item-box">
<div class="sub-category-item">
<h2 class="title">
<a href="#item.SeName" title="#item.PictureModel.Title" />
</h2>
</div>
</div>
}
Add link text:
#foreach (var item in Model.SubCategories)
{
<div class="item-box">
<div class="sub-category-item">
<h2 class="title">
#item.PictureModel.Title
</h2>
</div>
</div>
}