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 TH-cam channel. Hope you can help.
/ @aarvikitchen5572
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.
3. The name of the template must match the name of the type. For example, as we are customizing DateTime template, the name of the template in this case has to be DateTime.ascx
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
Step 4: Copy and paste the following code in DateTime.cshtml partial view
@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
msdn.microsoft....
Step 5: Copy and paste Edit.cshtml view code from my blog using the link below.
csharp-video-tu...
Note: Please refer to the following jQuery link for DateTime format strings
jqueryui.com/re...
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.
Scripts/jquery-1.7.1.min.js
Scripts/jquery-ui-1.8.20.min.js
Content/Site.css
Content/themes/base/jquery.ui.all.css
Text version of the video
csharp-video-tu...
Slides
csharp-video-tu...
All ASP .NET MVC Text Articles
csharp-video-tu...
All ASP .NET MVC Slides
csharp-video-tu...
All Dot Net and SQL Server Tutorials in English
www.youtube.co...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic