Join Method with forEach — best practice? - join

If this is a bad question, just tell me and I will delete it. My question is: Is the attached code the best way to join lines of text with <hr> as delimiter?
I have a table of various listings. For listings of the same "group" (see array) I want them to be separated by an <hr>. If there is only 1 in the group then I do not want the <hr> because it looks bad. Normally I would use the array.join() method however since I am already using the forEach() I had to come up with this textContent & if/else workaround.
It seems the page loading takes longer than before I implemented the <hr> enhancement. Is this the best way to code it or should I optimize?
<table border="1">
<tr>
<td id="Group1"></td>
</tr>
<tr>
<td id="Group2"></td>
</tr>
<tr>
<td id="Group3"></td>
</tr>
</table>
<script>
var entry = [
["Group1","AAAAAAAAAAAAA"],
["Group2","BBBBBBBBBBBBB"],
["Group2","CCCCCCCCCCCCC"],
["Group3","DDDDDDDDDDDDD"],
["Group3","EEEEEEEEEEEEE"],
["Group3","FFFFFFFFFFFFF"],
]
entry.forEach(
function myFunction(item, index){
var x = document.getElementById(item[0]);
var y = document.getElementById(item[0]).textContent.length;
if(x !== null) {
if(y < 1) {
x.innerHTML += item[1];
}
else{
x.innerHTML += '<hr>' + item[1];
}
}
});
</script>

Related

Knockout.js applyBindings and getJson doesnt show?

Im new to knockout and im trying to display a table which contains data from mt DB.
In my controller, (DriversController), I have this code:
public JsonResult GetAllDrivers()
{
db.Configuration.ProxyCreationEnabled = false;
List<Driver> drivers = db.Drivers.ToList();
return Json(drivers, JsonRequestBehavior.AllowGet);
}
In my index HTML (CSHTML):
<table>
<thead>
<tr>
<th>Driver Id</th>
<th>Name</th>
</tr>
</thead>
<tbody data-bind="foreach: drivers">
<tr>
<td data-bind="text: DriverId"></td>
<td data-bind="text: firstName"></td>
</tr>
</table>
the fields in the "text:" are exactly like they are in the DB table.
My viewModel:
<script>
var drivers
$.getJSON("/Drivers/GetAllDrivers", function (data) {
drivers = data
ko.applyBindings(drivers)
})
</script>
Id followed a lot of tutorials and did exactly what they did but somehow nothing is working :( i get a blank page which only cointains the table headers.
help? thanks
your data must look like
{drivers:[{DriverId:1,firstName:'test'}]}
so change your code to:
ko.applyBindings({drivers:data})

How to add a class to html element dynamically using razor syntax?

For example, i want to add class to <tr> element depending on model's atrribute, that is
<table>
<tbody>
#foreach ( var item in Model)
{
if(item.Level==1)
{
<tr class="classA">
}else if(item.Level==2)
{
<tr class="classB">
}else
{
<tr>
}
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
but here the ide tells me my <tr> element is not closed. How can i achieve that
I would use the ternary operator ? and write something like that.
<tr class="#(item.Level==1?"classA":item.Level == 2?"classB":"")">
It isn't very readable, and won't work with complex comparaisons. In these cases, I would suggest you to declare a method in the razor view
#functions{
public string GetClassFromLevel(int level)
{
return level == 1 ? "classA" : level == 2 ? "classB" : "";
}
}
<tr class"#GetClassFromLevel(item.Level)">

Dart template, and {{}} placeholder in on-click

I am experimenting with various ways to create a HTML5 table from data using Dart. I have the following:
<table id="sitelist">
<thead>
<tr><th>Select a site</th>
</tr>
</thead>
<tbody template iterate="x in siteCells">
<tr on-click="displaySite('{{x[0]}}')"> <td> {{x[1]}} </td>
</tr>
</tbody>
</table>
The idea is to have one on click handler which takes the site id as a parameter. but the parameter to displaySite is not set correctly - this function receives the literal string {{x[1]}}.
The site name x[1] is displayed correctly.
So my question is: Is it possible to have {{}} substitution work inside the parameter list of the on click handler?
Simply remove the {{ }} from the displaySite() call in on-click, and it will work.
<table id="sitelist">
<thead>
<tr><th>Select a site</th>
</tr>
</thead>
<tbody template iterate="x in siteCells">
<tr on-click="displaySite(x[0])"> <td> {{x[1]}} </td>
</tr>
</tbody>
</table>
Hope that helps!
Before Seth's useful response, I cam up with another approach. This uses a single on-click event at the table level, and adds a data-id attribute to the row. Any comments on which approach is better, or if there is a more standard 'Dartful' approach I should be using, would be much appreciated!
<template if="showSiteList == true">
<table class="table-select" id="sitelist2" on-click="tableClicked($event)">
<thead>
<tr><th>Choose a site</th>
</tr>
</thead>
<tbody template iterate="x in siteCells">
<tr data-id={{x[0]}} > <td> {{x[1]}} </td>
</tr>
</tbody>
</table>
</template>
And the Dart code:
void tableClicked(Event e) {
TableCellElement cell = e.target;
TableRowElement row = cell.parent;
if (row.dataAttributes.containsKey('id')) {
int id = int.parse(row.dataAttributes['id']);
if (id != null) { // be a bit paranoid
globSiteId = id;
}
}
showSiteList = false;
watchers.dispatch();
}

How can I create a dynamic image source with MVC3 and Razor?

I have a view that attempts to build a table off of the passed in Model. I'd like to generate an image with a source that is changed based on the iteration of a loop but can't seem to get it to work. I can do this in JQuery but I would like to do it with razor. I have the following table body:
<tbody>
#{for (var ix = 0; ix <= Model.Value.Count - 1; ix++)
{
<tr>
<td style="width: 10%"><img src="http://gmap.com/marker" + #ix + 1 + ".png" /></td>
<td style="width: 75%">#Model("fullname")</td>
</tr>
}
<tbody>
That first TD is the problem area. I attempted it but... Thanks for the help.
Since it is razor you do not need to add the rendered output to your url. Try this:
#{for (var ix = 0; ix <= Model.Value.Count - 1; ix++)
{
<tr>
<td style="width: 10%"><img src="http://gmap.com/marker#(ix + 1).png" /></td>
<td style="width: 75%">#Model("fullname")</td>
</tr>
}
I haven't tested it but I believe it will fix your issue.

How to format view results in mvc3?

I have List of checkbox in my view. it shows me in vertical format.
Like
a
b
c
d
...
But i want to format that in such a way that will look like.
a b c d
e f g h
i j k l
My code looks like this
#foreach (var item in Model)
{
<table>
<tr>
<td><input type="checkbox" id="#item.DataId" name="Data"/>#item.DataName</td>
</tr>
</table>
How can i format this?
Hoping you're not using the table for layout purposes ;)
Anyway this should do the trick, it's rough code, and could be polished but hopefully this will give you a good start
<table>
<tr>
#{var rower = 0;}
#foreach (var item in Model)
{
if (rower % 4 == 0 && rower != 0)
{
#:</tr>
#:<tr>
}
<td><input type="checkbox" id="#item.DataId" name="Data"/>#item.DataName</td>
rower++;
}
</tr>
</table>
Assuming you need a list, not a table:
// You may to check here whether model contains any items
<ul>
#foreach (var item in Model)
{
<li><input type="checkbox" id="#item.DataId" name="Data"/>#item.DataName</li>
}
</ul>
In your CSS you need to set display property of the list to inline

Resources