css - Bootstrap 模板：为所有视图使用模板

问题描述

我正在尝试将 Gentelella 模板添加到我的 ASP.NET Core 项目中。

主要问题是我当前页面（任何索引页面）的内容没有与模板合并：

期望值：

当前值：

问题：

我试图弄清楚如何将这些组件（内部的索引视图和布局）一起显示，如图 1 所示。

为此，我在 _Layout 中找到了封装该Plain Page部分的代码：

我应该在该部分中调用我的索引视图吗？如何？

PartialView敲响了警钟。

调用控制器和操作：

                              <li>
                                  <a><i class="fa fa-edit"></i> Tiendas <span class="fa fa-chevron-down"></span></a>
                                  <ul class="nav child_menu">
                                      <li><a asp-area="" asp-controller="Stores" asp-action="Index">Nueva Tienda</a></li>
                                      <li><a href="~/Shared/_Navbar.cshtml">Editar Tiendas</a></li>
                                  </ul>
                              </li>

模板内应显示索引的部分：

                  <div class="row">
                      <div class="col-md-12 col-sm-12 col-xs-12">
                          <div class="x_panel">
                              <div class="x_title">
                                  <h2>Plain Page</h2>
                                  <ul class="nav navbar-right panel_toolbox">
                                      <li>
                                          <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                      </li>
                                      <li class="dropdown">
                                          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                          <ul class="dropdown-menu" role="menu">
                                              <li>
                                                  <a href="#">Settings 1</a>
                                              </li>
                                              <li>
                                                  <a href="#">Settings 2</a>
                                              </li>
                                          </ul>
                                      </li>
                                      <li>
                                          <a class="close-link"><i class="fa fa-close"></i></a>
                                      </li>
                                  </ul>
                                  <div class="clearfix"></div>
                              </div>
                              <div class="x_content">
                                  Add content to the page ...
                              </div>
                          </div>
                      </div>
                  </div>

索引视图示例：

@model IEnumerable<Application.Models.Tienda>
    @using Application.Models
    @{
        ViewData["Title"] = "Index";
    }
    @Html.Partial("_NavBar")



    <h2>Tiendas</h2>
@*data-toggle tells bootstrap what to do*@
@*data-target tells bootstrap which element is going to open*@
    <div class="btn-group" id="modalbutton">
        <a id="createEditStoreModal" data-toggle="modal" asp-action="Create" data-target="#modal-action-store"
            class="btn btn-primary">
                <i class="glyphicon glyphicon-plus"></i>  Nueva Tienda
            </a>
    </div>
    <p></p>
    <table id="stores" class="table table-bordered table-hover table-striped">
        <thead>
            <tr>
                <th>
                    Provincia
                </th>
                <th>
                    Marca Comercial
                </th>
                <th>
                    Cadena
                </th>
                <th>
                    Tienda
                </th>
                <th>Editar</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Districts.Provincias.provincia_nombre)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.tienda_marca)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.tienda_cadena)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.tienda_nombre)
                    </td>
                    <td>
                        <div class="btn-group" id="modalbuttonedit">
                            <a id="editStoreModal" data-toggle="modal" asp-action="Create"
                                data-target="#modal-action-store" asp-route-id="@item.tienda_id" class="btn btn-info">Edit</a>
                        </div>

                    </td>
                </tr>}
        </tbody>
    </table>

标签： cssasp.nettwitter-bootstrap

解决了。

将索引视图放置在 _Layout 中的正确方法是使用@RenderBody()要加载视图信息的任何位置。

在这种情况下，这是我在问题中指出的地方。

如果有的话，还可以选择渲染脚本。@RenderSection("Scripts", required: false)

我们必须小心这一点，因为脚本可能会在本地运行，但由于放置不当，一旦项目投入生产就不会运行。

最后的图片是这样的：

css - Bootstrap 模板：为所有视图使用模板

问题描述

解决方案

推荐阅读