ASP.NET - Using HAP (HTML Agility Pack) to Add Class References During Render

Question

Is it possible to use the HAP (HTML Agility Pack) to:

1. Grab a collection of nodes e.g. all <a> elements which are children of <li> elements
2. Iterate over the collection
3. Add CSS class references into the class attribute for each element e.g. class &= "foo"
4. Update the nodes in their original position within the HTML

For point 4, I need to know whether:

• When I grab a collection of nodes, am I working with copies?
• If so, can I easily update the nodes in their original position within the HTML

Finally, would it be practical to do this when rendering a page in an ASP.NET website, considering:

• I will need to modify the class references for no more than 100 elements
• I am not working with large HTML documents
• I plan to select my nodes starting at a div e.g. div[2] where body contains 4 divs

I realise that this may seem like a bunch of separate questions but really it is just a breakdown of the following two questions:

• Can I easily modify the HTML output of an ASP.NET page e.g. to insert class references?
• Would it be practical to do this on 50 - 100 elements WRT speed e.g. no more than 2 seconds cost?

Many thanks.

Answer 1

Don't do that ! ASP.NET is not meant to be used that way, there is a better ways to do this task depending on how do you create that markup in witch you want change or add css classes. ASP.NET uses aspx templates, basically html markup and there you can intervene with code executing on server, here you can set css class statically or use server side scripts to set css class on markup with some code.

You can also create controls in code behind and set css to controls if anchor control have parent that is list item control (you will have to use server side controls).

To do it your way you will have to make Response Filter (example here) and after request is done do your parsing and write results and changes back to response stream. It's much easier using common ASP.NET techniques.

Answer 2

Check out my CsQuery project: https://github.com/jamietre/csquery or on nuget as "CsQuery".

This is a C# (.NET 4) port of jQuery. Selectors are orders of magnitude faster than HTML Agility Pack; in fact, my initial purpose in writing it was to do exactly what you want to do: manipulate HTML in real time. As it happens, from a CMS with html generated by ckeditor.

To intercept HTML in webforms with CsQuery you do this in the page codebehind:

using CsQuery;
using CsQuery.Web;

protected override void Render(HtmlTextWriter writer)
{

   // the CsQueryHttpContext object is part of the CsQuery library, it's a helper 
   // than abstracts the process of intercepting base.Render() for you.

    CsQueryHttpContext csqContext = 
        WebForms.CreateFromRender(Page, base.Render, writer);

    // CQ object is like a jQuery object. The "Dom" property of the context
    // returned above represents the output of this page.

    CQ doc = csqContext.Dom;

    doc["li > a"].AddClass("foo");

    // write it
    csqContext.Render();
}

There is basic documentation on GitHub, but apart from getting HTML in and out, it works pretty much like jQuery. The WebForms object above is just to help you handle interacting with the HtmlTextWriter object and the Render method. The general-purpose usage is very simple:

var doc = CQ.Create(htmlString);
// or 
var doc = CQ.CreateFromUrl(url);

.. do stuff with doc, a CQ object that acts like a jQuery object

string html = doc.Render();