visual studio 2015, resharper, razor and formatting embedded html - asp.net-mvc

Question

I am running visual studio 2015 with resharper with an mvc application. I have a View in which I want to create a set of nested div tags, a la:
<div>
<label>...
<div>
<label>...
<label>...
<label>...
</div>
<div>
<div>
<label>...
<label>...
</div>
<label>...
<label>...
</div>
</div>
I have code like
<div class="content">
#{
var count = 0;
var depthList = new Stack<int>();
<text>
<div class="NestedSelect">
</text>
foreach (var category in Model.OrderBy(m => m.LeftLink)) {
if (depthList.Count == 0) {
depthList.Push(category.Depth);
<text>
<label>
<input type="radio" name="categories" value="#category.Id"><span>#category.Name</span>
</label>
</text>
} else if (category.Depth > depthList.Peek()) {
depthList.Push(category.Depth);
<text>
<div>
<label>
<input type="radio" name="categories" value="#category.Id"><span>#category.Name</span>
</label>
</text>
} else if (category.Depth == depthList.Peek()) {
<text>
<label>
<input type="radio" name="categories" value="#category.Id"><span>#category.Name</span>
</label>
</text>
} else {
while (category.Depth < depthList.Peek()) {
depthList.Pop();
//####
<text>
</div>
</text>
}
<text>
<label>
<input type="radio" name="categories" value="#category.Id"><span>#category.Name</span>
</label>
</text>
}
//####
<text>
</div>
</text>
count++;
if (count == 0) {
}
}
}
</div>
EDIT
Notice the wonky <text></div></text> blocks (marked with //####) inside the loop. VS and/or resharper are very put out that my closing div tags do not seem to have mates. The opening <text> tags are highlighted in the editor but the ending </text> tags are not. They have an error underline and the tooltip "End tag is missing matching start tag".
I have tried using the #: constructs but when the code is formatted it puts the #: on a line by itself and then gets confused with the naked html tags.
How does one build nested html structures with this?

Answer 1

The #: construct should be used here as you suggested,but only on the tags that are causing the issue.
try something like this:
<div class="content">
#{
var count = 0;
var depthList = new Stack<int>();
<text>
<div class="NestedSelect">
</text>
foreach (var category in Model.OrderBy(m => m.LeftLink))
{
if (depthList.Count == 0)
{
depthList.Push(category.Depth);
<text>
<label>
<input type="radio" name="categories" value="#category.Id"><span>#category.Name</span>
</label>
</text>
}
else if (category.Depth > depthList.Peek())
{
depthList.Push(category.Depth);
#:<div>
<text>
<label>
<input type="radio" name="categories" value="#category.Id"><span>#category.Name</span>
</label>
</text>
}
else if (category.Depth == depthList.Peek())
{
<text>
<label>
<input type="radio" name="categories" value="#category.Id"><span>#category.Name</span>
</label>
</text>
}
else
{
while (category.Depth < depthList.Peek())
{
depthList.Pop();
#:</div>
}
<text>
<label>
<input type="radio" name="categories" value="#category.Id"><span>#category.Name</span>
</label>
</text>
}
#:</div>
count++;
if (count == 0)
{
}
}
}

Answer 2

You should use #: construct if you are not obsessed with formatting.
#: </div>
If you are, consider using WriteLiteral :
WriteLiteral("</div>");