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

How to follow/debug html creation in ASP.net

user2577
1#
user2577 Published in June 19, 2018, 7:51 pm

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.

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO