import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[myIf]',
  inputs:["myIf"]
})
export class UnlessDirective {

  constructor(private _templateRef:TemplateRef<any>,private _viewContainerRef:ViewContainerRef) { 
  }

  set myIf(condition:true)
  {
    if(!condition)
    {
      this._viewContainerRef.clear();
    }
    else{
      this._viewContainerRef.createEmbeddedView(this._templateRef);
    }
  }
}

Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework. 

            // کار با یک لیست جنریک تو در تو
            var list = new List<User>();
            for (int i = 0; i < 100; i++)
            {
                list.Add(new User
                {
                    Id = i+1,
                    Name = "name "+i,
                    Address = new Address
                    {
                        Address1 = "Addr1- "+i,
                        Address2 = "Addr2- "+i
                    }
                });
            }
            foreach (var item in list)
            {
                var propertyValues = new DumpNestedProperties().DumpPropertyValues(item, dumpLevel: 2);
                foreach (var result in propertyValues)
                {
                    Console.WriteLine(result.PropertyName + " -> " + result.PropertyValue);
                }
                Console.WriteLine();
            }

List<int> collection = new() { 1 };

var formattedItemBefore = collection.SingleOrDefault() is { } item
    ? $"Formatted: {item}"
    : "No items found";

var formattedItemAfter = collection switch
{
    [] => "No items found",
    [var singleItem] => $"Formatted: {singleItem}",
    _ => throw new InvalidOperationException($"Expected 0 or 1 items, but received {collection.Count} items.")
};

 <div id="my-element-id"></div>

 var result = $('#my-element-id');

 var result = document.getElementById('my-element-id');

  var result = document.querySelector('#my-element-id');

 result.id === 'my-element-id'; // returns true

<span class="some-class"></span>

 var result = $('.some-class');

  var result = document.getElementsByClassName('some-class');

 var result = document.querySelectorAll('.some-class');

 result[0].className === 'some-class'; // returns true

 <code>Console.WriteLine("Hello world!");</code>

 var result = $('code');

 var result = document.getElementsByTagName('code');

 var result = document.querySelectorAll('code');

 result[0].tagName === 'code'; // returns true

  <form>
     <label>Full Name
        <input name="full-name">
     </label>
     <label>Company
        <input name="company">
     </label>
  </form>

  var focusedInputs = $('INPUT:focus');

 var companyInput = document.querySelector('INPUT:focus');

  <div>
     <a href="https://www.dntips.ir">
        <span>Go to site</span>
     </a>
     <p>Some text</p>
     Some other text
  </div>

 var $result = $a.parent();

 var result = a.parentNode;

 var result = $('#myParent').children();

 var result = document.querySelectorAll('DIV > *');

  var result = document.querySelectorAll('DIV > P');

 var result = document.getElementById('myParent').childNodes;
var result = div.childNodes;

 var result =document.getElementById('myParent').children;

 var result =document.querySelectorAll('#myParent A');

  <ul role="menu">
     <li>choice 1</li>
     <li class="active">choice 2</li>
     <li>choice 3</li>
  </ul>

 var $result = $('UL LI').not('.active');

 var result = document.querySelectorAll('UL LI:not(.active)');

  <div id="link-container">
     <a href="https://github.com/VahidN">GitHub</a>
  </div>
  <ol>
     <li>one</li>
     <li>two</li>
  </ol>
  <span class="my-name">VahidN</span>

 var $result = $('#link-container, .my-name, OL');

 var result = document.querySelectorAll('#link-container, .my-name, OL');

 var result = document.querySelectorAll(
 'BUTTON[type="submit"], INPUT[type="submit"]'
);

window.$ = function(selector) {
     return document.querySelectorAll(selector);
};

  $('.some-class');
  $('#some-id');
  $('.some-parent > .some-child');
  $('UL LI:not(.active)');

 PM> Install-Package Trirand.jqGrid

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    
    <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
    <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        @RenderBody()
    </div>

    <script src="~/Scripts/jquery-1.7.2.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.11.min.js"></script>
    <script src="~/Scripts/i18n/grid.locale-fa.js"></script>
    <script src="~/Scripts/jquery.jqGrid.min.js"></script>

    @RenderSection("Scripts", required: false)
</body>
</html>

.ui-widget {
}

/*how to move jQuery dialog close (X) button from right to left*/
.ui-jqgrid .ui-jqgrid-caption-rtl {
    text-align: center !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    left: .3em !important;
}

.ui-dialog .ui-dialog-title {
    margin: .1em 0 .1em .8em !important;
    direction: rtl !important;
    float: right !important;
}

namespace jqGrid01.Models
{
    public class Product
    {
        public int Id { set; get; }
        public string Name { set; get; }
        public decimal Price { set; get; }
        public bool IsAvailable { set; get; }
    }
}

