Home How to follow/debug html creation in ASP.net
Reply: 1

How to follow/debug html creation in ASP.net

ILOABN
1#
ILOABN Published in 2017-12-06 08:20:23Z

I'm trying to find out where an extra div is inserted and how I would go about removing it.

In our Index.cshtml file we have this:

<div id="an-id">
    @Html.DisplayFor(m => m.BottomArticleListContentArea, new { ViewName = "_ArticleListBlockNoHeader" })
</div>

And in our _ArticleListBlockNoHeader.cshtml view the code looks like this:

@if (Model != null)
{
    for (int i = 0; i < Model.Items.Count; i++)
    {
        var article = Model.Items[i];
        <div class="item" data-articleid="@article.ArticleId">
        Item @article.ArticleId
        </div>
    }
}

BottomArticleListContentArea is a ContentArea and is handled by this DisplayTemplate:

@model ContentArea
@if (Model != null)
{
    Html.RenderContentArea(Model);
}

As you can see, it doesn't really do anything except check if it's null. Oh... Maybe it does more things!

When I look at the generated html it looks like this:

<div id="an-id">
<div><div>

    <div class="item" data-articleid="1">Item 1</div>
    <div class="item" data-articleid="2">Item 2</div>
    <div class="item" data-articleid="3">Item 3</div>
    <div class="item" data-articleid="4">Item 4</div>
    <div class="item" data-articleid="5">Item 5</div>
</div></div>
</div>

Notice how on row 2 and 9 there is two divs (<div><div> and </div></div>) that are not in the code I just shared above.

My hypothesis is now that these two divs might be added by some extension method somewhere or some handler or something else. I'm not familiar with the entire codebase and I'm fairly new with ASP.net so my knowledge of the insertion points in ASP.net is very limited.

Where could these two divs come from? And how can I start looking for them?

If something is missing in the question, please let me know, tried to be brief so that it would be easier to read and understand 😊

Thanks in advance!

Edit:

Made a mistake while cleaning the code, added back so that the result is what's generated by the code.

The HTML results above is what is returned and captured using fiddler. No JS has started running while the DOM is recorded.

Added the display template used.

ILOABN
2#
ILOABN Reply to 2017-12-06 15:10:23Z

This is the current solution that I have right now and I'm going to try out for a while:

(highly EPiServer specific)

Instead of letting it be rendered using RenderContentArea we're taking control over it and creating it the "raw" way with RenderContentData

foreach (var content in Model.FilteredItems)
{
    Html.RenderContentData(content.GetContent(), false, Model.Tag);
}

This gets rid of all the extra divs and make it behave just the way we want it, just the way it seen when we read the code. Yes, with this we're also loosing the ability to edit the page directly in epi visually. But that's something we need to look into later, for now, it works and I'm happy.

I also wrote this extended version that lets me choose if I want to skip the wrappers or not like this (notice DisableWrapper = true)

@Html.DisplayFor(m => m.ContentArea, new { DisableWrapper = true, ViewName = "_ArticleList" })

That can be done if I instead change the first code snippet to this:

var disableWrapper = Html.ViewContext.ViewData["DisableWrapper"] as bool?;

if (disableWrapper.GetValueOrDefault())
{
    foreach (var content in Model.FilteredItems)
    {
        Html.RenderContentData(content.GetContent(), false, Model.Tag);
    }
}
else
{
    Html.RenderContentArea(Model);
}

This works and seems to produce the results I'm looking for. As stated previously, I haven't worked in this field for that long so if there's any suggestions or tips, I'd love to hear that and be able to improve my solution both here and in the project.

Thanks for the helpful comments that made me finally arrive at this solution!

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306233 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO