I am populating my datatable using Linq.
I have hard-coded headers. And populating body columns with Linq. Following is my code.
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th style="width:2%;"></th>
</tr>
</thead>
<tbody>
#if(Model.Values !=null)
{
foreach(var value in Model.Values)
{
<tr>
<td>#value.Name</td>
<td>#value.ID</td>
</tr>
}
}
</tbody>
</table>
What I am thinking to do here, if there is no data table should not be visible.I thought of moving my conditional check if model is returning null prior to table creation but it will throw exception. I am fairly new to MVC. Any suggestion is appreciated.
Thank you
Simply put one if around table as well to check if property is not null and count of that list is greater than 0 then table should be rendered.
#if(Model != null)
{
if(Model.Values != null && Model.Values.Count != 0)
{
<table id="tableID">
<thead>
<tr>
<th>Name</th>
<th>ID</th>
<th style="width:2%;"></th>
</tr>
</thead>
<tbody>
#foreach(var value in Model.Values)
{
<tr>
<td>#value.Name</td>
<td>#value.ID</td>
</tr>
}
</tbody>
</table>
}
}
Related
I'm getting one error while building the asp.net mvc solution, but I am able to get the datatable with data, but don't know why im getting this error. Maybe I need to add the LINQ reference somewhere.
Getting near Model.Select.
Code:
#model List<smartpond.Models.FeederPillar>
<table id="listing"
class="table table-bordered table-striped table-responsive table-hover">
<thead>
<tr>
<th>Sl no</th>
<th>Time</th>
<th>R Voltage</th>
<th>Y Voltage</th>
<th>B Voltage</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Select((value, i) => new { i, value }))
{
<tr class="tr_#item.value.deviceid">
<td>#(item.i + 1)</td>
<td>#item.value.datetime</td>
<td>#item.value.RVoltage</td>
<td>#item.value.YVoltage</td>
<td>#item.value.BVoltage</td>
</tr>
}
</tbody>
</table>
Add the following using statement at the top of your razor page
#using System.Linq
Try this
#foreach (var item in Model)
{
<tr>
<td>#item.id</td>
<td>#item.datetime</td>
<td>#item.RVoltage</td>
<td>#item.YVoltage</td>
<td>#item.BVoltage</td>
</tr>
}
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>
<table>
#if (Model.Logs != null && Model.Logs.Count > 0)
{
<tr>
<th>Operation Name</th>
<th>User</th>
<th>Parameters</th>
<th>Comment</th>
<th>Operation Time</th>
</tr>
foreach (var log in Model.Logs)
{
<tr>
<td>#Html.DisplayFor(model => log.OperationName)</td>
<td>#Html.DisplayFor(model => log.User)</td>
<td>#Html.DisplayFor(model => log.Parameters)</td>
<td>#Html.DisplayFor(model => log.Comment)</td>
<td>#Html.DisplayFor(model => log.OperationTime)</td>
</tr>
}
}
</table>
I'm trying to query some data from db and show them in a table via MVC. I set breakpoints and the codes seem to work well. But at last, the table didn't show on the page as expected. What's the possible reason? Thanks.
Are you sure it is looping when you put break point? If it does, try this. Make sure looping.
<table>
#if (Model.Logs != null && Model.Logs.Count > 0)
{
<tr>
<th>Operation Name</th>
<th>User</th>
<th>Parameters</th>
<th>Comment</th>
<th>Operation Time</th>
</tr>
foreach (var log in Model.Logs)
{
<tr>
<td>#log.OperationName</td>
<td>#log.User</td>
<td>#log.Parameters</td>
<td>#log.Comment</td>
<td>#log.OperationTime</td>
</tr>
}
}
</table>
Change the if-statement to a working statement where it returns something. I probably returns nothing at this moment.
Given:
<table id="identification-data" class="pure-table">
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Gender</th>
<tr>
</thead>
<tbody>
<tr th:each="row : ${identificationData}">
<td th:text="${row['Name']}">Brian Smith</td>
<td th:text="${#calendars.format(row['Date of Birth'], 'MM/dd/yyyy')}">10/11/1971</td>
<td th:text="${row['Gender']}">Male</td>
</tr>
</tbody>
</table>
If the collection ${identificationData} is empty - is there a thymeleafy way to show a message like "no data found"?
I could do something on the controller side like:
if (identificationData.isEmpty()){
model.addAttribute("identificationDataNotFound", Boolean.TRUE);
}
model.addAttribute("identificationData", identificationData);
The most "thymeleafy" way that I can think of is to conditionally render a <tbody> containing the "No data found" message if the list is empty. You can use the utility object #lists to check if the list is empty in the UI (saving you one more boolean model attribute)
<tbody th:if="${not #lists.isEmpty(identificationData)}">
<tr th:each="row : ${identificationData}">
...
</tr>
</tbody>
<tbody th:if="${#lists.isEmpty(identificationData)}">
<tr>
<td colspan="3">No Data found</td>
</tr>
</tbody>
I have nested tables where both the inner and outer tables have rows added to them dynamically. When I trigger an update of an inner table, after the inner table order has been changed, the order of the outer table is also changed. I've created a jsfiddle to demonstrate this:
http://jsfiddle.net/FZLxp/
which is forked from the OS question Nested jQuery Tablesorter tables, all sortable
To see the problem sort the outer table by Make so that Toyota is at the top and then click the "update" button. The update button triggers an update of the inner toyota table but also sorts the outer table as well to reflect the sort direction of the Toyota Doors column.
How can I sort the inner table after adding additional rows without sorting the outer table as well?
<script type="text/javascript">
function updateRW() {
$("#toyota").trigger("update", [true]);
}
</script>
<table class="tablesorter">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda</td>
<td>Accord</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honda 2-Door</td>
<td>Honda Red</td>
</tr>
<tr>
<td>Honda 4-Door</td>
<td>Honda Blue</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Toyota</td>
<td>Camry</td>
</tr>
<tr class="tablesorter-childRow">
<td colspan="2" style="padding: 0 30px 0 30px;">
<table id="toyota" class="tablesorter-child">
<thead>
<tr>
<th>Doors</th>
<th>Colors</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota 2-Door</td>
<td>Toyota Yellow</td>
</tr>
<tr>
<td>Toyota 4-Door</td>
<td>Toyota Green</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<input type=button value="update" onclick="updateRW()">
$(document).ready(function()
{
$("table").tablesorter({selectorHeaders: '> thead > tr > th'});
});
This appears to be a bug in tablesorter!
I've opened an issue so we can track it, and I should have this fixed in the next update.
Thanks for reporting it!