Why is this cart index view (Razor engine) giving me errors - asp.net-mvc

It does not seem to like #{index++;} , I have tried
#{int index++}, #(index++), #(int index++;)
This code didn't throw errors when used with MVC 2.
Here's it's giving me
ambiguity warnings about index.
#model CartTest.Models.Cart
#{
ViewBag.Title = "Index";
}
<h2>Cart Index</h2>
<table width="80%" align="center">
<thead><tr>
<th align="center">Quantity</th>
<th align="left">Item</th>
<th align="right">Price</th>
<th align="right">Subtotal</th>
</tr></thead>
<tbody>
#{int index = 0;}
#foreach (var line in Model.Lines)
{
<tr>
#Html.Hidden("Lines.Index", index);
<td align="center">#Html.TextBox("Lines[" + index + "].Quantity",line.Quantity)</td>
<td align="left">#line.Product.Name</td>
<td align="right">#line.Product.Price</td>
<td align="right">#(line.Quantity * line.Product.Price)</td>
<td align="right">#Html.ActionLink("Remove", "RemoveItem", new { productId = line.Product.ProductID }, null)</td>
</tr>
#{index++;}
}
</tbody>
<tfoot>
</tfoot>
</table>

Try like this:
#{int index = 0;}
#foreach (var line in Model.Lines)
{
<tr>
...
</tr>
index++;
}
Now that's just to make the Razor compiler happy. It's not a solution I recommend. The real solution I would recommend you is to use editor templates:
<table width="80%" align="center">
<thead>
<tr>
<th align="center">Quantity</th>
<th align="left">Item</th>
<th align="right">Price</th>
<th align="right">Subtotal</th>
</tr>
</thead>
<tbody>
#Html.EditorFor(x => x.Lines)
</tbody>
<tfoot>
</tfoot>
</table>
and inside the corresponding editor template of a Line (~/Views/Shared/EditorTemplates/LineViewModel.cshtml) which will be rendered for each element of the Line collection:
#model LineViewModel
<td align="center">
#Html.TextBoxFor(x => x.Quantity)
</td>
<td align="left">
#Html.DisplayFor(x => x.Product.Name)
</td>
<td align="right">
#Html.DisplayFor(x => x.Product.Price)
</td>
<td align="right">
#Html.DisplayFor(x => x.CalculatedTotalPrice)
</td>
<td align="right">
#Html.ActionLink("Remove", "RemoveItem", new { productId = Model.Product.ProductID }, null)
</td>
See, no more ugly loops, weakly typed helpers, dealing with some indexes, etc... Everything works by conventions.

Related

Adding field to ASP.NET MVC view

I want to add one more field to my view. So basically, after displaying a town in the dropdown menu, I want to display the (*ABR) field as seen here.
As you can see from the picture, after Advance Ortopedical, I just want to add a filed called *ABR.
<table class="table datatable-responsive datatable-medical-map" id="medProviders" style="width:100%">
<thead>
<tr class="bg-info">
<th>Medical Provider (* Choose one)</th>
<th>Distance (miles)</th>
<th>Duration</th>
</tr>
</thead>
<tbody>
#{
int i = 0;
foreach (var item in medProviders)
{
<tr class="sortList" style="cursor:pointer" id="increment-#i" data-id="#item.Id" data-lat="#item.Latitude" data-long="#item.Longitude">
<td>#item.Firstname</td>
<td id="distance-#i"></td>
<td id="duration-#i"></td>
</tr>
i++;
}
}
</tbody>
</table>
<p id="medicalValidation"></p>
Any suggestions or comments on how to do this in a simple way?
Please use this code. This will add 1 more field at the end of table.
#{
int i = 0;
foreach (var item in medProviders)
{
<tr class="sortList" style="cursor:pointer" id="increment-#i" data-id="#item.Id" data-lat="#item.Latitude" data-long="#item.Longitude">
<td>
#item.Firstname
<br>*ABR</br>
</td>
<td id="distance-#i"></td>
<td id="duration-#i"></td>
</tr>
i++;
}
}
</tbody>

How to implement bootstrap accordion in table in MVC?

I want to implement bootstrap accordion in my application. Currently, If I click on any rows, it gives me first #Html.Raw(item.D) and #Html.Raw(item.B).
What i want is that, if i click on 2nd row then its respective #Html.Raw(item.D) and #Html.Raw(item.B) should displayed and so on.
Please suggest me where I am going wrong.
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>
You need to specify id uniquely, to do so you need to append raw id(or something unique for each row) to id and data-target attributes,
<div class="panel-body">
<table class="table">
#foreach (var item in Model)
{
<tr class="accordion-toggle" data-toggle="collapse" data-target="#12345-cores#(item.id)">
<td align="left">
#Html.Raw(item.H)
</td>
<td align="right">
#Html.Raw(item.E)
</td>
</tr>
<tr>
<td class="accordion-body collapse" id="12345-cores#(item.id)">
<table>
<tbody>
<tr>
<td>
#Html.Raw(item.D)
</td>
<td></td>
<td>
#Html.Raw(item.B)
</td>
</tr>
</tbody>
</table>
</td>
</tr>
}
</table>
updated : data-target="#12345-cores#(item.id) & id="12345-cores#(item.id)"

