Sample layout for a website

layout

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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;
        }

    </style>
</head>
<body>
<div id="Container">
    <div id="Header"></div>
    <div id="Menu"></div>
    <div id="Sidebar"></div>
    <div id="MainBody"></div>
    <div id="Footer"></div>
</div>
</body>
</html>

 

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);
        }

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

        [NonAction]
        private string GenerateUL(List<Category> parents, List<Category> categories, StringBuilder sb)
        {
            sb.AppendLine("<ul>");

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

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

            sb.Append("</ul>");
            return sb.ToString();
        }

References :
http://stackoverflow.com/questions/14137811/generate-nested-menu-from-datatable-using-c-sharp-as-ul-list-not-asp-net-menu-co

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 :
https://github.com/jsoverson/string-format

Keywords :
String , Format

Mustache a JavaScript Templating Engine

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

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

//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 :
https://www.sitepoint.com/overview-javascript-templating-engines/

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>
</ul>

Set Attributes

$("button").click(function(){
    $("#w3s").attr("data-sowing-time", "March to June");
});

Get Attributes

$("button").click(function(){
    alert($("#w3s").attr("data-sowing-time"));
});

References :
http://html5doctor.com/html5-custom-data-attributes/
http://www.w3schools.com/jquery/jquery_dom_set.asp
http://www.w3schools.com/jquery/jquery_dom_get.asp

Keywords :

HTML , Attribute , User

How to add JavaScript library in MVC project

JavaScript :

BundleConfig.RegisterBundles(BundleTable.Bundles);
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));
@Scripts.Render("~/bundles/jqueryui")

CSS :

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
              "~/Content/themes/base/jquery.ui.core.css",
              "~/Content/themes/base/jquery.ui.resizable.css",
              "~/Content/themes/base/jquery.ui.selectable.css",
              "~/Content/themes/base/jquery.ui.accordion.css",
              "~/Content/themes/base/jquery.ui.autocomplete.css",
              "~/Content/themes/base/jquery.ui.button.css",
              "~/Content/themes/base/jquery.ui.dialog.css",
              "~/Content/themes/base/jquery.ui.slider.css",
              "~/Content/themes/base/jquery.ui.tabs.css",
              "~/Content/themes/base/jquery.ui.datepicker.css",
              "~/Content/themes/base/jquery.ui.progressbar.css",
              "~/Content/themes/base/jquery.ui.theme.css"));
@Styles.Render("~/Content/themes/base/css")

References :
http://stackoverflow.com/questions/20081328/how-to-add-jqueryui-library-in-mvc-5-project

Keywords : 

References ,  Script , Bundle