Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!

Anders Hattestad
Feb 11, 2014
  18762
(1 votes)

How to get html from a view and change the content in MVC

There are times you want to manipulate the html after it has created to change image references, or change the links outputted to friendly URL’s. Here is a trick how to get the content out of a view in MVC and use the HtmlAgilityPack to change the content.

If you have a view you want to render, for instance in the _Layout.cshtml and you want to change html you could have lines like this:

    @Html.PropertyForWithChangeHtml(p => p.StartPage.Row1)
    @Html.RenderViewWithChange("~/Views/MasterPages/HtmlFooter.cshtml", Model)

The extension code that will render the PropertyFor is like this:

public static MvcHtmlString PropertyForWithChangeHtml<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression)
{
    return PropertyForWithChangeHtml(html, expression, null);
}
public static MvcHtmlString PropertyForWithChangeHtml<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, object additionalViewData)
{
    var result = html.PropertyFor(expression, additionalViewData);
    var htmlTxt = result.ToString();
    var htmlTxtChanged = ChangeHtml(htmlTxt);
    return new MvcHtmlString(htmlTxtChanged);
}

And the code that will render a view is like this

public static MvcHtmlString RenderViewWithChange(this HtmlHelper html, string viewName, object model)
{
    var htmlTxt = RenderViewToString(html.ViewContext, viewName, model);
    var htmlTxtChanged = ChangeHtml(htmlTxt);
    return new MvcHtmlString(htmlTxtChanged);
}
public static string RenderViewToString(ControllerContext context, string viewName, object model)
{
    if (string.IsNullOrEmpty(viewName))
        viewName = context.RouteData.GetRequiredString("action");

    ViewDataDictionary viewData = new ViewDataDictionary(model);

    using (var sw = new StringWriter())
    {
        ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName);
        ViewContext viewContext = new ViewContext(context, viewResult.View, viewData, new TempDataDictionary(), sw);
        viewResult.View.Render(viewContext, sw);

        return ChangeHtml(sw.GetStringBuilder().ToString());
    }
}

The actully changing of the html is easy with the HtmlAgilityPack. This code will ensure that all links are friendly EPiServer URL's

public static string ChangeHtml(string html)
{
        var doc = new HtmlDocument();
        doc.LoadHtml(html);
        FiksNodes(doc.DocumentNode);
        return doc.DocumentNode.OuterHtml;
}

public static void FiksNodes(HtmlNode node)
{
    if (node.Attributes.Contains("href"))
    {
        var val = node.Attributes["href"].Value;
        ChangeLinkToFriendly(node, val, "href");
    }
    if (node.Name == "form" && node.Attributes.Contains("action"))
    {
        var val = node.Attributes["action"].Value;
        ChangeLinkToFriendly(node, val, "action");
    }
    for (int i = 0; i < node.ChildNodes.Count; i++)
    {
        FiksNodes(node.ChildNodes[i]);
    }
}
private static void ChangeLinkToFriendly(HtmlNode node, string val, string key)
{
    if (val.StartsWith("/link/"))
    {
        var decoded = HttpUtility.HtmlDecode(val);
        var url = new UrlBuilder(decoded);
        PageReference pageRef = null;
        if (url.QueryCollection["id"] != null && PageReference.TryParse(url.QueryCollection["id"], out pageRef))
        {
            EPiServer.Global.UrlRewriteProvider.ConvertToExternal(url, pageRef, System.Text.UTF8Encoding.UTF8);
            node.Attributes[key].Value = url.Uri.IsAbsoluteUri ? url.Uri.AbsoluteUri : url.Uri.OriginalString;
        }
        else
        {
            EPiServer.Global.UrlRewriteProvider.ConvertToExternal(url, null, System.Text.UTF8Encoding.UTF8);
            node.Attributes[key].Value = url.Uri.IsAbsoluteUri ? url.Uri.AbsoluteUri : url.Uri.OriginalString;
        }
        node.Attributes.Add("data-changed-" + key + "-from", val);
    }
}
Feb 11, 2014

Comments

Arve Systad
Arve Systad Feb 11, 2014 10:22 AM

But why write your markup in a way that makes you need to change it afterwards?

And adding the "data-changed" attributse also makes dirty markup.

Anders Hattestad
Anders Hattestad Feb 11, 2014 10:25 AM

It's just an example :)
If you need to change all img tags inside a XhtmlString property, this is a way of doing it.
It could be to Ensure alt tags, or to make the images responsive.

May 21, 2015 10:34 AM

Hi In this case what will be the return type of Action Result..?

Can you please help me i need help regarding same i have same problem..

May 21, 2015 10:36 AM

Actuallly then MOdel validation is not working for me have you any idea that how to do model validation in above approach.

Please login to comment.
Latest blogs
Google Read Aloud Reload Problems

Inclusive web experiences greatly benefit from accessibility features such as Google Read Aloud. This tool, which converts text into speech, enable...

Luc Gosso (MVP) | Dec 4, 2023 | Syndicated blog

Google Read Aloud Reload Problems

Inclusive web experiences greatly benefit from accessibility features such as Google Read Aloud. This tool, which converts text into speech, enable...

Luc Gosso (MVP) | Dec 4, 2023 | Syndicated blog

Import Blobs and Databases to Integration Environments

In this blog, we are going to explore some new extensions to the Deployment API in DXP Cloud Services, specifically the ability to import databases...

Elias Lundmark | Dec 4, 2023

Join the Work Smarter Webinar: Working with the Power of Configured Commerce (B2B) Customer Segmentation December 7th

Join this webinar and learn about customer segmentation – how to best utilize it, how to use personalization to differentiate segmentation and how...

Karen McDougall | Dec 1, 2023

Getting Started with Optimizely SaaS Core and Next.js Integration: Creating Content Pages

The blog post discusses the creation of additional page types with Next.js and Optimizely SaaS Core. It provides a step-by-step guide on how to...

Francisco Quintanilla | Dec 1, 2023 | Syndicated blog

Stop Managing Humans in Your CMS

Too many times, a content management system becomes a people management system. Meaning, an organization uses the CMS to manage all the information...

Deane Barker | Nov 30, 2023