Custom HTML Helpers- Extend ActionLink

Requirement: Create custom container DIV control that takes in HTML markup as input.

Assuming you already have an MVC website created.

Step 1: Create a folder named "Helpers" in the root of your MVC website.

Step 2: Create a static class named "HtmlHelper" under the newly created folder.

Step 3: Use following Namespaces:

using System;

using System.Text;

using System.Web;

using System.Web.Mvc;

Step 4: Create a static function as follows:

public static IHtmlString CustomActionLink(this HtmlHelper helper, string Id, string caption, string action, string controller, string tooltip, Dictionary<string, object> htmlAttributes = null)

        {

            //If htmlAttributes is null, create an instance

            if (htmlAttributes == null)

            {

                htmlAttributes = new Dictionary<string, object>();

            }

            //Add properties

            htmlAttributes.Add("title", tooltip);

            htmlAttributes.Add("class", "InformActionLink");

            //Finally return the custom ActionLink

            return helper.ActionLink(caption, action, controller, null, htmlAttributes);

        }

Step 5: Compile the project.

Step 6: Open the view in which you want to render the above control.

Step 7: Add reference to the newly created control on top of your view:

@using <Your ProjectName>.<FolderName>

Example @using HtmlHelpers.Helpers

Step 8: Add following markup:

@Html.CustomActionLink("lnkAddNew", "Add New", "ClientActionName", "ClientControllerName", "Add New Client")

OR

@Html.CustomActionLink("lnkAddNew", "Add New", "ClientActionName", "ClientControllerName", "Add New Client", null)

OR

@Html.CustomActionLink("lnkAddNew", "Add New", "ClientActionName", "ClientControllerName", "Add New Client", new Dictionary<string, object>() {{ "onclick" , "alert('testing')"}})

Custom HTML Helpers- Link

Requirement: Create custom container DIV control that takes in HTML markup as input.

Assuming you already have an MVC website created.

Step 1: Create a folder named "Helpers" in the root of your MVC website.

Step 2: Create a static class named "HtmlHelper" under the newly created folder.

Step 3: Use following Namespaces:

using System;

using System.Text;

using System.Web;

using System.Web.Mvc;

Step 4: Create a static function as follows:

public static IHtmlString CustomLink(this HtmlHelper helper, string Id, string caption, string tooltip, Dictionary<string, object> htmlAttributes = null)

        {

            var attributes = new StringBuilder();

            //Read HTML Attributes and construct string out of it

            if (htmlAttributes != null)

            {

                foreach (var attr in htmlAttributes.ToArray())

                {

                    attributes.Append($"{attr.Key.ToString()}=\"{attr.Value.ToString()}\"");

                }

            }

            else

            {

                htmlAttributes = new Dictionary<string, object>();

            }

            var sb = new StringBuilder();

            //Construct final control with markup and htmlAttributes

            sb.Append($"<a id='{Id}' class='InformActionLink' {attributes} title='{tooltip}'>{caption}</a>");

            //Return as HTML String

            return new HtmlString(sb.ToString());

        }

Step 5: Compile the project.

Step 6: Open the view in which you want to render the above control.

Step 7: Add reference to the newly created control on top of your view:

@using <Your ProjectName>.<FolderName>

Example @using HtmlHelpers.Helpers

Step 8: Add following markup:

@Html.CustomLink ("lnkAddNew", "Add", "Add New Client", new Dictionary<string, object>() { { "onclick" , "alert('testing')"} })

OR

@Html.CustomLink ("lnkAddNew", "Add", "Add New Client", null)

OR

@Html.CustomLink ("lnkAddNew", "Add", "Add New Client")

Custom HTML Helpers with HTML Attributes

 Requirement: Create custom Help control that takes HTML markup and HTML Attributes as input.

Assuming you already have an MVC website created with KendoUI core package installed.

Step 1: Create a folder named "Helpers" in the root of your MVC website.

Step 2: Create a static class named "HtmlHelper" under the newly created folder.

Step 3: Use following Namespaces:

