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

【问题标题】：MVC Partial View is not rendering correctly in main ViewMVC 局部视图在主视图中未正确呈现
【发布时间】：2015-05-08 11:45:45
【问题描述】：

问题背景：

我有一个从 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？

【问题讨论】：

您的GetComponents 操作是什么样的？您可能返回的是 View 而不是 PartialView
@BrendanGreen 我不敢相信我居然错过了！你是 100% 正确的，我在方法中将它设置为视图而不是部分。请将此作为答案，我将其标记为正确。

标签： asp.net-mvc twitter-bootstrap asp.net-mvc-4 partial-views asp.net-mvc-partialview

【解决方案1】：

当您实际上想要返回 PartialView 时，您可能会从 GetComponents 操作返回 View。

View 将使用定义的Layout（或默认的Layout）呈现剃须刀文件，而PartialView 将在没有Layout 的情况下呈现剃须刀视图。

【讨论】：