Introduction
For a while now, I've been using various bootstrap/responsive CSS templates. I recently was on a project where I wanted to create a new row of <div class="col-md-3">
for every four database records. I'm using LINQ and ENTITY framework for the data layer. First, I wanted to figure out my algorithm in POJS (Plain Old Java Script).
Below is my process:
First, I wrote the logging in POJS. The provided examples will demonstrate a variety of JS looping mechansims. Then, I'll include my C#/MVC code snippet.
The Code
var arr = ['Morkie', 'Shitzu', 'Collie',
'Mutt', 'Golden', 'Yellow Lab', 'Labradoodle'];
var totalRecords = arr.length;
var nthCol = 4
var totalRows = totalRecords/nthCol ;
var html = "<style>table, th,
td {border: 1px solid black; border-collapse: collapse;}</style>"
html += "<table>";
for(var curCol = 1; curCol <= totalRecords ; curCol ++){
if (curCol % nthCol == 1) {
html += "<tr>";
}
html += "<td>" + arr[curCol-1] + "</td>";
if (curCol %nthCol == 0) {
html += "</tr>"
}
}
html += "<table>";
document.writeln(html);
var arr = ['Morkie','Shitzu', 'Collie',
'Mutt', 'Golden', 'Yellow Lab', 'Labradoodle'];
var totalRecords = arr.length;
var nthCol = 4
var curCol = 1;
var totalRows = totalRecords/nthCol ;
var html = "<style>table, th,
td {border: 1px solid black; border-collapse: collapse;}</style>"
html += "<table>";
while( curCol <= totalRecords ){
if (curCol % nthCol == 1) {
html += "<tr>";
}
html += "<td>" + arr[curCol-1] + "</td>";
if (curCol %nthCol == 0) {
html += "</tr>"
}
curCol ++ ;
}
html += "<table>";
document.writeln(html);
var arr = ['Morkie','Shitzu', 'Collie',
'Mutt', 'Golden', 'Yellow Lab', 'Labradoodle'];
var totalRecords = arr.length;
var nthCol = 4
var totalRows = totalRecords/nthCol ;
var html = "<style>table, th,
td {border: 1px solid black; border-collapse: collapse;}</style>"
html += "<table>" ;
for(var curCol in arr){
if (curCol % nthCol == 0) {
html += "<tr>";
}
html += "<td>" + arr[curCol] + "</td>";
if(curCol % nthCol == 3){
html += "</tr>";
}
}
html += "</table>";
document.writeln(html);
using (Data_Context ctx = new Data_Context())
{
var faqs = (from faq in ctx.FAQs where faq.IsActive == true select faq).ToList();
var totalRecords = faqs.Count;
var nthCol = 4;
var curCol = 1;
while(curCol <= totalRecords)
{
if(curCol % nthCol == 1){ html += "<div class='row wow fadeInLeft animated'
data-wow-offset='30' data-wow-duration='1.5s'
data-wow-delay='0.15s'>"; }
html += String.Format(@"
<div class='col-md-3'>
<div class='item item-1'>
<div class='item-overlay'>
</div>
<div class='item-content'>
<div class='item-top-content'>
<div class='item-top-content-inner'>
<div class='item-product'>
<div class='item-top-title'><h5>
Question</h5>
<p class='subdescription'>{0}</p></div>
</div>
</div>
</div>
<!-- ITEM HOVER CONTENT-->
<div class='item-add-content'>
<div class='item-add-content-inner'>
<div class='section'><p>Answer</p></div>
<div class='section'>
<button type = 'button'
class='btn btn-primary custom-button green-btn'
data-toggle='modal'
data-target='#mod{1}'>Answer</button>
</div>
</div>
</div>
</div>
</div>
</div>",faqs[curCol-1].Question,curCol);
if(curCol %nthCol == 0) { html += "</div>"; }
curCol++;
}
}
return MvcHtmlString.Create(html);
}
History
- 24th January, 2016: Initial version