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.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
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