Monday, 8 December 2014

MVC 4 Razor: Bind jQuery DatePicker Calendar in MVC WebGrid Using ASP.NET MVC, C#.Net

Hi friends, in this article I will explain about how you can use jQuery DatePicker Calendar inside your MVC webgrid control and how you can  selected date  in your MVC application using C#.NET.

In previous articles I explained about Handling multiple submit buttons on the same View in MVC , WebGrid with inline editing, updating, cancel and delete the record using JSON AJAX and How to create a CheckboxList in MVC4 Razor
Write the below code in Model.
Model(UserModel.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCDatePickerCalendar.Models
{
    public class UserModel
    {
        public List<User> userList { get; set; }
    }

    public class User
    {
        public int UserID { get; set; }
        public string UserName { get; set; }
        public string Address { get; set; }
        public DateTime DOB { get; set; }
    }

}

Controller(UserController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCDatePickerCalendar.Models;

namespace MVCDatePickerCalendar.Controllers
{
    public class UserController : Controller
    {
         public ActionResult Index()
        {
            UserModel obj = new UserModel();
            obj.userList = GetUserList();
            ViewBag.mes = "Show";
            return View(obj);
        }
         [HttpPost]
         public ActionResult Index(UserModel obj)
         {
             ViewBag.mes = obj.userList;
             return View(obj);
         }

        public List<User> GetUserList()
        {
            List<User> user = new List<User>();
            user.Add(new User { UserID = 1, UserName = "Kishore", Address = "XXXXXXXXX" ,DOB=new DateTime(1986,09,15) });
            user.Add(new User { UserID = 2, UserName = "Raghav", Address = "XXXXXXXXX", DOB = new DateTime(1980, 09, 15) });
            user.Add(new User { UserID = 3, UserName = "Satyam", Address = "XXXXXXXXX", DOB = new DateTime(1975, 09, 15) });
            user.Add(new User { UserID = 4, UserName = "SambhaShiva", Address = "XXXXXXXXX", DOB = new DateTime(1985, 09, 15) });
            user.Add(new User { UserID = 5, UserName = "Nageswar", Address = "XXXXXXXXX", DOB = new DateTime(1982, 09, 15) });
            user.Add(new User { UserID = 6, UserName = "SaiR", Address = "XXXXXXXXX", DOB = new DateTime(1988, 07, 07) });
         
            return user;
        }
    }
}


View(Index.cshtml):
@model MVCDatePickerCalendar.Models.UserModel
@{
    ViewBag.Title = " How to bind JQuery UI DatePicker in WebGrid in MVC";
}
<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" language="javascript" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" language="javascript"
    type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(function () {
        $(".datepicker").datepicker({
            showOn: "button",
            buttonImage: "/calendar.jpg",
            buttonImageOnly: true,
            buttonText: "Select date"
        });
    });
</script>
<style type="text/css">
    .webGrid
    {
        margin: 4px;
        border-collapse: collapse;
        width: 500px;
        font-family: Tahoma;
        font-size: small;
    }
    .grid-header
    {
        background-color: #990000;
        font-weight: bold;
        color: White !important;
    }
    .webGrid th a
    {
        color: White;
        text-decoration: none;
    }
    .webGrid th, .webGrid td
    {
        border: 1px solid black;
        padding: 5px;
    }
    .alt
    {
        background-color: #F4EFEF;
    }
    .webGrid th a:hover
    {
        text-decoration: underline;
    }
    .to-the-right
    {
        text-align: right;
    }
</style>
@using (Html.BeginForm("Index", "User"))
{
if (ViewBag.mes == "Show")
{
    var grid = new WebGrid(source: Model.userList,
      rowsPerPage: 5);
    @grid.GetHtml(
        tableStyle: "webGrid",
        headerStyle: "grid-header",
        rowStyle: "gridRow",
        alternatingRowStyle: "alt",
        mode: WebGridPagerModes.All,
        firstText: "<< First",
        previousText: " < Previous",
        nextText: "Next >",
        lastText: "Last >>",
        caption: "User Details",
        columns: grid.Columns(
        grid.Column("UserID", "User ID"),
        grid.Column("UserName", "User Name"),
        grid.Column("Address", "Address"),
        grid.Column("DOB", "Date of Birth", a => MvcHtmlString.Create(String.Format("<input type='text' class='datepicker' id='DOB_{0}' value='{1:d}' />", a.UserID, a.DOB)))
))
}
else
{
    <h5>@ViewBag.mes</h5>
}
    <input type="submit" value="Submit" />
}


The output of the above code as shown in the below figure.

When we click on calender button then date picker will be displayed. 
You can download the code by clicking on the below Download image.

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.