checkboxes under each other - html

I try to make checkboxes under each other like this:
<table>
<tr>
<td>
#foreach (var item in Model.Directories)
{
#Html.CheckBox("Assigned", Model.IsActive.HasValue ? Model.IsActive : false);
#Html.LabelFor(model => model.Directories)
}
</td>
</tr>
</table>
but now the checkboxes are all under the same line.
Thank you

If you wish for the checkboxes to appear in a new line, rather than appending to the same td cell, you should append to create a new tr instead:
<table>
#foreach (var item in Model.Directories) {
<tr>
<td>
#Html.CheckBox("Assigned", Model.IsActive.HasValue ? Model.IsActive : false);
#Html.LabelFor(model => model.Directories)
</td>
</tr>
}
</table>
which will create a new table row for each model Item

Related

Razor table with two columns in mvc

this my controller:
public ActionResult Index(int PID = -1, int TID = -1, string DateT = "")
{
return View(barcodes);
}
in my view :
#model IEnumerable<barkod.Models.Barcode>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.barC)
</td>
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
</tr>
}
It is okay, but I want the table information to be in two columns.
Just add the table tag around your foreach loop. If you want to have 4 columns you have to add a counter. Either use a for loop instead of foreach (depending on your model type) or add your own row counter.
#model IEnumerable<barkod.Models.Barcode>
#{ int counter = 0; }
<table>
<tr>
#foreach (var item in Model)
{
<td>
#Html.DisplayFor(modelItem => item.barC)
</td>
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
#if (++counter % 2 == 0)
{
</tr><tr>
}
}
</tr>
</table>
Like this on every 2nd loop a new row is added. You will have to add some additional logic to handle the case when the number of items is not equal.

How do I make the text in last row bold in a table using #foreach?

Is there a way to make the text in the last row bold using #foreach html?
I want to display the total sum of each column in in bold text.
I thought about making a new table below the current one, only displaying the total, but if I can use the same table it would be great.
Model
//This is the last row
foreach (DataRow item in current2.Tables[0].Rows)
{
var cid2 = new SModel
{
Users = Convert.ToInt32(item["TotalUsers"]),
Rows = Convert.ToInt32(item["TotalRows"]),
Orders = Convert.ToInt32(item["TotalOrders"]),
Customers = Convert.ToInt32(item["TotalCustomers"]),
Quantity = Convert.ToInt32(item["TotalQuantity"]),
};
CASVList.Add(cid2);
}
View
<table>
<thead>
<tr>
<th>Hour</th>
<th>Users</th>
<th>Customers</th>
<th>Orders</th>
<th>Rows</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.SModelObject.CSItem)
{
<tr>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[0]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[1]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[2]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[3]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[4]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[5]))</td>
</tr>
}
</tbody>
</table>
Thanks in advance!
Just give the last row a CSS selector that gives bold to all its' children:
tr:last-child {
font-weight: bold;
}
If I understand correctly you're looking for something like this:
table tr:last-child {
font-weight: bold;
}
<table>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
<tr>
<td>Something</td>
<td>Something</td>
<td>Something</td>
</tr>
</table>
1) You can do this easily by using CSS
table tr:last-child {
font-weight: bold;
}
2)
Else if you are particular about only doing it in the foreach loop then the below code will help.
{ var countOfItems = Model.SModelObject.CSItem.Count; //take a note of total items
var loopCounter = 1; // have a counter
}
#foreach (var item in Model.SModelObject.CSItem)
{
//if counter and the total items count are same it means you are in last loop,
// So add the style to make the text bold.
<tr style="#{loopCounter == countOfItems ? "font-weight: bold":"" }">
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[0]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[1]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[2]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[3]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[4]))</td>
<td>#Html.DisplayFor(modelItem => (item.Text.Split(',')[5]))</td>
</tr>
loopCounter+;
}

(asp.net MVC5) change background color of a tables based on what a method called profibility returns

hey i have this view in my mvc application. If you look at the "tr" where it says "lönsamhet: " and then a method is executed which counts and returns the profilbility of the project. and if the profibility method returns a number bigger than 20% i want the table background color to turn green. and if less than 20% i want it to turn red... How can i do that? and my model is a list of a object i made called project. css is not my best side so would appricieate help. thanks.
#model List<Blogg.Models.BlogPost>
#foreach (var item in Model)
{
<div>
<table style="font-family: Arial; border:1px solid black; width: 1000px; height: 20px">
<tr>
<td><b>Projekt Numer: </b>#item.ID</td>
</tr>
<tr>
<td><b>Projekt Namn: </b>#item.name</td>
</tr>
<tr>
<td><b>Kund Namn: </b></td>
</tr>
<tr>
<td><b>Lönsamhet: </b>#item.profitability()</td>
</tr>
<tr>
<td><b>#ViewBag.Basecamp</b></td>
</tr>
<tr>
<td>#Html.ActionLink("Detaljer", "Details", new { id = item.ID })</td>
</tr>
</table>
</div>
Could you not use JQuery?
<td class="profit"><b>Lönsamhet: </b>#item.profitability()</td>
if(variableName > 20){
$('.profit').css("background-color","green");
}
else{
$('.profit').css("background-color","red");
}
For multiple fields do a jquery.each loop and grab the value of each class.
$('.profit').each(function(){
var variableName = $(this).val();
if(variableName > 20){
$('.profit').css("background-color","green");
}
else{
$('.profit').css("background-color","red");
}
});

Delete last row of table in nested div

i want to delete last row.
i have dive within div , which has table and many rows.
i wanted to delete last row of table. i am unable to iterate to last tr.
<div class="span15" id="MURWorksheetPage2">
<div class="span8">
<table>
<tr>
<td class="col1">
#Html.DisplayNameFor(model => model.MedicineUseNo) #Html.TextBoxFor(model => model.MedicineUseNo, new { id = "txtMedicineUseNo", style = "Width:20px" })
</td>
<td class="col2">#Html.DisplayNameFor(model => model.MedicinePrescribed) #Html.TextBoxFor(model => model.MedicinePrescribed, new { id = "txtMedicinePrescribed" })</td>
</tr>
<tr>
<td class="col1" colspan="2">
#Html.DisplayNameFor(model => model.OTC) #Html.TextBoxFor(model => model.OTC, new { id = "txtOTC" })
</td>
</tr>
</table>
</div>
</div>
Not tested, but this should work.
$('#MURWorksheetPage2 div table :last').remove();

Adding data into rows of next column

Basically I am creating a data grid that displays data from different tables in database.I am using ASP.NET MVC4 for this.
Following is how my part of my code looks:
<table class="myTable">
<tbody>
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
#* Here my logic would go*#
</td>
</tr>
}
So after displaying the rows of name of sets,in the next column I would want to display the elements that belong to that set.So I wrote another for loop in <td></td> that would loop through the Model.elements and check if it belongs to that set and display it.But I am getting "Element td cannot be nested within element td " validation error.
So how can I add data into rows of the next column?
Put your logic below the first end td tags instead. You can't put td tags inside other td tags; a series of sibling td tags make up a row.
If you want each separate piece of data in its own column:
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
</td>
#foreach (var element in Model.elements)
{
<td>
#*logic here*#
</td>
}
</tr>
If you want all your content inside the same cell, then you want:
#foreach (var item in Model.sets)
{
<tr class="parent" data-level="0">
<td>
#item.setName
</td>
<td>
#foreach (var element in Model.elements)
{
#*logic here*#
}
</td>
</tr>
}