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>)