Tuesday, August 9, 2016

Using HTML in a Web.config file

I wanted some pop up contextual help in an app I was writing. I got to the point where my requirements were:

  1. Use the bootstrap "popover" so I could include HTML and style the pop-up
  2. Include the help text in the config so it could be easily changed in the future 
Here's how I did it. 


Step 1: add a new section to web.config – this will prevent the text from needing to be escaped or treated with any special handlers

<section name="contextHelp" type="System.Configuration.IgnoreSectionHandler" allowLocation="false" />



Step 2: add the values for the section – I’m using CDATA to hide the markup and that should be sufficient for hyperlinks or images too

<contextHelp>
    <groupTitle><![CDATA[A group title with specific identifying information will be easy to search for later.<br /><br />Use specific hierarchy to help.
]]>

    </groupTitle>
</contextHelp>

Step 3: add code to read the config in the code-behind

protected string HelpTextTitle { get; set; }

protected new void Page_Init(object sender, EventArgs e)
{
  // Help Sections
  XmlDocument doc = new XmlDocument();
  doc.Load(AppDomain.CurrentDomain.SetupInformation.ConfigurationFile);
  HelpTextTitle = doc.SelectSingleNode("/configuration/contextHelp/groupTitle").FirstChild.Value;
}

Step 4: add values into markup

<a href="#" rel="group_title"><i class="fa fa-question-circle"></i></a>
<script>
$(document).ready(function () {
       $("[rel=group_title]").popover({
             title : 'Group Title', 
             html: 'true', 
             trigger: 'focus', 
             content: '<%=HelpTextTitle %>'
       });
});
</script>


No comments:

Post a Comment