In my MVC view, I am displaying list of data from my model in a table as shown below. How to make a specified row to change color when one of the field satisfy certain condition within my if-else statement? It does not seems like I can add a jquery inside my if-else there for the purpose...
My View:
...
<table>
...
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.field1)
</td>
<td>
#Html.DisplayFor(modelItem => item.field2)
</td>
<td>
#if(item.field3== 0){
//change this row to grey color
}
else {
#Html.DisplayFor(modelItem => item.field3)
}
</td>
....
</table>
You just need to do it up where you are outputting the row. One way would be:
<table>
...
#foreach (var item in Model) {
<tr style='background-color: #(item.field3 == 0 ? "gray" : "white");'>
<td>
#Html.DisplayFor(modelItem => item.field1)
</td>
<td>
#Html.DisplayFor(modelItem => item.field2)
</td>
<td>
#Html.DisplayFor(modelItem => item.field3)
</td>
}
....
</table>
There are all sorts of ways to construct that conditional, just depends on your scenario. But the key is that you can access the field3 property of the item object anywhere in that foreach loop, just like a normal C# foreach
Related
I've got a view that is showing the breakdown of all fault categories reported and the area that they've been reported in. What I need to get is a total count of the number of faults of each category, and then a sub count of each area under that type. I've seen around that there are options to use Model.Count(), however whenever I try that it doesn't return the right number.
The view code that I'm using is below:
<table class="table table-responsive">
<tr>
#foreach (var catGroup in Model.GroupBy(item => item.job_category))
{
foreach (var itemCat in catGroup.Take(1))
{
if (itemCat.job_category != null)
{
<td>
<table id="Tbl_Total_#itemCat.job_category">
<tr>
<th>
#Html.DisplayFor(modelItem => itemCat.job_category)
</th>
</tr>
#foreach (var item in catGroup.GroupBy(item => item.job_area))
{
foreach (var itemArea in item.Take(1))
{
<tr>
<td>
#Html.DisplayFor(modelItem => itemArea.job_area)
</td>
</tr>
}
}
</table>
</td>
}
}
}
</tr>
</table>
Can someone point me in the right direction to get a count per category, and per area under the categories?
Thanks
You can get the number of element per group calling Count extension method. eg, for the category groups you can do this:
catGroup.Count()
And you can do the same for the areas:
item.Count()
I have a template maker which creates Scorecards with a possibility of having 10 sections with up to 10 questions in each. When creating my MVC View I only want to show sections that have questions. I have a column in my DB table that has a count of the sections and also for each section I have a column indicating the amount of questions in that section. I have tried this but the model binding does not like the insertion of dynamic names. I think it could be my syntax. Below is what I tried but it doesn't work:
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentId)
</td>
<td>
#Html.DisplayFor(modelItem => item.TotSections)
</td>
#for (var i = 0; i < item.TotSections; i++ )
{
var section = 1;
var SN = "S" + section + "Name";
var SNUP = "S" + section + "NumUP";
var SNQ = "S" + section + "NumQuest";
<td>
#Html.DisplayFor(modelItem => item[SN])
</td>
<td>
#Html.DisplayFor(modelItem => item[SNUP])
</td>
<td>
#Html.DisplayFor(modelItem => item[SNQ])
</td>
}
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.TemplateId }) |
#Html.ActionLink("Details", "Details", new { id = item.TemplateId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.TemplateId })
</td>
</tr>
}
IS there a way of doing this or do I need to rethink?
Thanks in advance.
Edit:
If I had a Scorcard Template with one section in it the static table row would look like this:
#foreach (var item in Model)
{
<tr>
<!--These are Constant for each item-->
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentId)
</td>
<td>
#Html.DisplayFor(modelItem => item.TotSections)
</td>
<!--BELOW IS WHERE I AM HAVING THE PROBLEM-->
<!--I want to create these columns dynamically,-->
<!--depending on how many sections in column '**TotSections**' above-->
<td>
#Html.DisplayFor(modelItem => item.S1Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.S1NumUP)
</td>
<td>
#Html.DisplayFor(modelItem => item.S1NumQuest)
</td>
<!--Below will be constant for each table row-->
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.TemplateId }) |
#Html.ActionLink("Details", "Details", new { id = item.TemplateId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.TemplateId })
</td>
</tr>
}
if there were two sections:
#foreach (var item in Model)
{
<tr>
<!--These are Constant-->
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#Html.DisplayFor(modelItem => item.DepartmentId)
</td>
<td>
#Html.DisplayFor(modelItem => item.TotSections)
</td>
<!--BELOW IS WHERE I AM HAVING THE PROBLEM-->
<!--I want to create these columns dynamically,-->
<!--depending on how many sections in column '**TotSections**' above-->
<td>
#Html.DisplayFor(modelItem => item.S1Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.S1NumUP)
</td>
<td>
#Html.DisplayFor(modelItem => item.S1NumQuest)
</td>
<td>
#Html.DisplayFor(modelItem => item.S2Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.S2NumUP)
</td>
<td>
#Html.DisplayFor(modelItem => item.S2NumQuest)
</td>
<!--Below will be constant-->
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.TemplateId }) |
#Html.ActionLink("Details", "Details", new { id = item.TemplateId }) |
#Html.ActionLink("Delete", "Delete", new { id = item.TemplateId })
</td>
</tr>
}
The end view will look like this:
You can see above under the TotSections column:
Test Template 1 has 1 section. If I display these with a static viewmodel, columns will be displayed when they shouldn't be and columns won't be displayed when they should. As in the above picture it is showing 2 sections worth when it only has one.
Test Template 2 has 6 sections but is only displaying 2 of the six's columns so is missing 4 sections worth of columns.
The code I originally posted was my attempt to get the number of sections from item.TotSections and then create the section columns dynamically.
Hope this is a bit clearer
I'm trying to do something like the following:
<tbody class="searchable">
#foreach (var item in Model)
{
if (item.Account.AccountName != "xyz")
<tr class="danger">
else
<tr>
<td>
#Html.DisplayFor(modelItem => item.LocationName)
</td>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
</tr>
}
</tbody>
The compiler doesn't like the if statement where I'm trying to create a row tag dynamically. The error I'm getting says the #foreach block is missing a close '}'. My guess is that the 'if' statement is being misinterpreted. Can someone suggest how I can fix this?
You can just avoid the if, and do something like:
<tr class='#(item.Account.AccountName != "xyz" ? "danger" : "")'>
<td>
#Html.DisplayFor(modelItem => item.LocationName)
</td>
<td>
#Html.DisplayFor(modelItem => item.City)
</td>
</tr>
My model has a list of 3 elements, each element has a string (AnswerBody) and a bool (correct).
When I submit the form, I get the values perfectly.
The problem is that, when selecting more than one radio button they all stay selected.
It shouldn't be like this. It should deselect the previous choice when selecting another one.
I'm one week stuck with this trick and I don't know how to solve.
Any help I'll be appreciated.
This is a part of my View:
<table>
<tr>
<td>
#Html.TextAreaFor(c => c.AnsLst[0].AnswerBody)
</td>
<td>
#Html.RadioButtonFor(c => c.AnsLst[0].Correct, true)
</td>
</tr>
<tr>
<td>
#Html.TextAreaFor(c => c.AnsLst[1].AnswerBody)
</td>
<td>
#Html.RadioButtonFor(c => c.AnsLst[1].Correct, true)
</td>
</tr>
<tr>
<td>
#Html.TextAreaFor(c => c.AnsLst[2].AnswerBody)
</td>
<td>
#Html.RadioButtonFor(c => c.AnsLst[2].Correct, true)
</td>
</tr>
</table>
If you are using a radio button group in which only one value can be selected at a time you should bind them to a single property on your view model which will hold the selected value and not to a collection:
<table>
<tr>
<td>
#Html.TextAreaFor(c => c.AnsLst[0].AnswerBody)
</td>
<td>
#Html.RadioButtonFor(c => c.Answer, "value 1")
</td>
</tr>
<tr>
<td>
#Html.TextAreaFor(c => c.AnsLst[1].AnswerBody)
</td>
<td>
#Html.RadioButtonFor(c => c.Answer, "value 2")
</td>
</tr>
<tr>
<td>
#Html.TextAreaFor(c => c.AnsLst[2].AnswerBody)
</td>
<td>
#Html.RadioButtonFor(c => c.Answer, "value 3")
</td>
</tr>
</table>
Now since the 3 radio buttons are bound to the same property on your view model (Answer) when the form is submitted this property will get the value of the selected answer. The value that will be sent is the one passed as second argument to the RadioButton helper.
So basically you will have the following property on your view model to store the answer:
public string Answer { get; set; }
In y example I have set some arbitrary values for the answers but you could use for example the id of the answer so that you could identify it:
#Html.RadioButtonFor(c => c.Answer, c.AnsLst[0].AnswerId)
#Html.RadioButtonFor(c => c.Answer, c.AnsLst[1].AnswerId)
#Html.RadioButtonFor(c => c.Answer, c.AnsLst[2].AnswerId)
I need some help in order to put a where rule into the foreach search. My goal is to exclude orders where the customerOrder.ERPOrderNumber starts with letter E
The code that i have returns all the orders for the specific customer.
Thank you in advance for your help.
#foreach (var customerOrder in Model.CustomerOrders)
{
<tr>
<td class="mavo-order-date">#customerOrder.OrderDate.ToShortDateString()
</td>
<td class="mavo-status">#customerOrder.Status
</td>
<td class="mavo-order-number">
#customerOrder.OrderNumber
</td>
#if (Model.ShowErpOrderNumber)
{
<td class="mavo-erp-order">#customerOrder.ERPOrderNumber
</td>
}
<td class="mavo-po">#customerOrder.CustomerPO
</td>
<td class="mavo-order-total">#customerOrder.OrderGrandTotal.ToCurrency()
</td>
<td class="mavo-view">
<a class="btn btnStyleA tbm5" href="#Url.Action("OrderHistoryDetail", "Account", new { orderId = customerOrder.ERPOrderNumber })">View Details</a>
</td>
</tr>
}
You can put an if statement inside the foreach loop to only write out the table row when the order number doesn't start with the letter E.
#foreach (var customerOrder in Model.CustomerOrders)
{
#if(!customerOrder.ERPOrderNumber.StartsWith("E"))
{
// Markup goes in here
}
}
Or you can use LINQ to filter the CustomerOrders collection.
#foreach(var customerOrder in Model.CustomerOrders.Where(x => !x.StartsWith("E"))