MVC 局部视图在主视图中未正确呈现

Question

问题背景：

我有一个从 ActionLink 方法调用的 MVC 局部视图，并从传递的视图模型中呈现一个下拉列表。除此之外，我在这个项目中使用了 Twitter Bootstrap 框架。

问题：

部分视图未正确呈现 - 按钮从看起来额外添加的内容向右对齐 HTML，部分视图中不存在 HTML

代码：

调用Components控制器和GetComponents方法的主视图

  <div class="jumbroTronTop">
    <div class="jumbotron">
        <h3><b>Files Release Page</b></h3>
        <div class="btn-toolbar">
            <div class="btn-group">

                    //*****Partial View is called*****
                    @Html.Action("GetComponents", "Component")
            </div>
            <div class="btn-group">
                <button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">
                    Codebase <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>

        </div>
    </div>
</div>

GetComponents.cshtml - 局部视图：

@model ToolsReleasePage.Models.ViewModels.VMComponentNameList

<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
Component <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="componentNameList">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
</ul>

@foreach (var component in @Model.ComponentNames)
{
    <script>
       //Call code to populate dropdown list.
    </script>
}

问题似乎出在哪里：

查看 Chrome 中的控制台，我还可以看到，它似乎被包裹在以下 HTML 中，而不仅仅是部分视图中的纯 HTML -我不知道它是从哪里添加的：

<link rel="shortcut icon" type="image/x-icon" href="/Content/LoadingImageFavicon.ico">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>

<script src="/Scripts/modernizr-2.6.2.js"></script>

<div class="container-fluid">

//Partial View Html

我不知道为什么要添加这个 HTML，但我确定包裹按钮的流体容器是问题所在。如何渲染部分视图以不包含此额外内容 HTML?

Answer 1

您可能 return 从 GetComponents 操作中 View，而您实际上想要 return PartialView.

A View 将使用定义的 Layout（或默认的 Layout）渲染 razor 文件，而 PartialView 将渲染 razor 视图而不Layout.

MVC 局部视图在主视图中未正确呈现

MVC Partial View is not rendering correctly in main View

asp.net-mvc

twitter-bootstrap

asp.net-mvc-4

partial-views

asp.net-mvc-partialview