using System.Collections.Generic;

namespace jqGrid01.Models
{
    public class JqGridData
    {
        public int Total { get; set; }

        public int Page { get; set; }

        public int Records { get; set; }

        public IList<JqGridRowData> Rows { get; set; }

        public object UserData { get; set; }
    }

    public class JqGridRowData
    {
        public int Id { set; get; }
        public IList<string> RowCells { set; get; }
    }
}

@{
    ViewBag.Title = "Index";
}

<div dir="rtl" align="center">
    <div id="rsperror"></div>
    <table id="list" cellpadding="0" cellspacing="0"></table>
    <div id="pager" style="text-align:center;"></div>
</div>

@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            $('#list').jqGrid({
                caption: "آزمایش اول",
                //url from wich data should be requested
                url: '@Url.Action("GetProducts","Home")',
                //type of data
                datatype: 'json',
                jsonReader: { 
                    root: "Rows",
                    page: "Page",
                    total: "Total",
                    records: "Records",
                    repeatitems: true,
                    userdata: "UserData",
                    id: "Id",
                    cell: "RowCells"
                },
                //url access method type
                mtype: 'GET',
                //columns names
                colNames: ['شماره', 'نام محصول', 'موجود است', 'قیمت'],
                //columns model
                colModel: [
                { name: 'Id', index: 'Id', align: 'right', width: 50, sorttype: "number" },
                { name: 'Name', index: 'Name', align: 'right', width: 300 },
                { name: 'IsAvailable', index: 'IsAvailable', align: 'center', width: 100, formatter: 'checkbox' },
                { name: 'Price', index: 'Price', align: 'center', width: 100, sorttype: "number" }
                ],
                //pager for grid
                pager: $('#pager'),
                //number of rows per page
                rowNum: 10,
                rowList: [10, 20, 50, 100],
                //initial sorting column
                sortname: 'Id',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total records count
                viewrecords: true,
                altRows: true,
                shrinkToFit: true,
                width: 'auto',
                height: 'auto',
                hidegrid: false,
                direction: "rtl",
                gridview: true,
                rownumbers: true,
                footerrow: true,
                userDataOnFooter: true,
                loadComplete: function() {
                    //change alternate rows color
                    $("tr.jqgrow:odd").css("background", "#E0E0E0");
                },
                loadError: function(xhr, st, err) {
                     jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
                }
                //, loadonce: true
            })
            .jqGrid('navGrid', "#pager",
            {
                edit: false, add: false, del: false, search: false,
                refresh: true
            })
            .jqGrid('navButtonAdd', '#pager',
            {
                caption: "تنظیم نمایش ستون‌ها", title: "Reorder Columns",
                onClickButton: function() {
                     jQuery("#list").jqGrid('columnChooser');
                }
            });
        });
    </script>
}
 

ts.p.jsonReader = $.extend(true,{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {root:"rows", repeatitems: true, cell:"cell"}
},ts.p.jsonReader);

 PM> Install-Package DynamicQuery

using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web.Mvc;
using jqGrid01.Models;
using jqGrid01.Extensions; // for dynamic OrderBy

namespace jqGrid01.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetProducts(string sidx, string sord, int page, int rows)
        {
            var list = ProductDataSource.LatestProducts;

            var pageIndex = page - 1;
            var pageSize = rows;
            var totalRecords = list.Count;
            var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);

            var products = list.AsQueryable()
                               .OrderBy(sidx + " " + sord)
                               .Skip(pageIndex * pageSize)
                               .Take(pageSize)
                               .ToList();

            var jqGridData = new JqGridData
            {
                UserData = new // نمایش در فوتر
                {
                    Name = "جمع صفحه",
                    Price = products.Sum(x => x.Price)
                },
                Total = totalPages,
                Page = page,
                Records = totalRecords,
                Rows = (products.Select(product => new JqGridRowData
                                                {
                                                    Id = product.Id,
                                                    RowCells = new List<string>
                                                    {
                                                        product.Id.ToString(CultureInfo.InvariantCulture),
                                                        product.Name,
                                                        product.IsAvailable.ToString(),
                                                        product.Price.ToString(CultureInfo.InvariantCulture)
                                                    }
                                                })).ToList()
            };
            return Json(jqGridData, JsonRequestBehavior.AllowGet);
        }
    }
}

A CSS Framework and a Set of React Components that Implement Google's Material Design 

Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka.  

$(document).ready(function () {
    $('ul.nav.navbar-nav, ul.list-group, ul.nav.nav-tabs').find('a[href="' + location.pathname + '"]')
                          .closest('li')
                          .addClass('active');
});