Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I have a view that contains nothing but the following:
<table>
#for (int i = 0; i < 10; i++)
{
if (i % 5 == 0)
{
<tr>
}
<td>
Hello
</td>
if (i % 5 == 0)
{
</tr>
}
}
</table>
I intended to produce is the following
<table>
<tr>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
<td>Hello</td>
</tr>
</table>
But instead it produced the following:
<table>
<tr>
}
<td>
Hello
</td>
if (i % 5 == 0)
{
</tr>
<tr>
}
<td>
Hello
</td>
if (i % 5 == 0)
{
</tr>
</table>
What is wrong?
You have to prefix any HTML you wish to show on the page with #: when it is within a code block
<table>
#for (int i = 0; i < 10; i++)
{
if (i % 5 == 0)
{
#:<tr>
}
#:<td>
#:Hello
#:</td>
if (i % 5 == 0)
{
#:</tr>
}
}
</table>
#for (int i = 0; i < 10; i++)
{
if (i % 5 == 0)
{
#:<tr>
}
<td>
Hello
</td>
if (i % 5 == 0)
{
#:</tr>
}
}
</table>
To produce the desired output you actually want the following:
<table>
#for (int i = 0; i < 10; i++)
{
if (i % 5 == 0)
{
#:<tr>
}
#:<td>
#:Hello
#:</td>
if ((i + 1) % 5 == 0)
{
#:</tr>
}
}
</table>
Notice the change to the second if statement. Alternatively you could use nested for loops to produce the same result.
<table>
#for (int i = 0; i < 2; i++)
{
<tr>
#for (int j = 0; j < 5; j++)
{
<td>Hello</td>
}
</tr>
}
</table>
You're code block should is across multiple lines so should be within braces (braces after the #)
#{
for (int i = 0; i < 10; i++)
{
Blah blah...
}
}
Related
foreach (TSM.Models.Tasks itm in lstTasks.Where(x => x.Project.ID == item.ID).ToList())
{
<tr id="tmsData">
<td> </td>
<td>#itm.TaskName</td>
#for (int i = 1; i < 8; i++)
{
<td > <input class="txtTaskHours date#(Date.AddDays(i).ToString("MMddyyyy"))" style="width:50px;" type="number" id="#(itm.ID.ToString() + ':' + Date.AddDays(i).ToString("MMddyyyy"))" /></td>
}
<td><strong><input class="JKL" style="width:50px" /></strong></td>
</tr>
<tr>
</tr>
}
}
<tr>
<td></td>
<td></td>
#for (int i = 1; i < 8; i++)
{
<td ><strong><input class="JKLL " id="Tue" style="width:50px" /></strong></td>
}
<td></td><script>
$(document).ready(function () {
$(".txtTaskHours").on('keyup change', calculateSum);
});
function calculateSum() {
var $input = $(this);
var $row = $input.closest('tr');
var sum = 0;
$row.find(".txtTaskHours").each(function () {
sum += parseFloat(this.value) || 0;
});
$row.find(".JKL").val(sum.toFixed(2));
//adding column values
var eid = ($input.attr('id'));
var arrTaskTextBoxes = $('.date' + eid.substr(eid.indexOf(":") + 1, 8));
var sum = 0.00
for (var i = 0; i < arrTaskTextBoxes.length; i++) {
if (arrTaskTextBoxes[i].value != '') {
sum+= parseFloat(arrTaskTextBoxes[i].value) || 0;
}
}
$(".JKLL").val(sum.toFixed(2));
//document.getElementById('Tue').value = sum.toFixed(2);
console.log(sum);
}
This is my script code i tried this but when sum of column is take
place then if we fill data in top to bottom then its show sum in whole of the
textbox. Row sum is done very properly way but sum of the column issue is
coming sum of column show is correct but is sow all the text boxes that is
give in the bottom row. I use this script method here i am using eid by which
id of every textbox we take.
I'm working ASP.NET MVC with Razor pages. When I add items with a ForEach loop the last-child selector works fine. When I use a For loop the last-child does not work.
This works:
#foreach (var m in Model.Playlists)
{
<tr>
<td>#m.Name</td>
<td>#m.TrackCount</td>
</tr>
}
This does not work:
#for (int i = 0; i < Model.TrackList.Count; i++)
{
<tr>
<td>#Html.CheckBoxFor(x => x.TrackList[i].IsSelected)</td>
<td>#Model.TrackList[i].Name)</td>
<td>#Model.TrackList[i].Artist</td>
<td>#Model.TrackList[i].Album</td>
</tr>
#Html.HiddenFor(x => x.TrackList[i].Artist)
#Html.HiddenFor(x => x.TrackList[i].id)
#Html.HiddenFor(x => x.TrackList[i].Album)
#Html.HiddenFor(x => x.TrackList[i].Name)
}
As a work around I can add this:
#if (i == (Model.TrackList.Count - 1))
{
<td class="lastright">#Model.TrackList[i].Album</td>
}
else
{
<td>#Model.TrackList[i].Album</td>
}
And then add my style to class. Just curious why it doesn't work as expected. The DOM explorer does not show any additional elements.
Also here is the CSS:
.tracksTable tbody tr:last-child td:first-child {
border-radius: 0 0 0 16px;
}
.tracksTable tbody tr:last-child td:last-child {
border-radius: 0 0 16px 0;
}
Pulling the #Html.HiddenFor() inside the a <td> block resolved the issue. I noticed if there is anything between the final </td> and the last </tr> it will fail to find the last <td> as a last-child.
#for (int i = 0; i < Model.TrackList.Count; i++)
{
<tr>
<td>#Html.CheckBoxFor(x => x.TrackList[i].IsSelected)</td>
<td>
#Model.TrackList[i].Name)
#Html.HiddenFor(x => x.TrackList[i].Name)
</td>
<td>
#Model.TrackList[i].Artist
#Html.HiddenFor(x => x.TrackList[i].Artist)
</td>
<td>
#Model.TrackList[i].Album
#Html.HiddenFor(x => x.TrackList[i].id)
#Html.HiddenFor(x => x.TrackList[i].Album)
</td>
</tr>
}
Well, easily I have a model:
#model IEnumerable<CompanyWebSite.Category>
And it's quite straightforward to iterating through its items and create a One-item-per-row table to show them.
And the problem is that I want to create a table like this:
<table>
<tr>
<td></td>
<td></td>
</tr>
//
// ...
//
<tr>
<td colspan="2"> ... LastItem ...</td>
</tr>
</table>
Seems simple, but I can't do that...!
#{
ViewBag.Title = "Products";
var last = Model.Last();
int i = 1;
}
<table id="tblCats">
#foreach(var item in Model)
{
if (i == 1){
<tr>
#(i = 2)
}
#if (!item.Equals(last))
{
<td>
<h4>#item.CategoryName</h4>
<label>#item.Description</label>
</td>
if (i == 2)
{
</tr>
i = 1;
}
else
i = 2;
}
else
{
<td colspan="2">
</td>
</tr>
}
}
Because of the first opening <tr>, Razor gets confused and doesn't see the closing }s and else statements... What can I do...?!
You could use HtmlHelper.Raw method to help razor
I am trying to populate table of data with asp.net Mvc3 razor list and I am also trying to add CSS with alternating row colors. Can some one help me in this part. Just help me in applying d0 class and d1 classes in loop.
<style>
tr.d0 td {
background-color: #CC9999;
color: black;
}
tr.d1 td {
background-color: #9999CC;
color: black;
}
</style>
<table width="100%">
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
<th>Details</th>
</tr>
#foreach (var item in Model.Info)
{
<tr>
<td><span>#item.Name</span></td>
<td><span>#item.Address</span></td>
<td><span>#item.Phone</span></td>
<td><span>#item.Details</span></td>
</tr>
}
</table>
Use a normal for loop -
(untested)
#for (int i = 0; i < Model.Info.Count; i++) {
<tr class= #(i%2 ==0 ? "d0" : "d1")>
<td><span>#Model.Info[i].Name</span></td>
.....
</tr>
}
Since this is a styling issue rather than rendering content, how about using jquery on odd, even rows?
$(document).ready(function () {
$("table tr:odd").addClass("className"); //make use of more specific css selector
//likewise for even rows
}
Try This
CSS
.generalAltRow {
background-color:#EFF8FF;
}
.generalRow {
background-color:white;
}
#{
int i=0;
}
#foreach (var item in Model.Info)
{
i = i+1;
string rowColor;
if (i % 2 == 0)
{
rowColor = "generalAltRow";
}
else {
rowColor = "generalRow";
}
<tr class="#rowColor">
<td><span>#item.Name</span></td>
<td><span>#item.Address</span></td>
<td><span>#item.Phone</span></td>
<td><span>#item.Details</span></td>
</tr>
}
$(document).ready(function () {
$('table tr:not(.Header):even').addClass('d0');
$('table tr:not(.Header):odd').addClass("d1");
});
For DEMO
I am new to razor engine syntax and I have issue with formatting adding the logic in the view. Here is what I want to accomplish. I have collection of items coming from model.
I need to iterate that collection and align 6 item in a row.
This is how the final output should look like:
<table>
<tr>
<td>checkbox comes here</td>
<td>checkbox comes here</td>
<td>checkbox comes here</td>
</tr>
<tr>
<td>checkbox comes here</td>
<td>checkbox comes here</td>
<td>checkbox comes here</td>
</tr>
................. and so on
</table>
Here is the code I wrote in the view
<table>
#for (int i = 0; i <= Model.checkItems.Count; i++)
{
if (i % 6 == 0)
{ <tr> }
<td>
<input type="checkbox"
id="chk_#(Model.checkItems[i].DisplayText)"
name="chk"
nameVal = "#Model.checkItems[i].DisplayText"
value="#Model.checkItems[i].Value"/>
<label for="chkGroup_#(Model.checkItems[i].DisplayText)">#Model.checkItems[i].DisplayText
</td>
if(i % 6 == 0)
{ </tr> }
}
</table>
When the page finally gets rendered, the first if condition getting executed but not the second one.
Can somebody help to figure out how the accomplish this?
Try this
<table>
#{ int count = 0; }
<tr>
#foreach (var item in Model.checkItems)
{
<td>
<input type="checkbox"
id="chk_#(item.DisplayText)"
name="chk"
nameVal = "#item.DisplayText"
value="#item.Value"/>
<label for="chkGroup_#(item.DisplayText)">#item.DisplayText</label>
</td>
if (++count % 6 == 0)
{
#:</tr><tr>
}
}
</tr>
</table>
You're missing a closing tag on your label
<label for="chkGroup_#(Model.checkItems[i].DisplayText)">#Model.checkItems[i].DisplayText
should be
<label for="chkGroup_#(Model.checkItems[i].DisplayText)">#Model.checkItems[i].DisplayText</label>
would this work:
<table>
#for (int i = 0; i <= Model.checkItems.Count; i++)
{
if (i % 6 == 0)
{
<tr>
<td>
<input type="checkbox"
id="chk_#(Model.checkItems[i].DisplayText)"
name="chk"
nameVal = "#Model.checkItems[i].DisplayText"
value="#Model.checkItems[i].Value"/>
<label for="chkGroup_#(Model.checkItems[i].DisplayText)">#Model.checkItems[i].DisplayText
</td>
</tr>
}
}
</table>
Here's another solution that uses 2 nested loops for rows and columns. I don't know if its necessarily better (it certainly looks more complicated on the face of it), but it does at least allow you to easily see the nested nature of the rows and cells:
<table>
#{
const int cols = 3;
int rows = (Model.checkItems.Count + cols - 1) / cols;
}
#for (int rowIndex = 0; rowIndex < rows; rowIndex++)
{
<tr>
#for (int colIndex = rowIndex * cols; colIndex < Math.Min(Model.checkItems.Count, cols * (rowIndex + 1)); colIndex++)
{
<td>
<input type="checkbox"
id="chk_#(Model.checkItems[colIndex].DisplayText)"
name="chk"
nameVal="#Model.checkItems[colIndex].DisplayText"
value="#Model.checkItems[colIndex].Value"/>
<label for="chkGroup_#(Model.checkItems[colIndex].DisplayText)">#Model.checkItems[colIndex].DisplayText</label>
</td>
}
</tr>
}
</table>