Question

I need to do some styling to a bunch of webforms, containing articles formatted in a rather uniform way. I can change any source code I want.

What I need is a quick way to dynamically create a navigation menu (on the server side) for an ASP.NET webform, based on contents of a specified div.

For example, given the following HTML:

<div id="article">

   <h2 id="first">Chapter 1</h2>
      <p>Some text...</p>

   <h2 id="second">Chapter 2</h2>
      <p>Some other text</p>

</div>

I would like to insert something like this at the end (and render it at the server side, not in a script):

<div id="navigation">
  <ul>
       <li><a href="#first">Chapter 1</a></li>
       <li><a href="#second">Chapter 2</a></li>
  </ul>
</div>

NOTE: I know I could iterate through parent div’s child controls in codebehind (although I would need to make them all “run at server”, or even parse the InnerHtml property of the parent div), but if feels pretty weird.

Also, I am aware that if the article was being created from a data source, I would have the content already organized, but I would like to make as little changes needed in the existing pages.

Answer 1

You could search for the headings with a RegEx and render the navigation from the results. Something like "<h2 id=\"([^\"]+)\">([^<]+)</h2>" would get you the id in the first and the caption in the second group.