Sample layout for a website


<!DOCTYPE html>
    <meta charset="utf-8"/>
    <style type="text/css">
        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;

        #Container {
            width: 800px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            margin-top: 11px;
            margin-bottom: 21px;

        #Header {
            height: 150px;
            background-color: blue;


        #Menu {
            height: 60px;
            background-color: darkcyan;

        #Sidebar {
            width: 150px;
            height: 400px;
            background-color: chartreuse;
            float: left;

        #MainBody {
            width: 650px;
            height: 400px;
            background-color: coral;
            float: right;

        #Footer {
            height: 100px;
            clear: both;
            background-color: cornflowerblue;

<div id="Container">
    <div id="Header"></div>
    <div id="Menu"></div>
    <div id="Sidebar"></div>
    <div id="MainBody"></div>
    <div id="Footer"></div>


Generate Nested Menu from datatable using c# as ul list

public JsonResult GetCategories()
            nDownloadEntities entities = new nDownloadEntities();
            List<Category> categories = entities.Categories.ToList();

            var sb = new StringBuilder();

            var roots = GetRoots(categories);
            string unorderedList = GenerateUL(roots, categories, sb);

            return Json(unorderedList, JsonRequestBehavior.AllowGet);

        private List<Category> GetRoots(List<Category> categories)
            var roots = categories.Where(x => x.ParentId == 0).ToList();
            return roots;

        private string GenerateUL(List<Category> parents, List<Category> categories, StringBuilder sb)

            if (parents.Count > 0)
                foreach (Category category in parents)
                    string line = String.Format(@"<li>{0}", category.CategoryText);

                    List<Category> subMenu=categories.Where(x=>x.ParentId==category.CategoryId).ToList();
                    if (subMenu.Any())
                        var subMenuBuilder = new StringBuilder();
                        sb.Append(GenerateUL(subMenu, categories, subMenuBuilder));

            return sb.ToString();

References :

Keywords :

ul , li , treeview , menu , recursive

JavaScript String.format()

'Github is %s'.format('awesome');                  // "Github is awesome"
'One answer may be %i'.format(42);                 // "One answer may be 42"
'Another answer may be %.5f'.format(Math.PI);      // "Another answer may be 3.14159"
'%.5f is not equal to %.5f'.format(22/7, Math.PI); // "3.14286 is not equal to 3.14159"
'PI minus 3 is %0.5f'.format(Math.PI - 3);         // "PI minus 3 is 0.14159"
'%,d is a really big number'.format(299792458);    // "299,792,458 is a really big number"
'%0,2f is a smaller number'.format(12021.12);      // "12,021.12 is a smaller number"

References :

Keywords :
String , Format

Mustache a JavaScript Templating Engine

<script id="template" type="x-tmpl-mustache">
  <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
//Grab the inline template
var template = document.getElementById('template').innerHTML;

//Parse it (optional, only necessary if template is to be used again)

//Render the data into the template
var rendered = Mustache.render(template, {name: "Luke", power: "force"});

//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;

References :

Keywords :

Template , String , HTML

HTML5 Custom Data Attributes

Prefixing the custom attributes with data- ensures that they will be completely ignored by the user agent. As far as the browser and indeed the website’s end user are concerned, this data does not exist.

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>

Set Attributes

    $("#w3s").attr("data-sowing-time", "March to June");

Get Attributes


References :

Keywords :

HTML , Attribute , User

How to add JavaScript library in MVC project

JavaScript :

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(


bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

References :

Keywords : 

References ,  Script , Bundle