using System;

using System.Text;

using System.Web;

using System.Web.Mvc;

Step 4: Create a static function as follows:

public static IHtmlString HelpIcon(this HtmlHelper helper, string Id, Func<object, object> toolTipMarkup = null, object htmlAttributes = null)

 {

     //StringBuilder for creating a string from htmlAttributes parameter

     var attributes = new StringBuilder();

     //Read HTML Attributes and construct string out of it

     if (htmlAttributes != null)

     {

         foreach (var prop in htmlAttributes.GetType().GetProperties(BindingFlags.Instance | BindingFlags.Public))

         {

             attributes.Append($"{prop.Name}= '{prop.GetValue(htmlAttributes, null)}'");

         }

     }

    

     //StringBuilder for holding the entire markup while it is being constructed

     var sb = new StringBuilder();

     //Construct markup from the provided child controls

     var markup = (toolTipMarkup == null ? "" : toolTipMarkup.DynamicInvoke(helper.ViewContext).ToString());

     //Construct final control with markup and htmlAttributes

     sb.Append($"<span class='glyphicon glyphicon-info-sign info-in-panelHeader' {attributes} title='{markup}'></span>");

     //Return as HTML String

     return new HtmlString(sb.ToString());

 }

Step 5: Compile the project.

Step 6: Open the view in which you want to render the above control.

Step 7: Add references to the newly created control and Kendo UI on top of your view:

@using Kendo.Mvc.UI

@using <Your ProjectName>.<FolderName>

Example @using HtmlHelpers.Helpers

Step 8: Invoke KendoToolTip script:

  $(document).ready(function () {

      $(". info-in-panelHeader ").kendoTooltip({

          filter: "span.glyphicon-info-sign", width: "375px", position: "right", autoHide: true, content: kendo.template($("#TooltipTemplate").html()),

          animation: {

              open: {

                  duration: 200

              }

          }

      });

  });

 <script id="TooltipTemplate" type="text/x-kendo-template">
        <p class="TooltipHeader"><span class="glyphicon glyphicon-info-sign"></span>&nbsp; Help</p>
        <p>#=target.data('title')#</p>
    </script>

Step 9: Add following markup:

@Html.HelpIcon("hlpFeatureHelp", @<text>

     <ul>

         <li>This is help text shown as bullet 1</li>

         <li> This is help text shown as bullet 2.</li>

     </ul>

 </text>, new {style= "margin-top:10px; z-index:999999;" })

Run your website, you will find a help icon rendered on your view.  

​

Hover over the icon to activate the tooltip.  

​

Custom HTML Helpers without HTML Attributes

Requirement: Create custom container DIV control that takes in HTML markup as input.

Assuming you already have an MVC website created.

Step 1: Create a folder named "Helpers" in the root of your MVC website.

Step 2: Create a static class named "HtmlHelper" under the newly created folder.

Step 3: Use following Namespaces:

using System;

using System.Text;

using System.Web;

using System.Web.Mvc;

Step 4: Create a static function as follows:

public static IHtmlString Div(this HtmlHelper helper, string Id, Func<object, object> innerHTML = null)

 {

     //Declare StringBuilder to hold the control's markup

     var sb = new StringBuilder();

     //This reads the markup dictionary from the input parameters

     var markup = (innerHTML == null ? "" : innerHTML.DynamicInvoke(helper.ViewContext).ToString());

     //This constructs the markup for final control

     sb.Append($"<div id='div_{Id}' class='caption'>{markup}</div>");

    

     //Finally returns the control markup as string

     return new HtmlString(sb.ToString());

 }

Step 5: Compile the project.

Step 6: Open the view in which you want to render the above control.

Step 7: Add reference to the newly created control on top of your view:

@using <Your ProjectName>.<FolderName>

Example @using HtmlHelpers.Helpers

Step 8: Add following markup:

@Html.Div("divMyCustomDiv", @<text>

         <div>My Custom Markup</div>

         <span>More Stuff</span>

         </text>)