How to hide a column in a bootstrap table?

In my ASP.NET MVC Core app that uses Bootstrap (installed by default by Visual Studio 2015 MVC Core project), I need to use ID column in a controller but want to hide it in the View. But the following View still displays the column as blank. I would like to hide the first columns that is the ID column
View:
#model List<myProj.Models.StateName>
<form id="target" asp-controller="TestController" asp-action="TestAction" asp-route-returnurl="#ViewData[" ReturnUrl"]" method="post">
<table class="table">
<thead>
<tr>
<th></th>
<th>
State Name
</th>
<th>
State Code
</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Count(); i++)
{
<tr>
<td><input asp-for="#Model[i].StateId" type="hidden" /></td>
<td>
<label asp-for="#Model[i].State"></label>
</td>
<td>
<input asp-for="#Model[i].StateCode" type="text" readonly style="border:0px;"/>
</td>
</tr>
}
</tbody>
</table>
<button type="submit" class="btn btn-default">Save</button>
</form>
I've tested the behavior you describe in this pen. The "Bad Table" version demonstrates what I believe you are likely seeing and occurs by neglecting to add display:none to one single th/td in that column. The "Good Table" version has the first column completely hidden and stretches to fill the entire available width.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Good Table</h2>
<table class="table">
<thead>
<tr>
<th style="display:none">Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Data 1.1</td>
<td>Data 1.2</td>
<td>Data 1.3</td>
</tr>
<tr>
<td style="display:none">Data 2.1</td>
<td>Data 2.2</td>
<td>Data 2.3</td>
</tr>
<tr>
<td style="display:none">Data 3.1</td>
<td>Data 3.2</td>
<td>Data 3.3</td>
</tr>
</tbody>
</table>
<h2>Bad Table</h2>
<table class="table">
<thead>
<tr>
<th style="display:none">Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Data 1.1</td>
<td>Data 1.2</td>
<td>Data 1.3</td>
</tr>
<tr>
<td>Data 2.1</td> <!-- WHOOPS -->
<td>Data 2.2</td>
<td>Data 2.3</td>
</tr>
<tr>
<td style="display:none">Data 3.1</td>
<td>Data 3.2</td>
<td>Data 3.3</td>
</tr>
</tbody>
</table>
Long and short, check the rendered output and ensure that each th/td in the column you are hiding ended up with the display:none style.

mvc view table row number counter

