In this article I will explain with an example, how to implement
jQuery TimePicker plugin in ASP.Net Core Razor Pages.
Download jQuery TimePicker Plugin
You will need to download the plugin files from the following location.
The complete documentation is available in the following link.
Razor PageModel (Code-Behind)
The PageModel consists of the following Handler methods.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
Handler method for handling Button Click and POST operation
This Handler method handles the POST call when the Submit Button is clicked and the Form is submitted.
Inside this Handler Method, the value of the selected Time is fetched and set into a
ViewData object.
public class IndexModel : PageModel
{
public void OnGet()
{
}
public void OnPostSubmit(string time)
{
DateTime dt = Convert.ToDateTime(time);
ViewData["Message"] = dt.ToShortTimeString();
}
}
jQuery TimePicker Plugin implementation
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtTime]").timepicker();
});
</script>
Razor Page (HTML)
Inside the Razor Page, the ASP.Net TagHelpers is inherited.
The HTML of Razor Page consists of an HTML Form consisting of an HTML TextBox and a Submit Button.
The Submit Button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
jQuery TimePicker Plugin implementation
Inside the View, the following
jQuery TimePicker CSS file is inherited.
1. jquery.timepicker.min.css
And then, the following
jQuery and
jQuery TimePicker JS scripts files are inherited.
1. jquery.min.js
2. jquery.timepicker.min.js
Inside the
jQuery document ready event handler, the HTML TextBox has been applied with the
jQuery TimePicker plugin.
Submitting the Form
When the Time is selected and the
Submit button is clicked, the Form is submitted and the
ViewData object is checked for NULL and if it is not NULL then, the value of the
ViewData object is displayed using JavaScript Alert Message Box.
@page
@model jQuery_TimePicker_Core_Razor.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtTime]").timepicker();
});
</script>
</head>
<body>
<form method="post">
<input type="text" id="txtTime" name="time" />
<input type="submit" id="btnSubmit" value="Submit"asp-page-handler="Submit" />
</form>
@if (ViewData["Message"] != null)
{
<script type="text/javascript">
window.onload = function () {
alert("@ViewData["Message"]");
};
</script>
}
</body>
</html>
Screenshot
![ASP.Net Core Razor Pages: Implement jQuery TimePicker Plugin in ASP.Net]()
Demo
Downloads
