A j. Query UI Based Date Picker for ASP. NET MVC 5. WEBINAR On demand webcast. How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2. REGISTER by Brady Kelly. Introduction. This article provides guidance on how to use the j. Query UI Datepicker widget for date fields in MVC forms. I assume you have a working knowledge of Visual Studio, C, ASP. NET MVC, and Razor. You should know to add a controller and view to a new or existing project, and how to run that project to observe changes made to it. The accompanying sample code in this article was written using Visual Studio 2. Update 4, but it should run in most other modern versions of Visual Studio. To begin, you should understand what an editor template is and why you should want one. Learn, Share, Build. Each month, over 50 million developers come to Stack Overflow to learn, share their knowledge, and build their careers. Join the worlds. Theming. jQuery Mobile provides a powerful theming framework that allows developers to customize color schemes and certain CSS aspects of UI features. Create terrific lightbox jQuery slideshows in second without a line of code. All browsers and devicesIll start by providing you a very plain vanilla example of date input. For this example, lets look at an edit field for a date value. Cut development time, while delivering rich, powerful, modern websites and apps. Telerik UI for ASP. NET MVC offers 70 jQuerybased components ranging from must. Here Mudassar Ahmed Khan has explained, how to get retrieve data from database and display it on page using jQuery AJAX Web Method in ASP. Net using C and VB. Net. A jQuery eBook with easytofollow jQuery Solutions to Web Development Problems. We will use my tiny Person. View. Model class, which is good only for demonstration purposes namespace Simple. Templates. View. Models. Person. View. Model. Last. Name get set. First. Name get set. Date. Time Date. Of. Birth get set. The Date. Of. Birth property is nullable because we dont want to require people to divulge more personal detail than absolutely necessary. Now, to add an edit view for Person, you should, for this example at least, delegate most of the work to Visual Studios Add View Wizard, as in Figure 1. Figure 1 Add an Edit View. Adding a view in this manner causes Visual Studio to scaffold the view for you in other words, automatically generate appropriate Razor mark up for an Edit view for the Person. View. Model. Open the Edit view, and you can see that Visual Studio has generated a call to the Editor. For. HTML Helper method. Html. Editor. Formodel model. Date. Of. Birth. new html. Attributes new. The Editor. For HTML helper method is what is known as a templated helper. This means the MVC runtime will dynamically choose a template to determine how it should render the HTML required for a field. More comprehensive coverage of template helpers and editor templates is beyond the scope of this article, but there are several walkthroughs on this subject. Without being told otherwise, and for web UI purposes, the MVC framework treats Date. Time properties as text, meaning the HTML output by the helper method ends up along the following lines lt input classform control text box single line. The field Date. Of. Birth must. be a date. Date. Of. Birth nameDate. Of. Birth. typedatetime value1. AM. This is rather unfortunate, because a Date. Time value is not formatted, and the end user is free to type what they want, regardless of whatever format we have chosen for Date. Time values, as in Figure 2. Figure 2 Default Edit Person. Although the built in j. Query validation catches obvious errors, this application will still be vulnerable to, for example, a very common issue with date values. The confusion of day and month can occur, because for some locales, the standard is ddMMyyyy, and for others it is MMddyyyy, and for days of the month less than or equal to 1. HTML 5 Input Type Date. Fortunately, the HTML 5 standard provides some relief from this date format chaos, in that when a compatible browser finds an input element with type date, it renders a Date Picker dialogue. Now, we are stuck on the question of how to get Razor to output such an input element for the Date. Of. Birth property, versus the text type input it outputs by default. The Editor. For helper method will render HTML mark up based on a few factors, being The. NET data type of the source property. View model metadata for the source property. A custom editor template for the source property. First, the data type Just to be clear, this data type is the. NET Date. Time data type, not the data annotations data type. For our Date. Of. Birth property, the Razor engine will generate an input element with typedatetime. However, it seems browsers dont currently deal very well with this new fangled input element, so they simply treat this input element the same as a raw text input, as seen in Figure 2. I tried Chrome, IE1. Fire. Fox, to no avail. This Stack. Overflow answer suggests browsers have little confidence in this type. Then, the metadata In ASP. NET MVC, we can attach metadata to viewmodel or model properties by using data annotation attributes for example public class Person. View. Model. public string Last. Name get set. First. Name get set. Data. TypeData. Type. Date. Display. FormatData. Format. String. 0 yyyy MM dd. Apply. Format. In. Edit. Mode true. Date. Time Date. Of. Birth get set. Here, you are telling MVC to treat the Date. Of. Birth property as a Date value, and thus render an input element with typedatetime. You also tell MVC what format you want the date in. The browser handles this input type better, and it renders a date picker Figure 3 Chromes Date Picker. As nice as Chromes date picker is, it is quite the black box, and it allows hardly any customisation regarding date format, scheming, what it allows the user to change, and more. For this kind of configuration, we have to turn to third party date pickers, and for its cost zero, the j. Query UI Datepicker is a shining example. The j. Query UI Date Picker. You can see a demo of the j. Query UI Datepicker. Figure 4 shows the demo page for this widget, configured to open when its calendar icon is clicked Figure 4 Datepicker Demo. This demo page also includes other examples of common configurations and styles for this cool little widget. You can click the view source link, at the bottom of the page, to see how simple it is to use this control. You can view more technical reference information by clicking the API documentation link. Adding j. Query UI to the Project. While there are many different ways of setting an MVC project up to include j. Query UI, I have opted for, in my opinion, the simplest method, which is installing the necessary files via Nuget Step 1. In Visual Studios Package Manager Console, enter the following command Install Package j. Query. UI. Combined. Step 2. Your project should now have the j. Query UI Java. Script and style sheet files, as seen in Figures 5 and 6 Figure 5 j. Query UI Stylesheets. Figure 6 j. Query UI Scripts. All the CSS files under the Contentthemes folder belong to j. Query UI, as do the two jquery ui 1. Scripts folder. Step 3. Nuget does a fine job of adding the required j. Query UI files to the project, but it doesnt do anything to actually include these files in the Razor views. To do this, you must Include these files in the web apps styles and scripts bundles. Reference these files in views where they are required. Step 4. To include required files in the apps bundles, edit the Bundle. Config. cs file Figure 7 Bundle. Config Location. Step 5. Add the following two code snippets to the Register. Bundles method in Bundle. Config bundles. Addnew Script. Bundlebundlesjqueryui. IncludeScriptsjquery ui version. Addnew Style. BundleContentjqueryui. IncludeContentthemesbaseall. Step 6. Now, to reference the required files in views. Because you are aiming at providing the same user experience wherever a date time value is edited, you can reference the j. Query UI files in the master layout for our application for example Figure 8 Layout Location. Step 7. At the top of Layout. Chain AJAX Requests with j. Query Deferred. Imagine a scenario where you have a bunch of functions to execute asynchronously, but each function depends on the result of the previous one. You do not have an idea when each function will complete execution. In such cases, you can write Callbacks. Callbacks are useful when working with background tasks because you dont know when they will complete. Heres a prototype of callbacks in action This article is taken from my upcoming The Absolutely Awesome j. Query Cookbook at www. Acallback. success function result. And heres a prototype of callbacks in action. Afunction. Bfunction. However this code style leads to too much nesting and becomes unreadable if there are too many callback functions. Using j. Query, the same functionality can be achieved elegantly without too much nesting. The answer lies in Deferred and Promise. Lets cook up an example We have four functions A, B, C and D that will execute asynchronously. However function B relies on the result of function A. Similarly function C relies on the result of function B and so on. The task is to execute these functions one after the other and also make the results of the previous function available in the next one. Asynchronous requests cannot be guaranteed to finish in the same order that they are sent. However using deferred objects, we can make sure that the callbacks for each async request runs in the required order. Observe this code. MessageCalling Function A. S91. json. type GET. Type json. function Bresult. From. A. write. MessageIn Function B. Result From A result. From. A. data. return. S92. json. type GET. Type json. function Cresult. From. B. write. MessageIn Function C. Result From B result. From. B. data. return. S93. json. type GET. Type json. function Dresult. From. C. write. MessageIn Function D. Result From C result. From. C. data. A. B. thenC. thenD. Messagemsg. para. Observe this important piece of code. A. thenB. thenC. D. From the j. Query Documentation Callbacks are executed in the order they were added. Since deferred. then returns a Promise, other methods of the Promise object can be chained to this one, including additional. And thats what we are doing here. Every Ajax method of j. Query already returns a promise. When the Ajax call in function A completes, it resolves the promise. The function B is then called with the results of the Ajax call as its first argument. When the ajax call in B completes, it resolves the promise and function C is called with the results of that call and so on. Here we are just adding return in every function to make this chain work. By the way, you may have observed that we are repeating settings for multiple AJAX calls in the same script. You can clean up the code further by specifying global settings using. Setup. Heres how. Type json. and then each call is reduced to. MessageCalling Function A. S91. json. Run the sample and you will get the following output Once youve got your head wrapped around them, j. Query Deferred can be simple yet powerful. The ability to easily chain methods is beautiful and easy on the eyes This article is taken from my upcoming The Absolutely Awesome j. Query Cookbook at www.