Neste artigo eu vou mostrar como podemos vincular um controle DatePicker Calendar no interior de um WebGrid em uma aplicação ASP .NET MVC usando a linguagem C#.

using System.Collections.Generic;

namespace Mvc_Calendar_WebGrid.Models
{
    public class AlunoModel
    {
        public List<Aluno> AlunoLista { get; set; }
    }

    public class Aluno
    {
        public string Nome { get; set; }
        public string Classe { get; set; }
        public string Nascimento { get; set; }
        public string Email { get; set; }
    }
}

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

namespace Mvc_Calendar_WebGrid.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            AlunoModel _alunoModel = new AlunoModel();
            _alunoModel = AlunoRegistros();
            return View(_alunoModel);
        }

        [HttpPost]
        public ActionResult Index(AlunoModel _alunoModel)
        {
            return View(_alunoModel);
        }

        public AlunoModel AlunoRegistros()
        {
            AlunoModel _oAlunoModel = new AlunoModel();
            _oAlunoModel.AlunoLista = new List<Aluno>();
            _oAlunoModel.AlunoLista.Add(new Aluno { Nome = "Macoratti", Classe = "#3A", Email = "macoratti@yahoo.com" });
            _oAlunoModel.AlunoLista.Add(new Aluno { Nome = "Jefferson", Classe = "#3B", Email = "jeff@uol.com.br" });
            _oAlunoModel.AlunoLista.Add(new Aluno { Nome = "Miria Estela", Classe = "#2F", Email = "mimi@hotmail.com" });
            _oAlunoModel.AlunoLista.Add(new Aluno { Nome = "Janice Rachel", Classe = "#1H", Email = "janjan@bol.com.br" });
            _oAlunoModel.AlunoLista.Add(new Aluno { Nome = "Jessica Lang", Classe = "#2D", Email = "jesslang@bol.com.br" });

            return _oAlunoModel;
        }
    }
}

@model Mvc_Calendar_WebGrid.Models.AlunoModel

@{
    ViewBag.Title = "Vinculando DataPicker Calendar em um WebGrid";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
    body {
        font-size: 70%;
    }
</style>
<script type="text/javascript" language="javascript">
    $(function () {
        $(".calendarcss").datepicker({
            dateFormat: 'dd/mm/yy',
            dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
            dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
            dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
            monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
            monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
            nextText: 'Proximo',
            prevText: 'Anterior',
            showOn: "button",
            buttonImage: "images/calendar-icon.png",
            buttonImageOnly: true,
            buttonText: "Selecione a data"
        });
    });
</script>

<style type="text/css">
    table {
        font-family: verdana,arial,sans-serif;
        font-size: 12px;
        color: #333333;
        border-width: 1px;
        border-color: #666666;
        border-collapse: collapse;
    }

        table th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }

    input {
        width: 70px;
    }
</style>
@using (Html.BeginForm("Index", "Home"))
{
    var grid = new WebGrid(Model.AlunoLista, canSort: false, canPage: false);
    int NoLinha = 0;
    <div>
        @grid.GetHtml(columns:
            grid.Columns
            (
                grid.Column("#No.", format: item => NoLinha = NoLinha + 1),
                grid.Column("Nome", format: (item) => Html.TextBox("AlunoLista[" + (NoLinha - 1).ToString() + "].Nome", (object)item.Nome)),
                grid.Column("Classe", format: (item) => Html.TextBox("AlunoLista[" + (NoLinha - 1).ToString() + "].Classe", (object)item.Classe)),
                grid.Column("Nascimento", format: (item) => Html.TextBox("AlunoLista[" + (NoLinha - 1).ToString() + "].Nascimento", 
(object)item.Nascimento, new { @class = "calendarcss", @style = "width:70px;" })),
                grid.Column("Email", format: (item) => Html.TextBox("AlunoLista[" + (NoLinha - 1).ToString() + "].Email", (object)item.Email))
            ), mode: WebGridPagerModes.Numeric)
    </div>
    <input type="submit" value="Submeter" />
}

Quer migrar para o VB .NET ?

• Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...

• Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

• Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.

• Curso C# Basico - Video Aulas

Quer aprender os conceitos da Programação Orientada a objetos ?

• Curso Fundamentos da Programação Orientada a Objetos com VB .NET

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

•  Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas