In the ASP.NET MVC Framework, the default DateTime editor template renders a simple textbox for date input. To enhance this, we can customize the template to integrate a jQuery calendar for a better user experience. The desired output should appear as shown in the image below.
1.If your project does not already have a Shared folder inside the Views directory, right-click on the Views folder and create it.
2.Inside the Shared folder, add a new folder named EditorTemplates.
3.Right-click on the EditorTemplates folder and create a partial view named DateTime.
4.Open the DateTime.cshtml partial view and insert the following code.
As previously mentioned, an HTML helper is a method that generates an HTML string, which is then rendered in a view. ASP.NET MVC offers a variety of built-in HTML helper methods that can be used directly within a view. Additionally, the MVC framework enables developers to create custom HTML helpers in ASP.NET MVC applications. Once a custom HTML helper method is created, it can be reused multiple times throughout the application.
In this demonstration, we will showcase employee details along with their photo, as illustrated in the image below.
Creating an empty ASP.NET MVC application
Start by creating a new empty ASP.NET MVC application named CustomHTMLHelper. Next, add a model class called Employee inside the Models folder and insert the following code into it.
namespace CustomHTMLHelper.Models
{
public partial class Employee
{
public int Id { get; set; }
public string FullName { get; set; }
public string Gender { get; set; }
public string EmailAddress { get; set; }
public string PersonalWebSite { get; set; }
public string Photo { get; set; }
public string AlternateText { get; set; }
}
}
Next, create a folder named Photos within the project.
To accomplish this, right-click on the project, select Add Folder, and name it Photos. Then, download the following image and place it inside the Photos folder, renaming it to MyPhoto.png.
Next, create a controller named EmployeeController inside the Controllers folder and insert the following code.
namespace CustomHTMLHelper.Controllers
{
public class EmployeeController : Controller
{
public ActionResult Details()
{
//Here we are hardcoded the Employee Details
//In Realtime you will get the data from any data source
Employee employee = new Employee()
{
Id = 1,
FullName = "Noorain Khan",
Gender = "Female",
EmailAddress = "www.aitaurangabad.com",
PersonalWebSite = "https://aitaurangabad.com/",
Photo = "~/Photos/MyPhoto.png",
AlternateText = "Noorain khan Photo not available"
};
return View(employee);
}
}
}
Create the Details view and insert the following code.
@model CustomHTMLHelper.Models.Employee
@{
ViewBag.Title = "Details";
}
<div>
<h4>Employee Details</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.FullName)
</dt>
<dd>
@Html.DisplayFor(model => model.FullName)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Gender)
</dt>
<dd>
@Html.DisplayFor(model => model.Gender)
</dd>
<dt>
@Html.DisplayNameFor(model => model.EmailAddress)
</dt>
<dd>
@Html.DisplayFor(model => model.EmailAddress)
</dd>
<dt>
@Html.DisplayNameFor(model => model.PersonalWebSite)
</dt>
<dd>
@Html.DisplayFor(model => model.PersonalWebSite)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Photo)
</dt>
<dd>
@Html.DisplayFor(model => model.Photo)
</dd>
<dt>
@Html.DisplayNameFor(model => model.AlternateText)
</dt>
<dd>
@Html.DisplayFor(model => model.AlternateText)
</dd>
</dl>
</div>
Now, launch the application and go to the URL http://localhost:61629/Employee/Details. This will generate the output.
Observe that the PhotoPath and AlternateText property values are shown instead of displaying the actual photo.
How can an image be displayed in an ASP.NET MVC application?
<dt>
@Html.DisplayNameFor(model => model.Photo)
</dt>
<dd>
@Html.DisplayFor(model => model.Photo)
</dd>
<dt>
@Html.DisplayNameFor(model => model.AlternateText)
</dt>
<dd>
@Html.DisplayFor(model => model.AlternateText)
</dd>
Substitute the previous code with the following code.
<dt>
@Html.DisplayNameFor(model => model.Photo)
</dt>
<dd>
<img src="@Url.Content(@Model.Photo)" alt="@Model.AlternateText" />
</dd>
Observe that we are now utilizing the Url.Content() HTML helper method, which resolves the URL of a resource when provided with a relative path. Run the application, and you will see that the image is displayed correctly, as shown in the image below.
The following code is used to display images in an ASP.NET MVC application. We create the `<img>` tag by assigning values to the "src" and "alt" attributes.
<img src=”@Url.Content(@Model.Photo)” alt=”@Model.AlternateText” />
Although the above code is not overly complex, it is still beneficial to move this logic into a separate helper method. Keeping views simple and free from unnecessary complexity is a best practice. Wouldn't it be great if we could render the image using the Image() HTML helper method, as shown below?
@Html.Image(Model.Photo, Model.AlternateText)
However, ASP.NET MVC does not include a built-in Image() HTML helper. So, let's create our own custom image HTML helper method. Before doing that, let's take a step back and understand HTML helper methods. An HTML helper method returns a string. For example, to generate a textbox in a view, we use the following code.
@Html.TextBox(“TextBox Name”)
The TextBox() method is an extension of the HtmlHelper class. In the code above, Html is a property of the View, which provides an instance of the HtmlHelper class.
Creating an Image() Extension Method for the HtmlHelper Class.
Right-click on the project and create a new folder named CustomHelpers. Then, right-click on the CustomHelpers folder and add a class file named CustomHelpers.cs. Next, insert the following code into the file. The code includes comments for better understanding. The TagBuilder class is part of the System.Web.Mvc namespace.
using System.Web;
using System.Web.Mvc;
namespace CustomHTMLHelper.CustomHelpers
{
public static class CustomHelpers
{
public static IHtmlString Image(this HtmlHelper helper, string src, string alt)
{
// Build <img> tag. The parameter name must be img
TagBuilder tb = new TagBuilder("img");
// Add "src" attribute
tb.Attributes.Add("src", VirtualPathUtility.ToAbsolute(src));
// Add "alt" attribute
tb.Attributes.Add("alt", alt);
// return MvcHtmlString. This class implements IHtmlString
// interface. IHtmlStrings will not be html encoded.
return new MvcHtmlString(tb.ToString(TagRenderMode.SelfClosing));
}
}
}
To utilize the custom Image() HTML helper in the Details.cshtml view, add the following using statement in Details.cshtml.
@using CustomHTMLHelper.CustomHelpers;
As we intend to use this Image() HTML helper in all our views, let’s include the “CustomHTMLHelper.CustomHelpers” namespace in web.config that is present in the Views Folder. This eliminates the need to include the namespace in each and every view.
Since we want to use the Image() HTML helper across all views, we can add the CustomHTMLHelper.CustomHelpers namespace to the web.config file inside the Views folder. This prevents the need to manually include the namespace in every individual view.
<system.web.webpages.razor>
<pages pagebasetype="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Routing" />
<add namespace="TemplateHelpersMVC" />
<add namespace="CustomHTMLHelper.CustomHelpers" />
</namespaces>
</pages7>
<host ...... />
</system.web.webpages.razor>
Since we want to use the Image() HTML helper across all views, we can add the CustomHTMLHelper.CustomHelpers namespace to the web.config file inside the Views folder. This prevents the need to manually include the namespace in every individual view.
@Html.Image(Model.Photo, Model.AlternateText)
If you plan to use the Image() custom HTML helper for a specific set of views, add a web.config file to the corresponding Views folder and specify the namespace within it.