Monday, August 31, 2015

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