I have a table than shown one record of my model. for example list of category.
i want to create manually row number for this table.
<table class="table table-striped table-bordered table-hover table-full-width dataTable">
#foreach (var item in Model)
{
<tr>
<td>
**I want to Show Row Number Here**
</td>
<td>
#Html.ActionLink(item.Name, "ViewSubCategory", "ProductSubCategory", new { id = item.Id }, null)
</td>
</tr>
}
</table>
Define a counter rowNo and write
#{ int rowNo = 0; }
#foreach (var item in Model) {
<tr style="background: #classtr;" >
<td>
#(rowNo += 1)
</td>
Define a counter rowNo and write
<table class="table table-striped table-bordered table-hover table-full-width dataTable">
#{int rowNo;}
#foreach (var item in Model)
{
<tr>
<td>
#rowNo++;
</td>
<td>
#Html.ActionLink(item.Name, "ViewSubCategory", "ProductSubCategory", new { id = item.Id }, null)
</td>
</tr>
}
</table>
None of the above worked for me - I did this:
#{int RowNo = 0;}
#foreach (var item in Model) {
<tr>
<td>#{RowNo++;} #RowNo</td>
You may use the Select overload:
<table class="table table-striped table-bordered table-hover table-full-width dataTable">
#foreach (var item in Model.Select((item,index)=>new{item,index})
{
<tr>
<td>
#item.index
</td>
<td>
#Html.ActionLink(item.item.Name, "ViewSubCategory", "ProductSubCategory", new { id = item.item.Id }, null)
</td>
</tr>
}
</table>
I've found the next option for my ASP.Net MVC project. All above options didn't work for my project.
#foreach (var item in Model.Select((x, i) => new { Data = x, Index = i + 1 }))
{
<tr>
<td>
#item.Index
</td>
<td>
#Html.DisplayFor(modelItem => item.Data.ReviewerName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Data.ReviewerComments)
</td>
<td>
#Html.DisplayFor(modelItem => item.Data.ReviewerRating)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Data.Id })
</td>
</tr>
}
I think this code will solve the problem
let rows = document.querySelectorAll('tr');
rows.forEach((row) => {
let z = document.createElement("td");
z.textContent = `(row #${row.rowIndex})`;
row.appendChild(z);
});
<table>
<thead>
<tr><th>Item</th> <th>Price</th></tr>
</thead>
<tbody>
<tr><td>Bananas</td> <td>$2</td></tr>
<tr><td>Oranges</td> <td>$8</td></tr>
<tr><td>Top Sirloin</td> <td>$20</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td> <td>$30</td></tr>
</tfoot>
</table>
Easiest approach is to use CSS to have the row numbers in your tables in the index of you MVC View.
.css-serial {
counter-reset: serial-number;
/* Set the serial number counter to 0 */
}
.css-serial td:first-child:before {
counter-increment: serial-number+1;
/* Increment the serial number counter */
content: counter(serial-number);
/* Display the counter */
}
table{
font-family: Arial;
border:solid;
border-width:1px;
border-color:#dedede;
border-radius:5px;
}
th{
background-color:#efefef;
}
td{
padding:3px;
margin:3px;
}
<table class="css-serial">
<tr>
<th>Row #</th>
<! –– Row Number goes here automatically with CSS style ––>
<th>Name</th>
</tr>
<tr>
<td></td>
<td>John</td>
</tr>
<tr>
<td></td>
<td>Richard</td>
</tr>
<tr>
<td></td>
<td>Joe</td>
</tr>
<tr>
<td></td>
<td>Rogan</td>
</tr>
<tr>
<td></td>
<td>Lebron</td>
</tr>
<tr>
<td></td>
<td>Marcus</td>
</tr>
<tr>
<td></td>
<td>Jane</td>
</tr>
<tr>
<td></td>
<td>Maria</td>
</tr>
</table>

Getting Incorrect razor syntax errors

I have the following code and I want to put the table headers outside of the #foreach but when i move it outside It no longer sees the closing tag. Thanks
#foreach (var item in Model)
{
<div class="data" ><label for="fullName" >Name: </label>#item.UserName.Replace('.', '')</div>
if (Model.Count > 0)
{
<table class="data">
<tr>
<th>
Work Date
</th>
<th>
Change Details
</th>
<th>
Ip Address
</th>
<th></th>
</tr>
<tr>
<td>
#{
var stringDate = item.WorkDate.ToShortDateString();
}
#Html.DisplayFor(modelItem => stringDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.ChangeDetail)
</td>
<td>
#Html.DisplayFor(modelItem => item.IpAddress)
</td>
</tr>
</table>
}
<br />
<hr />
}
So this is kinda what I'm trying to accomplish, but it keeps giving me errors no matter what way I try it.
<table class="data">
<tr>
<th>
Work Date
</th>
<th>
Change Details
</th>
<th>
Ip Address
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<div class="data" ><label for="fullName" >Name: </label>#item.UserName.Replace('.','')</div>
if (Model.Count > 0)
{
<tr>
<td>
#{
var stringDate = item.WorkDate.ToShortDateString();
}
#Html.DisplayFor(modelItem => stringDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.ChangeDetail)
</td>
<td>
#Html.DisplayFor(modelItem => item.IpAddress)
</td>
</tr>
</table>
}
<br />
<hr />
}
You must have your table closing tag outside of the for each loop.
Short answer: the closing tag </table> has to be placed outside of the foreach loop.
Long answer: You should put the Model.Count > 0 outside of the foreach loop because the moment you enter the code block within the loop, Model.Count > 0 always evaluates to true because you have at least one item.
If – and only if – your model contains any items, you print out the table header. After that, you append one row for each item in Model. Both <table> and </table> have to occur within the same level of nesting.
#if (Model.Count > 0)
{
<table class="data">
<tr>
<th>Date</th>
<th>Change Details</th>
<th>Ip Address</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<div class="data" >
<label for="fullName" >Name: </label>
#item.UserName.Replace('.', ' ')
</div>
#{
var stringDate = item.WorkDate.ToShortDateString();
}
<tr>
<td>#Html.DisplayFor(modelItem => stringDate)</td>
<td>#Html.DisplayFor(modelItem => item.ChangeDetail)</td>
<td>#Html.DisplayFor(modelItem => item.IpAddress)</td>
</tr>
}
</table>
<br />
<hr />
}
You should consider moving the logic (#item.UserName.Replace('.', ' ')) out of the view into the corresponding controller action.

Resources