0

What's the "skeleton" code for using CsQuery in the code-behind of a MasterPage in order to modify the HTML output? I need to be able to modify everything in the <body> of the HTML?

I'm hoping to use CsQuery to "touch-up" the HTML output of a Dynamic Data website without rewriting / messing with the default code.

Just looking for sample code specific to MasterPage code-behind? Thanks.

1 Answer 1

1

There is an example in the CsQuery project that shows how to do this (which I just made sure was working right!) in the CsQuery.WebFormsApp project.

The core of the usage looks like this. You must override the Render method in a class that inherits Page, and use this instead of Page as the base class for the codebehind in an aspx page:

public class CsQueryPage: System.Web.UI.Page
{
    public CQ Doc { get; protected set; }

    protected override void Render(System.Web.UI.HtmlTextWriter writer)
    {
        // most of the work is done for you with the
        // `CsQuery.WebForms.CreateFromRender` method

        var csqContext = WebForms.CreateFromRender(this, base.Render, writer);

        // if you are using update panels, this lets you also manipulate that
        // HTML, otherwise you don't need the IsAsync part

        if (csqContext.IsAsync)
        {
            foreach (var item in csqContext.AsyncPostbackData) {
                 Cq_RenderUpdatePanel(item.Dom,item.ID);
            }
        }
        else
        {
            Doc = csqContext.Dom;
            Cq_Render();
        }

        // writes the altered content to the base HtmlTextWriter

        csqContext.Render();
    }

    protected virtual void Cq_Render() 
    { }

    protected virtual void Cq_RenderUpdatePanel(CQ doc, string updatePanelId) 
    { }
}

The two virtual methods are where you can alter the dom, which is populated in the Doc property of the CsQueryPage object - the intent of leaving them unimplemented here is that each aspx page that inherits CsQueryPage can optionally override them and make changes to the DOM.

To see how this works in practice just pull down the CsQuery code from github and run the example.

The same technique can be used for a UserControl which is also shown in the example. I don't actually show how to do it with MasterPage but it's very much the same-- MasterPage derives from UserControl, you just override it's Render method same as the other situations.

Sign up to request clarification or add additional context in comments.

2 Comments

Thanks github.com/jamietre/CsQuery/blob/master/examples/… is what I should've looked at. Worth asking though because I didn't realise that I needed extra code for UpdatePanels - which DynamicData projects utilise (although currently EnablePartialRendering="false" in my case).
It's actually a good thing you asked, because that example which I have not touched in a very long time had a couple bugs. Yeah- the update panels require special handling, only the part of the HTML that's actually in the panel gets passed through the control and each one has to be processed separately.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.