Anders Hattestad
Feb 11, 2014
  19098
(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
The missing globe can finally be installed as a nuget package!

Do you feel like you're dying a little bit every time you need to click "Options" and then "View on Website"? Do you also miss the old "Globe" in...

Tomas Hensrud Gulla | Feb 14, 2025 | Syndicated blog

Cloudflare Edge Logs

Optimizely is introducing the ability to access Cloudflare's edge logs, which gives access to some information previously unavailable except throug...

Bob Davidson | Feb 14, 2025 | Syndicated blog

Comerce Connect calatog caching settings

A critical aspect of Commerce Connect is the caching mechanism for the product catalog, which enhances performance by reducing database load and...

K Khan | Feb 14, 2025

CMP DAM asset sync to Optimizely Graph self service

The CMP DAM integration in CMS introduced support for querying Optimizly Graph (EPiServer.Cms.WelcomeIntegration.Graph 2.0.0) for metadata such as...

Robert Svallin | Feb 13, 2025