Question

i have created a partial view layout using bootstrap to display a single panel. whenever I call a partial view I use this layout and pass the section name on the ViewBag.

<div class="panel panel-default">
    <div class="panel-heading">
        @ViewBag.SectionName            
    </div>
    <div class="panel-body">
        <div class="container">
            @RenderBody()
        </div>
    </div>
</div>

However, the issue is that inside a partial view, I may be calling another partial view using the same layout multiple times. This would result in nested panels with multiple levels.

The issue is, that I want to add a header element to the panel heading element containing the section name depending on the partial view nesting level. If we had three levels, the code would look like this:

<div class="panel panel-default main-content-panel">
    <div class="panel-heading">
        <h1>Section 1</h1>
    </div>
    <div class="panel-body">
        <div class="container">
            <div class="panel panel-default main-content-panel">
                <div class="panel-heading">
                    <h2>Section 2</h2>
                </div>
            <div class="panel-body">
                <div class="container">
                   <div class="panel panel-default main-content-panel">
                       <div class="panel-heading">
                           <h3>Section 3</h3>
                       </div>
                      <div class="panel-body">
                          <div class="container">
                              Some content and respective closing divs....

how could I accomplish this? An idea or solution that does not uses JS will be appreciated.

Answer 1

JS肯定是最简单的方式，但由于你明确禁止这种方式，唯一的选择是评估之前的嵌套级别实际渲染。

这里有关于什么数据结构代表这些部分的详细信息，但通常情况下，您需要在渲染上层时对较低级别进行递归计数，并在部分负责中相应地更改标题为了它。如果没有更多代码，我无法提供更多指导。

长而短，当渲染部分时，你只会在苹果上咬一口。你不能等到最后，然后修改先前渲染的部分中发生的事情。

Set header html element level dynamically depending on partial view nesting

1 个答案: