Bootstrap 模板：为所有视图使用模板答案

【问题标题】：Bootstrap Template: Using the template for all the viewsBootstrap 模板：为所有视图使用模板
【发布时间】：2019-03-04 01:33:26
【问题描述】：

我正在尝试将 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>

【问题讨论】：

你能安装这个带 ngrok ngrok.com/download 并检查如何运行它，然后你可以将生成的 url 发送给我，这样我就可以在你的电脑上连接到你的开发站点并检查这个模板问题？
或者一般来说，为了在您的 asp.net 项目 _Layout.cshtml 文件中进行模板化，您应该从模板索引或布局文件中插入整个代码。和代码之上的代码。内的内容你应该放入你的 index.cshtml 或任何其他你希望显示的路由页面中。
是的。事实上，我正在编辑导航栏的按钮来调用所需的控制器和操作。呈现信息时出现问题。它没有转到模板的主体，而是放在顶部。我不能只为html添加href，因为它必须通过控制器访问数据库。

标签： css asp.net twitter-bootstrap

【解决方案1】：

解决了。

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

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

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

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

最后的图片是这样的：

【讨论】：