ASP.NET MVC Custom HTML Helpers (C#)

In this article we will understand the different ways of creating custom helper method in ASP.NET MVC4 application. Though we have built-in html helpers like Html.ActionLink(), Html.TextBox() and many more, some times we may need to have custom helper methods for example Image or a block of html controls which is commonly used across the application like Address fields.


Custom HTML Helpers make it easier to generate view content. We can create custom helpers in three ways:

1. with Static Methods
2. with Extension Methods
3. with @helper in the razor view.

Let's understand how to implement the same.

1. Static Methods:

 In this approach we will create a static method and use that method in the view, here its is ImageStatic method which will return HtmlString.

CustomHelper.cs:
namespace HelperApplication.Helpers
{
    public static class CustomHelpers
    {
        //Static method
        public static IHtmlString ImageStatic(string src, string alt = "Image", int width = 50, int height = 50)
        {
            var value = String.Format("<img src='{0}' alt='{1}' width='{2}' height='{3}'/>", src, alt, width, height);
            return new HtmlString(value);
        }
        //Extension method
        public static IHtmlString ImageExtension(this HtmlHelper helper, string src, string alt = "image", int width = 50, int height = 50)
        {
            var value = String.Format("<img src='{0}' alt='{1}' width='{2}' height='{3}'/>", src, alt, width, height);
            return new HtmlString(value);
        }
    }
}

src- image source (path)
alt- alternative text if image could not be loaded, and it is assigned a default value "Image". When no values is passed to this parameter it will take the default value "Image".
width & height- width and height of the image these parameters are also assigned a default value 50

Using the ImageStatic html helper method in view..
Index.cshtml: 
@using HelperApplication.Helpers
<div>
     <span>ImageTag with default values for alt, width, height</span>     
     @CustomHelpers.ImageTag("../../images/image.png")
</div>
<div>
     <span>ImageTag with width=100 and height=100</span>     
     @CustomHelpers.ImageStatic("../../images/image.png","Image With alt",100,100)
</div>

 The above code will render the images one with default dimensions(i.e width and height) and another one with given dimension (i.e width=100 and height=100)

2. Extension Methods:

 This is another approach to create custom html helpers, here we will extend the functionality of the HtmlHelper class.

 In the CustomHelper.cs class we have created another method called ImageExtension. We can see this HtmlHelper helper parameter, this implies that ImageExtension method extends functionality of HtmlHelper class. Thus, we can use this method just like other helper methods (Html.ActionLink() similarly Html.ImageExtension).

 Note: To make our method accessible like other built-in helper methods we have to add namespace to webconfig file <add namespace="HelperApplication.Helpers"/> in ~/Views/web.config not in ~/web.config

 Index.cshtml:
<div>
    <span>ImageTag with default values for alt, width, height</span>
     @Html.ImageExtension("../../images/image.png")
</div>
<div>
     <span>ImageTag with width=100 and height=100</span>
     @Html.ImageExtension("../../images/image.png","Image With alt",100,100)
</div>

 3. @helper :

Comments

Post a Comment

Popular posts from this blog

Get unique/distinct values from an array using JQuery $.grep and $.inArray

Consider an example of getting unique elments from an array a = [1,1,2,3,8,2] Array.prototype.unique = function(){     var array = this;     return array.filter(function(ele, index, arr){         return index == arr.indexOf(ele);     }); } and in our Javascript, var array = [1,1,2,3,8,2]; var uniqueElments = arrray.unique(); //Output will be 1,2,3,8 But the issue is few of the older version browsers including IE7 that doesn't support some array features - such as indexOf or filter, so we can use jquery functionalities like:     use $.grep instead of Array.filter The $.grep() method removes items from an array as necessary so that all remaining        items pass a provided test. The test is a function that is passed an array item and the index of the item within the array. Only if the test returns true will the item be in the result array. use $.inArray instead of Array.indexOf The $.inArray() method is similar to JavaScript's native .indexOf
Read more

Enable Windows 8 App(HTML) to make XHR request to service hosted in different domain

Image
Introduction In this small article we are going to learn how to enable our windows 8 app to make a XHR request to service hosted in different domain(e.g Web API hosted in some virtual machine and app in running in my local machine). It seems simple and yes the solution is also simple and straight forward, since I'm new to Win8 app development it took time to understand the things. Lets define the problem. Problem First thing is I have two solutions one is Win8 javascript app solution and another one is service solution I have used Web API for it. Now, when i host my service in local IIS and access the service from my Win8 app it was working i.e i was able to get the data and response status was 200. But when i hosted the same service in some virtual machine(VM) a nd tried to access it was giving 404(Not found) error. SO whats the solution??? Solution The following is my XHR request, WinJS.xhr({             type: "POST",             url: "url"             dat
Read more

Creating custom controls for Windows Store App (Javascript- WinJS)

Image
Introduction The Windows Library for JavaScript (WinJS) is a library of CSS and JavaScript files. It contains JavaScript objects, organized into namespaces, designed to make developing Windows Store app using JavaScript easier. WinJS includes objects that help you handle activation, access storage, and define your own classes and namespaces. It also includes a set of controls like AppBar, ListView, Rating, TimePicker etc. Though there are many useful controls, they don’t cover all needs (for Ex: A generic control for plotting simple graph, tree view, animation etc.) and it is time for us to develop such custom controls, let’s understand how to do it. Problem Definition Let’s consider a simple problem where it’s required to plot a donut like graph to show up the percentage (%) values in our Windows Store App and it should be able to bind to the ViewModel property. This is how our final graph will look like,  Solution First things first, Include WinJS references in HTML page, be
Read more