I created an sample c# blazor (server-side) app to practice a little.
I try to generate table rows dynamically for a calendar but i run into a problem there.
<table class="table">
<thead>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
#* currentDateTimeValues is a list with DateTime objects *#
#foreach (var item in currentDateTimeValues)
{
#if (counter % 7 == 0 && counter > 0)
{
#:</tr><tr>
}
counter++;
<td>#item.ToString("dd.MM.yyyy")</td>
}
</tr>
</tbody>
</table>
After 7 cells a new row should be created but it doesn't. The cells go straight ahead without linebreak.
Maybe you guys have any idea.
UPDATE:
In the meantime I've created a workaround because I think that blazor can't handle the </tr><tr>
My currentDateTimeValues-List now contains week objects
<tbody>
#* currentDateTimeValues is a list with Week objects *#
#foreach (var week in currentDateTimeValues)
{
<tr>
<td>#week.Monday</td>
<td>#week.Tuesday</td>
<td>#week.Wednesday</td>
<td>#week.Thursday</td>
<td>#week.Friday</td>
<td>#week.Saturday</td>
<td>#week.Sunday</td>
</tr>
}
</tbody>
I think the solution you are trying isn't possible in Blazor at the moment. Why not use two loops to create the calendar. Something like:
#while (counter < currentDateTimeValues.Length)
{
<tr>
#{
var i = 0;
if (i < 7 && counter + i < currentDateTimeValues.Length)
{
<td>#currentDateTimeValues[counter + i].ToString("dd.MM.yyyy")</td>
i++;
}
}
</tr>
counter += 7;
}
Related
I have a bootstrap table with 4 rows. Each of those rows can be clicked, revealing child rows which are unique to each of the four parent rows.
All works fine as long as I collapse a row before un-collapsing another, but if I un-collapse a row and then un-collapse another, only one child row will show inside this newly un-collapsed parent row, even if there are supposed to be more child rows than just the one inside that parent row. Then, if I click on the parent row again, it will show all of the child rows inside that parent row, apart from the one that was just showing.
How do I fix this glitchy behavior? I should be able to click a parent row without collapsing the previous one first. Ideally the previous row would be collapsed automatically upon un-collapsing a new row.
Razor Page table:
<table id="accordionTable" class="table" style="border-collapse:collapse;">
<thead style="color:white;">
<th>DATABASE</th>
<th>STATUS</th>
</thead>
#for (var i = 0; i < Model.statusList.Count; i++)
{
<tr data-toggle="collapse" data-target="#("#innerTable" + i)">
<td>#Model.Databases[i]["DATABASE_NAME"].ToString().ToUpper()</td>
<td #*class="#Model.StatusAll[i]"*#>#Model.StatusAll[i]</td>
</tr>
foreach (var number in Model.statusList[i])
{
<tbody>
<tr #if (number.ToString() == "Running...") { #: style="background-color: #ccffc4;"
} else if (number.ToString() == "Scheduled") { #: style="background-color: #d1f3fc;"
} else if (number.ToString() == "Failed") { #: style="background-color:#ffe4e4;"
}
style="cursor:default; background-color: white;" data-parent="#accordionTable" id="#("innerTable" + i)">
<td> #number.ToString()</td>
<td #if (number == "Running...") { #: class="fas fa-spinner"
} else if (number == "Scheduled") { #: class="far fa-clock"
} else if (number == "Failed") { #: class="fas fa-exclamation-triangle"
}>
</td>
</tr>
</tbody>
}
}
</table>
As suggested by #Nan Yu above, this is how I fixed it:
You can try to remove attribute data-parent="#accordionTable" in the child tr tags, then add class ="collapse" in the child tr tags. Like style="cursor:default; background-color: white;" class="collapse" id="#("innerTable" + i)"> – Nan Yu
I am making an mvc application-c# that uses data from a database and I am having trouble looping through the list in the view that is part of my model.
This is my code in the view:
#foreach (var item in Model.communications)
{
<tr>
int i = 0;
<td>#Model.student.FirstName #Model.student.LastName</td>
<td>#item.Notes</td>
<td>#item.Date</td>
<td>
#Model.employeeName[i]
</td>
</tr>
}
try to replace your code with this
use item variable instead of Model so you can access values
#foreach (var item in Model.communications)
{
<tr>
int i = 0;
<td>#item.student.FirstName #item.student.LastName</td>
<td>#item.Notes</td>
<td>#item.Date</td>
<td>
#item.employeeName[i]
</td>
</tr>
}
If someone loads say three or four entries, when they search and they select entry two to edit, when they click the open button, how would I make it go to say /entry/2 or if they opened entry three it would say /entry/3 ?
I'm new to ASP.NET MVC so I'm really not sure what I am doing:
#model IEnumerable<Savvy_CRM_MVC.Models.RootObject>
#{
Layout = null;
}
#foreach (var m in Model)
{
}
<table class="mui-table">
<thead>
<tr>
<th>Case ID</th>
<th>Forename</th>
<th>Surname</th>
<th>Postcode</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var m in Model)
{
<tr>
<td>#m.Caseid</td>
<td>#m.Forename</td>
<td>#m.Surname</td>
<td>#m.Postcode</td>
<td><button>Open Case</button></td>
</tr>
}
</tbody>
</table>
When clicking the button, I want the url to change and it to load the data of that entry to the page in a format that will be decided later.
Your best bet is to change the button into a hyperlink:
#foreach (var m in Model)
{
<tr>
<td>#m.Caseid</td>
<td>#m.Forename</td>
<td>#m.Surname</td>
<td>#m.Postcode</td>
<td><a href="/entry/"+#m.CaseId>Open Case</a></td>
</tr>
}
This will generate a GET request to the "entry/{id}" route.
Hope this helps
At the moment I am working on razor view, where I'd like to create a table as follows:
<tbody>
<tr>
<td rowspan="5">data</td>
<td rowspan="5">data</td>
<td rowspan="5">data</td>
<td rowspan="5">data</td>
#for (int i = 0; i < Model.AvailableCodes.Count; i++)
{
<td>#Model.AvailableCodes[i]</td>
#if ((i % 6) == 0)
{
</tr><tr>
}
}
</tr>
</tbody>
But I am getting a parse error (Parser Error Message: The for block is missing a closing "}" character.), at the beginning of the #for... a bit clueless why. Any help is really appreciated.
When you are in the for you don't need to pre-fix with an # for the if.
Also in order to ouput un-balanced tags you can use #:
#for (int i = 0; i < Model.AvailableCodes.Count; i++)
{
<td>#Model.AvailableCodes[i]</td>
if ((i % 6) == 0)
{
#:</tr><tr>
}
}
In the past I've used jQuery/Ajax to capture the key press of an end user, and build up a WHERE clause to filter data on a Web form.
I'm now taking advantage of the strongly type facilitates in ASP.NET 4.5. I was wondering if anyone has a way of performing real-time filtering/searching on a Gridview.
Basically, I have three grids, all showing different information. I want the end-user to key in or select from a drop down list (generic searching) and all girds reflect those changes.
I'm not adverse to resorting back to the old method, just didn't; know if there was anything new I could use?
So you can look at this. I hope this help you.
Here is the HTML:
<input id="searchInput" value="Type To Filter">
<br/>
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</thead>
<tbody id="fbody">
<tr>
<td>cat</td>
<td>one</td>
</tr>
<tr>
<td>dog</td>
<td>two</td>
</tr>
<tr>
<td>cat</td>
<td>three</td>
</tr>
<tr>
<td>moose</td>
<td>four</td>
</tr>
<tr>
<td>mouse</td>
<td>five</td>
</tr>
<tr>
<td>dog</td>
<td>six</td>
</tr>
</tbody>
</table>
And here is the JavaScript code:
$("#searchInput").keyup(function () {
// Split the current value of searchInput
var data = this.value.split(" ");
// Create a jQuery object of the rows
var jo = $("#fbody").find("tr");
if (this.value == "") {
jo.show();
return;
}
// Hide all the rows
jo.hide();
// Recusively filter the jquery object to get results.
jo.filter(function (i, v) {
var $t = $(this);
for (var d = 0; d < data.length; ++d) {
if ($t.is(":contains('" + data[d] + "')")) {
return true;
}
}
return false;
})
// Show the rows that match.
.show();
}).focus(function () {
this.value = "";
$(this).css({
"color": "black"
});
$(this).unbind('focus');
}).css({
"color": "#C0C0C0"
});
Enter link description here