In this article I will explain with an example, how to implement Bootstrap TimePicker in ASP.Net MVC Razor.
Bootstrap TimePicker will be implemented using the MVC Bootstrap TimePicker library in ASP.Net MVC Razor.
Downloading and Installing MVC Bootstrap TimePicker library
You will need to follow the following steps in order to download and install the MVC Bootstrap TimePicker library.
2. Once downloaded, copy all the files from the Zip into a folder named TimePicker created within your Project folder and then add the CSS and JS files to the Project as shown below.
![Bootstrap TimePicker example in ASP.Net MVC Razor]()
3. Then you will need to reference the MvcBootstrapTimepicker.dll into your Project using the Add Reference option and then selecting the file from the TimePicker folder present in the Project folder.
![Bootstrap TimePicker example in ASP.Net MVC Razor]()
4. Once the reference is added, you will need to build the project.
MVC Bootstrap TimePicker Documentation
The documentation for the MVC Bootstrap TimePicker library is available here: Documentation.
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
This Action method gets called when the Form is posted. The value of the selected time is fetched and it set into a ViewBag object.
The value of the ViewBag object will be used for displaying the selected time in View using JavaScript Alert Message Box.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(string selectedTime)
{
ViewBag.Message = "Selected Time: " + selectedTime;
return View();
}
}
View
In the very first line, the reference of the MVC Bootstrap TimePicker library is added, so that it can be used in the View.
Inside the View, the jQuery JS file, the Bootstrap JS file, the Bootstrap CSS file and all the JS and CSS files required by the MVC Bootstrap TimePicker library are inherited.
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the Form, there is a MVC Bootstrap TimePicker control and a Submit Button.
When the time is selected in the MVC Bootstrap TimePicker control and the Submit button is pressed, the Form is submitted and the value of the selected time is returned in a ViewBag object which is displayed using JavaScript Alert Message Box.
@using MvcBootstrapTimepicker;
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
<style type="text/css">
body {
margin-left: 10pt;
padding: 10pt;
}
.TimePickerWidth {
width: 150px;
}
</style>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="~/TimePicker/bootstrap-timepicker.css" rel="stylesheet"/>
<link href="~/TimePicker/MvcBootstrapTimepicker.css" rel="stylesheet"/>
<script src ="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/TimePicker/bootstrap-timepicker.js" type="text/javascript"></script>
< script src="~/TimePicker/MvcBootstrapTimepicker.js" type="text/javascript"></script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
@Html.BootstrapTimePicker("SelectedTime").ContainerClass("TimePickerWidth");
<br/>
<br/>
<input type="submit" value="Submit"/>
}
@if (ViewBag.Message != null)
{
<script type="text/javascript">
$(function () {
alert("@ViewBag.Message");
});
</script>
}
</body>
</html>
Screenshot
![Bootstrap TimePicker example in ASP.Net MVC Razor]()
Downloads
