Zebra Striped Tables using jQuery

 $(document).ready(function () {

        $("#agTable tr:nth-child(even)").addClass("alternateRow");
        $("#agTable tr:nth-child(odd)").addClass("normalRow");


});






<style>
   table {
        border-collapse: collapse;
    }
   th{
       font-size: x-small;
   }
    table, td, th {
        border: 1px solid black;
    }

    tr.alternateRow td {
        background: #EEE;
        border-bottom: none;
        border-left: none;
        border-right: 1px solid #CCC;
        border-top: 1px solid #DDD;
        padding: 2px 3px 3px 3px;
    }

    tr.normalRow td {
        background: #FFF;
        border-bottom: none;
        border-left: none;
        border-right: 1px solid #CCC;
        border-top: 1px solid #DDD;
        padding: 2px 3px 3px 3px;
    }


</style>

Scrollable Table with Fixed Headers

Using HTML5, the CSS for this is straight-forward, but the problem is the widths of the cols then get all messed up.

So first make sure to use HTML5 table markup:

<table>
<thead>
<tr>
<th>
<th>
</tr>
</thead>
<tbody>
<tr>
<td>
<td>
</tr>
</tbody>
</table>

Then use the following CSS:

<style>
  table tbody, table thead {
        display: block;
    }

    table tbody {
        overflow: auto;
        height: 200px;
    }
</style>

MVC Drop Down Lists and Selects

This is the most concise way to do it:

http://instinctcoder.com/asp-net-mvc-4-dropdownlist-example/

ASP.Net MVC 4 DropDownList Example

1. First of all, we will assume you know how to create a new MVC project in MS 2012, in case you need guide, please refer to here. Please create a project and name itDropDownList.
2. It’s recommended that we bind data with strongly type model, so that we could spot the error in design time. Now create a View Model folder and in this folder add a class name Programming.cs and this class will going to help us to bind data into view. Copy this code into Programming.cs.

Programming.cs

1 2 3 4 5 6 7 8 9 10 11 12 13 14

using System; using System.Collections.Generic; using System.Linq; using System.Web;   namespace DropDownList.ViewModel {     public class Programming     {         public int selectedId { get; set; }           public System.Web.Mvc.SelectList languanges;     } }

3. Create a controller and name it DropDownList. (Right click on Controllers Folder > Add > Controller). Now we need to prepare for dropdownlist data , go to Controller> DropDownListController.cs then add this code into Index function

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc;   namespace DropDownList.Controllers {     public class DropDownListController : Controller     {           public ActionResult Index(ViewModel.Programming programming)         {             List<SelectListItem> list = new List<SelectListItem>() {                 new SelectListItem(){ Value="1", Text="ActionScript"},                 new SelectListItem(){ Value="2", Text="AppleScript"},                 new SelectListItem(){ Value="3", Text="Asp"},                 new SelectListItem(){ Value="4", Text="BASIC"},                 new SelectListItem(){ Value="5", Text="C"},                 new SelectListItem(){ Value="6", Text="C++"},                 new SelectListItem(){ Value="7", Text="Clojure"},                 new SelectListItem(){ Value="8", Text="COBOL"},                 new SelectListItem(){ Value="9", Text="ColdFusion"},                 new SelectListItem(){ Value="10", Text="Erlang"},                 new SelectListItem(){ Value="11", Text="Fortran"},                 new SelectListItem(){ Value="12", Text="Groovy"},                 new SelectListItem(){ Value="13", Text="Haskell"},                 new SelectListItem(){ Value="14", Text="instinctcoder.com"},                 new SelectListItem(){ Value="15", Text="Java"},                 new SelectListItem(){ Value="16", Text="JavaScript"},                 new SelectListItem(){ Value="17", Text="Lisp"},                 new SelectListItem(){ Value="18", Text="Perl"},                 new SelectListItem(){ Value="19", Text="PHP"},                 new SelectListItem(){ Value="20", Text="Python"},                 new SelectListItem(){ Value="21", Text="Ruby"},                 new SelectListItem(){ Value="22", Text="Scala"},                 new SelectListItem(){ Value="23", Text="Scheme"},             };                 programming = new ViewModel.Programming();             programming.languanges = new SelectList(list, "Value", "Text");                 return View(programming);         }     } }

4. In the DropDownListController.cs, add view with name index. (Right click on ActionResult > Add View). Then go to Views > DropDownList> Index.chtml. Copy code below and paste into Index.chtml

Index.chtml

1 2 3 4 5 6 7 8

@model DropDownList.ViewModel.Programming   //Witho@*//Without option label*@ @Html.DropDownListFor(m => m.selectedId, Model.languanges)   @*//With Option label*@ <br /> @Html.DropDownListFor(m => m.selectedId, Model.languanges, "--Select One--")