如何在MVC4中借助Bootstrap在父视图中布局分部视图？

AI 小北

2026-5-27

解决方案：拆分分部视图到父视图的指定位置

嘿，我来帮你搞定这个问题！你现在是想把原来打包在_PartialABC里的四个子分部视图，分散到父视图的不同区域展示，而不是都挤在一个容器里对吧？其实很简单，你只需要直接在父视图的目标位置分别渲染每个子分部视图，不用再通过_PartialABC这个中间视图来包裹它们了。

修改后的父视图代码

你可以把父视图里的代码改成这样，直接在对应的位置调用每个分部视图，并传递正确的模型属性：

<div class="col-md-7">
    <div class="panel panel-default">
        <div class="panel-heading">
            ABC
        </div>
        <div class="panel-body">
        </div>
        <div id="container">
            <!-- 在这里渲染_PartialA -->
            @{ Html.RenderPartial("_PartialA", Model.firsts); }
        </div>
    </div>
</div>
<div class="col-md-5">
    <div class="panel panel-default">
        <div class="panel-heading">
            <!-- 在这里渲染_PartialB -->
            @{ Html.RenderPartial("_PartialB", Model.seconds); }
        </div>
        <div class="panel-body">
            <!-- 在这里渲染_PartialC -->
            @{ Html.RenderPartial("_PartialC", Model.thirds); }
            <!-- 在这里渲染_PartialD -->
            @{ Html.RenderPartial("_PartialD", Model.fourths); }
        </div>
    </div>
</div>

为什么这么改？

原来的_PartialABC是把四个子分部视图打包在一起渲染，现在你需要拆分它们，就直接跳过这个中间层，在父视图的每个目标位置单独调用Html.RenderPartial（或者@Html.Partial()，两者的区别是RenderPartial直接输出到响应流，Partial返回一个MvcHtmlString），并把对应的模型属性（比如Model.firsts对应_PartialA的模型）传递过去就行。