C# Online Compiler | .NET Fiddle

<no name> by lesimoes

using System;
using System.ComponentModel.DataAnnotations;
using System.Collections;

namespace HelloWorldMvcApp
{
	public class Pessoa 
	{
		[Required]
		[MinLength(10)]
		[MaxLength(100)]
		public string nome { get; set; }
		[Required]
		[MinLength(5)]
		[MaxLength(30)]
		public string email { get; set; }
		[Required]
		[MinLength(5)]
		[MaxLength(12)]
		public string situacao { get; set; }

		public static int countAtrasadas {get; set; }
		public static int countAndamento {get; set; }


		public Pessoa(string nome, string email, string situacao){
			this.nome = nome;
			this.email = email;
			this.situacao = situacao;
		}


    }
}

Model

​x
 
using System;
using System.ComponentModel.DataAnnotations;
using System.Collections;
​
namespace HelloWorldMvcApp
{
    public class Pessoa 
    {
        [Required]
        [MinLength(10)]
        [MaxLength(100)]
        public string nome { get; set; }
        [Required]
        [MinLength(5)]
        [MaxLength(30)]
        public string email { get; set; }
        [Required]
        [MinLength(5)]
        [MaxLength(12)]
        public string situacao { get; set; }
​
        public static int countAtrasadas {get; set; }
        public static int countAndamento {get; set; }
​
​
        public Pessoa(string nome, string email, string situacao){
            this.nome = nome;
            this.email = email;
            this.situacao = situacao;
        }
​
​
    }
}
​


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
		
</head>
<body>

    <div class="section">
        <div class="container">
            <div class="row custom-container ">

                <!-- Coluna do menu -->
                <div class="col-md-2">
                    <ul class="nav nav-tabs nav-bar">
                        <li>
                            <button class="btn-menu " id="btnAndamento">
                                EM ANDAMENTO
                                <span class="badge badge-success pull-right badAndamento">@HelloWorldMvcApp.Pessoa.countAndamento</span>
                            </button>
                        </li>
                        <li>
                            <button class="btn-menu accordion-toggle" id="btnAtrasadas">
                                ATRASADAS
                                <span class="badge badge-danger pull-right">@HelloWorldMvcApp.Pessoa.countAtrasadas</span>
                            </button>
                        </li>
                    </ul>
                </div>

                <!-- Coluna do conteudo -->
                <div class="col-md-8  custom-conteudo">
                    <div class="header-custom  col-md-12">
                        <div class="page-header header-custom header well">
                            <div class="btn-toolbar pull-right ">
                                <div class="btn-group">
                                    @Ajax.ActionLink("Ordenar por Nome", // <-- Texto a ser exibido
                                "OrderByName", "",               // <-- Nome do método Action
                                     new AjaxOptions
                                     {
                                         UpdateTargetId = "myTable",          // <-- ID do elemento DOM a atualizar
                                         InsertionMode = InsertionMode.Replace, // <-- Substituir o conteúdo do elmento DOM
                                         HttpMethod = "POST"                            // <-- método HTTP
                                     }, new { @class = "btn btn-primary btn-header btn-group" })
                                </div>
                            </div>
                            <h2 class="texto-titulo" id="title">Em Andamento</h2>
                        </div>
                        <!-- Tabela -->





                 


                        <table id="myTable" class="table table-hover table-striped teste ">
                            <tbody>

                                
                                @foreach (var std in ViewData["pessoas"] as IList<HelloWorldMvcApp.Pessoa>)
                                {
                                
                                    if (@std.situacao == "atrasado")
                                    {
                                    <tr class=" clickable-row atrasada" >
                                        <td class="">
                                            <input type="checkbox">
                                        </td>
                                        <td>@std.nome</td>
                                        <td>
                                            <a href="">@std.email</a>
                                        </td>
                                        <td>@std.situacao</td>
                                    </tr>
                                    }
                                    else
                                    { 
                                            <tr class=" clickable-row andamento">
                                                <td class="">
                                                    <input type="checkbox">
                                                </td>
                                                <td>@std.nome</td>
                                                <td>
                                                    <a href="">@std.email</a>
                                                </td>
                                                <td>@std.situacao</td>
                                            </tr>
                                    }
                                }


                              
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <!-- Foi necessário adicionar os scripts junto a página
    devido a restrição da utilização do NETFIDDLE. -->

    <script>
            //Não é mais usada
            var clicks = 7;
            $("#andamento").click(function(){
              clicks++;
              $('.badge-success').html(clicks);
            });

            $('#myTable').on('click', '.clickable-row', function(event) {
              $(this).addClass('highlight').siblings().removeClass('highlight');
            });

            $('#btnAndamento').click(function() {
            $('.andamento').toggle();
            });

            $('#btnAtrasadas').click(function() {
            $('.atrasada').toggle();

            });

  

    </script>


    <!-- Custom CSS -->
    <!-- Foi necessário adicionar o css junto a página
    devido a restrição da utilização do NETFIDDLE. -->

    <style>
        .teste {
        }


        .table-striped tbody tr.highlight td {
            background-color: #8AABBF;
        }

        .check-custom {
            margin-left: 20px;
            margin-right: 20px;
        }


        .teste > tbody > tr {
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }

        .teste > tbody > tr:hover {
            background-color: #e7e9eb;
            color: #272e31;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }

        .teste > tbody > tr:active {
            background-color: #9bb2c9;
            color: #ffffff;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }

        .row-padded {
            margin: 20px;
        }

        .texto-titulo {
            color: #3d4f61;
            height: 42px;
            border-width: 1px;
            margin: 0px;
        }

        .header {
            border-style: solid;
            border-color: #dddfe0;
            border-width: 1px;
        }

        h2 {
            font-size: 16pt;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }

        a {
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }

            a:link {
                color: #266b9e;
            }

        .header-custom {
            background-color: #dddfe0;
        }

        .btn-header {
            font-family: Tahoma, Verdana, Segoe, sans-serif;
            color: #ffffff;
            font-weight: bold;
            text-align: center;
            background-color: #3596c9;
            width: 200px;
            height: 40px;
            padding: 0;
            border: none;
            font-size: 9pt;
            padding-top:10px;
        }

        .btn-menu {
            font-family: Tahoma, Verdana, Segoe, sans-serif;
            color: #8d949e;
            text-align: left;
            background-color: #384150;
            width: 220px;
            height: 50px;
            padding-top: 10px;
            border: none;
            font-size: 9pt;
            padding: 0;
            font-weight: bold;
            padding-left: 20px;
            padding-right: 5px;
            border-style: solid;
            border-color: #282f3a;
            border-width: 1px;
        }

            .btn-menu:hover {
                background-color: #212a3a;
                border-left-style: solid;
                border-left-color: #3596c9;
                border-left-width: 5px;
                color: #ffffff;
            }

            .btn-menu:focus {
                outline: none;
                font-weight: bold;
                color: #ffffff;
                background-color: #212a3a;
                border-left-style: solid;
                border-left-color: #b33c7d;
                border-left-width: 5px;
            }

        .custom-container {
            background-color: #dddfe0;
        }

        .custom-conteudo {
            margin-left: 30px;
        }

        .nav-bar {
            background-color: #384150;
            padding-top: 20px;
            height: 100%;
            width: 220px;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }

        .btn-alteracao, .btn-alteracao:focus, .btn-alteracao:hover {
            background-color: #e13333;
            border: none;
            color: white;
            width: 78px;
            height: 30px;
            text-align: center;
            font-weight: bold;
            display: inline-block;
            font-size: 8pt;
            text-transform: capitalize;
            text-align: center;
            line-height: 10px;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }

        .btn-novo, .btn-novo:focus, .btn-novo:hover {
            background-color: #3596c9;
            border: none;
            color: white;
            width: 78px;
            height: 30px;
            text-align: center;
            font-weight: bold;
            display: inline-block;
            font-size: 8pt;
            text-transform: capitalize;
            text-align: center;
            line-height: 10px;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }

        tr {
            line-height: 50px;
            height: 50px;
        }

            tr:nth-child(even) {
                background-color: #ffffff;
                font-size: 10pt;
                color: #272e31;
            }


            tr:nth-child(odd) {
                background-color: #fafafa;
                font-size: 10pt;
                color: #272e31;
            }

        .bg-ingo {
            background-color: red;
        }

        .navbar-fixed-left {
            width: 120px;
            position: fixed;
            border-radius: 0;
            height: 100%;
        }

            .navbar-fixed-left + .container {
                padding-left: 120px;
            }

        .badge-danger {
            background-color: #d43f3a;
        }

        .badge-success {
            background-color: #64afd4;
        }
    </style>


</body>
</html>

View

 
​
​
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
        
</head>
<body>
​
    <div class="section">
        <div class="container">
            <div class="row custom-container ">
​
                <!-- Coluna do menu -->
                <div class="col-md-2">
                    <ul class="nav nav-tabs nav-bar">
                        <li>
                            <button class="btn-menu " id="btnAndamento">
                                EM ANDAMENTO
                                <span class="badge badge-success pull-right badAndamento">@HelloWorldMvcApp.Pessoa.countAndamento</span>
                            </button>
                        </li>
                        <li>
                            <button class="btn-menu accordion-toggle" id="btnAtrasadas">
                                ATRASADAS
                                <span class="badge badge-danger pull-right">@HelloWorldMvcApp.Pessoa.countAtrasadas</span>
                            </button>
                        </li>
                    </ul>
                </div>
​
                <!-- Coluna do conteudo -->
                <div class="col-md-8  custom-conteudo">
                    <div class="header-custom  col-md-12">
                        <div class="page-header header-custom header well">
                            <div class="btn-toolbar pull-right ">
                                <div class="btn-group">
                                    @Ajax.ActionLink("Ordenar por Nome", // <-- Texto a ser exibido
                                "OrderByName", "",               // <-- Nome do método Action
                                     new AjaxOptions
                                     {
                                         UpdateTargetId = "myTable",          // <-- ID do elemento DOM a atualizar
                                         InsertionMode = InsertionMode.Replace, // <-- Substituir o conteúdo do elmento DOM
                                         HttpMethod = "POST"                            // <-- método HTTP
                                     }, new { @class = "btn btn-primary btn-header btn-group" })
                                </div>
                            </div>
                            <h2 class="texto-titulo" id="title">Em Andamento</h2>
                        </div>
                        <!-- Tabela -->
​
​
​
​
​
                 
​
​
                        <table id="myTable" class="table table-hover table-striped teste ">
                            <tbody>
​
                                
                                @foreach (var std in ViewData["pessoas"] as IList<HelloWorldMvcApp.Pessoa>)
                                {
                                
                                    if (@std.situacao == "atrasado")
                                    {
                                    <tr class=" clickable-row atrasada" >
                                        <td class="">
                                            <input type="checkbox">
                                        </td>
                                        <td>@std.nome</td>
                                        <td>
                                            <a href="">@std.email</a>
                                        </td>
                                        <td>@std.situacao</td>
                                    </tr>
                                    }
                                    else
                                    { 
                                            <tr class=" clickable-row andamento">
                                                <td class="">
                                                    <input type="checkbox">
                                                </td>
                                                <td>@std.nome</td>
                                                <td>
                                                    <a href="">@std.email</a>
                                                </td>
                                                <td>@std.situacao</td>
                                            </tr>
                                    }
                                }
​
​
                              
                            </tbody>
                        </table>
​
                    </div>
                </div>
            </div>
        </div>
    </div>
​
    <!-- Scripts -->
    <!-- Foi necessário adicionar os scripts junto a página
    devido a restrição da utilização do NETFIDDLE. -->
​
    <script>
            //Não é mais usada
            var clicks = 7;
            $("#andamento").click(function(){
              clicks++;
              $('.badge-success').html(clicks);
            });
​
            $('#myTable').on('click', '.clickable-row', function(event) {
              $(this).addClass('highlight').siblings().removeClass('highlight');
            });
​
            $('#btnAndamento').click(function() {
            $('.andamento').toggle();
            });
​
            $('#btnAtrasadas').click(function() {
            $('.atrasada').toggle();
​
            });
​
  
​
    </script>
​
​
    <!-- Custom CSS -->
    <!-- Foi necessário adicionar o css junto a página
    devido a restrição da utilização do NETFIDDLE. -->
​
    <style>
        .teste {
        }
​
​
        .table-striped tbody tr.highlight td {
            background-color: #8AABBF;
        }
​
        .check-custom {
            margin-left: 20px;
            margin-right: 20px;
        }
​
​
        .teste > tbody > tr {
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }
​
        .teste > tbody > tr:hover {
            background-color: #e7e9eb;
            color: #272e31;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }
​
        .teste > tbody > tr:active {
            background-color: #9bb2c9;
            color: #ffffff;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }
​
        .row-padded {
            margin: 20px;
        }
​
        .texto-titulo {
            color: #3d4f61;
            height: 42px;
            border-width: 1px;
            margin: 0px;
        }
​
        .header {
            border-style: solid;
            border-color: #dddfe0;
            border-width: 1px;
        }
​
        h2 {
            font-size: 16pt;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }
​
        a {
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }
​
            a:link {
                color: #266b9e;
            }
​
        .header-custom {
            background-color: #dddfe0;
        }
​
        .btn-header {
            font-family: Tahoma, Verdana, Segoe, sans-serif;
            color: #ffffff;
            font-weight: bold;
            text-align: center;
            background-color: #3596c9;
            width: 200px;
            height: 40px;
            padding: 0;
            border: none;
            font-size: 9pt;
            padding-top:10px;
        }
​
        .btn-menu {
            font-family: Tahoma, Verdana, Segoe, sans-serif;
            color: #8d949e;
            text-align: left;
            background-color: #384150;
            width: 220px;
            height: 50px;
            padding-top: 10px;
            border: none;
            font-size: 9pt;
            padding: 0;
            font-weight: bold;
            padding-left: 20px;
            padding-right: 5px;
            border-style: solid;
            border-color: #282f3a;
            border-width: 1px;
        }
​
            .btn-menu:hover {
                background-color: #212a3a;
                border-left-style: solid;
                border-left-color: #3596c9;
                border-left-width: 5px;
                color: #ffffff;
            }
​
            .btn-menu:focus {
                outline: none;
                font-weight: bold;
                color: #ffffff;
                background-color: #212a3a;
                border-left-style: solid;
                border-left-color: #b33c7d;
                border-left-width: 5px;
            }
​
        .custom-container {
            background-color: #dddfe0;
        }
​
        .custom-conteudo {
            margin-left: 30px;
        }
​
        .nav-bar {
            background-color: #384150;
            padding-top: 20px;
            height: 100%;
            width: 220px;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }
​
        .btn-alteracao, .btn-alteracao:focus, .btn-alteracao:hover {
            background-color: #e13333;
            border: none;
            color: white;
            width: 78px;
            height: 30px;
            text-align: center;
            font-weight: bold;
            display: inline-block;
            font-size: 8pt;
            text-transform: capitalize;
            text-align: center;
            line-height: 10px;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }
​
        .btn-novo, .btn-novo:focus, .btn-novo:hover {
            background-color: #3596c9;
            border: none;
            color: white;
            width: 78px;
            height: 30px;
            text-align: center;
            font-weight: bold;
            display: inline-block;
            font-size: 8pt;
            text-transform: capitalize;
            text-align: center;
            line-height: 10px;
            font-family: Tahoma, Verdana, Segoe, sans-serif;
        }
​
        tr {
            line-height: 50px;
            height: 50px;
        }
​
            tr:nth-child(even) {
                background-color: #ffffff;
                font-size: 10pt;
                color: #272e31;
            }
​
​
            tr:nth-child(odd) {
                background-color: #fafafa;
                font-size: 10pt;
                color: #272e31;
            }
​
        .bg-ingo {
            background-color: red;
        }
​
        .navbar-fixed-left {
            width: 120px;
            position: fixed;
            border-radius: 0;
            height: 100%;
        }
​
            .navbar-fixed-left + .container {
                padding-left: 120px;
            }
​
        .badge-danger {
            background-color: #d43f3a;
        }
​
        .badge-success {
            background-color: #64afd4;
        }
    </style>
​
​
</body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {

        public List<Pessoa> listPessoas;

        [HttpGet]
        public ActionResult Index()
        {
            listPessoas = new List<Pessoa>();
            populatePessoas(listPessoas);


            CountSituacao();
            ViewData["pessoas"] = listPessoas;

            return View();
        }
        [HttpGet]
        public ActionResult OrderByName()
        {

            OrderList();
            ViewData["pessoas"] = listPessoas;

            return View();
        }


        private void populatePessoas(List<Pessoa> listPessoa)
        {
            Pessoa.countAndamento = 0;
            Pessoa.countAtrasadas = 0;


            listPessoas.Add(new Pessoa("David Koch", "david@gmail.com", "em andamento"));
            listPessoas.Add(new Pessoa("Charles Koch", "charles@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Michael Bloomberg", "bblomberg@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Larry Ellison", "larry@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Mark Zuckerberg", "mark@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Jeff Bezos", "jeff@gmail.com", "em andamento"));
            listPessoas.Add(new Pessoa("Carlos Slim", "carlos@gmail.com", "em andamento"));
            listPessoas.Add(new Pessoa("Warren Buffet", "warren@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Amâncio Ortega", "ortega@gmail.com", "em andamento"));
            listPessoas.Add(new Pessoa("Bill Gates", "gates@gmail.com", "em andamento"));
        }

        private void CountSituacao()
        {
            for (int i = 0; i < listPessoas.Count; i++)
            {
                if (listPessoas[i].situacao == "atrasado")
                    Pessoa.countAtrasadas++;
                else
                    Pessoa.countAndamento++;
            }
        }

        private void OrderList()
        {

            listPessoas = new List<Pessoa>();
            populatePessoas(listPessoas);
            CountSituacao();
            listPessoas.Sort(delegate(Pessoa x, Pessoa y) {
                return x.nome.CompareTo(y.nome);
            });

        }



    }
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
​
        public List<Pessoa> listPessoas;
​
        [HttpGet]
        public ActionResult Index()
        {
            listPessoas = new List<Pessoa>();
            populatePessoas(listPessoas);
​
​
            CountSituacao();
            ViewData["pessoas"] = listPessoas;
​
            return View();
        }
        [HttpGet]
        public ActionResult OrderByName()
        {
​
            OrderList();
            ViewData["pessoas"] = listPessoas;
​
            return View();
        }
​
​
        private void populatePessoas(List<Pessoa> listPessoa)
        {
            Pessoa.countAndamento = 0;
            Pessoa.countAtrasadas = 0;
​
​
            listPessoas.Add(new Pessoa("David Koch", "david@gmail.com", "em andamento"));
            listPessoas.Add(new Pessoa("Charles Koch", "charles@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Michael Bloomberg", "bblomberg@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Larry Ellison", "larry@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Mark Zuckerberg", "mark@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Jeff Bezos", "jeff@gmail.com", "em andamento"));
            listPessoas.Add(new Pessoa("Carlos Slim", "carlos@gmail.com", "em andamento"));
            listPessoas.Add(new Pessoa("Warren Buffet", "warren@gmail.com", "atrasado"));
            listPessoas.Add(new Pessoa("Amâncio Ortega", "ortega@gmail.com", "em andamento"));
            listPessoas.Add(new Pessoa("Bill Gates", "gates@gmail.com", "em andamento"));
        }
​
        private void CountSituacao()
        {
            for (int i = 0; i < listPessoas.Count; i++)
            {
                if (listPessoas[i].situacao == "atrasado")
                    Pessoa.countAtrasadas++;
                else
                    Pessoa.countAndamento++;
            }
        }
​
        private void OrderList()
        {
​
            listPessoas = new List<Pessoa>();
            populatePessoas(listPessoas);
            CountSituacao();
            listPessoas.Sort(delegate(Pessoa x, Pessoa y) {
                return x.nome.CompareTo(y.nome);
            });
​
        }
​
​
​
    }
}

View in Full Screen

View IL Code