Part 45 Customize display and edit templates in asp net mvc

In this video, we will discuss customizing datetime ediotr template. Please watch Part 44, before proceeding. We will be using the same example, that we worked with in Part 44.

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

At the moment, when you navigate to localhost/MVCDemo/Home/Edit/1, notice that, a textbox control is used as the editing interface. Notice that, for HireDate, users have to type in the date. Dates has got different formats. For example, MM/DD/YYYY or DD/MM/YY etc. So, different users may type it differently. Also, from a user experience, it is better to display a DateTime picker from which the user can simply select the date.

The built-in DateTime editor template used by MVC simply displays a textbox for editing Dates. So, let's customize the DateTime editor template, to use jQuery calendar.

The following is the convention used by MVC to find the customized templates.
1. The customized display templates must be in a sub-folder that is named - DisplayTemplates. Editor templates must be in a sub-folder that is named - EditorTemplates.
2. These sub-folders can live in "Shared" folder, or a specific views folder. If these folders are present in the Shared folder, then the templates are available for all the views. If they are in a specific views folder, then, they are available only for that set of views.

Adding a Custom DateTime Editor template
Step 1: If "Shared" folder does not already exists in your project, right click on the project in solution explorer and add it.

Step 2: Right click on the "Shared" folder, and "EditorTemplates" folder.

Step 3: Right click on "EditorTemplates" folder and add a view with name = DateTime

@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToString("dd/MM/yyyy") : string.Empty), new { @class = "date" })
Note: Please refer to the following MSDN articel for all the DateTime format strings

Note: Please refer to the following jQuery link for DateTime format strings

The following jQuery scripts and css files are required for jQuery DateTime picker control. However, these files may change depending on the version of jQuery you are working with.

Text version of the video

Slides

All ASP .NET MVC Text Articles

All ASP .NET MVC Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[christoperatanacio]

@Kudvenkat = Gifted professor.
Many teacher has a knowledge but unable to explain their lectures, in the way students can learn in simple and easy to understand. But his guy is gifted in presenting his lectures.

[BigAlNavidi]

What an awesome series of videos! Venkat, you rock. I have learned so much. Great job!!

[mohamedkunle]

what a brilliant teacher, thank you sir .
one in a million

[jeffblessing]

If you are having issues with the datepicker control I believe I have some idea. If you are trying to do this in a later version of video studio (I am using 2013) the errors with the datepicker may be because the project you are using by default is including bootstrap.


You can create a new project using File->New->Project Under Templates->Web-> Select Visual Studio 2012 and use MVC 4 Web Application. All your screens should match his exactly now.

or

Use
var $j = jquery.NoConflict();
$j(function () {
dateFormat: "dd/mm/yy" });
});

this basically allows you to call bootstrap with $ and jquery with $j

Note: I am just starting to learn front end so correct me if I am wrong but it fixed the issue for me.

[Csharp-video-tutorialsBlogspot]

jQuery is javascript library. It is very popular and most companies use it today. For all client side programming jQuery is used. jQuery UI controls are much better as they provide rich client side behavior. We will have a seperate video series on jQuery.

[georgigeorgiev]

Dude, you've been very helpful with these videos. I gotta say though, when I had to make a datepicker on my MVC, there was no way to find out that this video contains such a valuable information. For the good of other people I suggest that you include datepicker in your video's title.

[krismaly]

I observed that you are taking an example and keep moving it is good.
Accidental mistakes like ";" you corrected on the fly it was good.
Folders creation and tips were good.
Writing parameters and explaining each parameter was good.
This episode users can implement directly with small modification that is what I think.
Template: Earlier you used Empty and now you used Internet, and it is good.

Good Luck in all your future endeavors.

[Ayubajbnabi]

Excellent, very clear, precise as usual. Thanks allot for these wonderful and helpful tutorials.

[naveenkmahendra]

Great videos Venkat! Thanks a lot sir!

[ravikiran]

awesome video ... very clean and quality explanation. Thank you very much sir.

[arianitonline]

there is also an other way to use a calendar to select date: install a nuget with name jQueryUIHelpers.Mvc(version#) and the code will be like this in the edit or create view: => model.HireDate, new { @class = "form-control" })

[Csharp-video-tutorialsBlogspot]

Sure, will upload very soon. In the description of this video, I have included the link for ASP .NET, C#, and SQL Server playlists. All the videos are arranged in logical sequence in these playlists, which could be useful to you. Please share the link with your friends who you think would also benefit from them. If you like these videos, please click on the THUMBS UP button below the video. For email alerts, when new videos are uploaded, you may subscribe to my channel.

[georgenistor]

The scripts are missing from VS2015 solution.
I added jQueryUI from NuGet
without its CSS displayes transparent, needed to add background in style and works fine

[hendesebilisim]

Thank you Sir . If u can tell us how we can use javascript codes not only edit views..Put create/delete view .. it was more better .

Thank you again

[boawebdk]

I like these videos a lot. Could you make a video about using EditorForModel where your model contains several dropdowns that gets their data from other tables ? for example a "user" that has foreign keys to "gender" and "country" ? I havent seen any examples of that anywhere that works.

[ipsitapani]

sir, thank u very much for this tutorial, i have one doubt, in this demo you use a calendar control for jquery, can we use jquery for other controls like grid, dropdownlist, listbox, textbox if yes then which one has better performance comparing with html controls.

[Cordycep]

Hi Venkat:
What if the jquery calendar on the production server shows no arrow, but the development server shows arrow? I am assuming the files on both server have the same version of software since development files are transfer to production automaticly by VS.

[maheshv]

Sir, U r videos are awsum. Can u provide AJAX videos
Thanking you

[HemaRajamani]

Very informative video, thanks. But when I practiced it the jquery datepicker did not show up when I clicked in the HireDate text box. In fact while editing Edit.cshtml, the intellisense did not prompt me the as it did in the video. I even tried including the jquery.ui.datepicker.css reference, but it didn't work. Any idea what I may be missing ?

[fokziiie]

How can i use EditForModel for different properties in accordion. Let's say i want to edit my personal data in first section of accordion (personal data), and my additional info in the second section of accordion (additional data) ?

Thank you!