Bootstrap 模板:对所有视图使用模板 [英] Bootstrap Template: Using the template for all the views

查看:30
本文介绍了Bootstrap 模板:对所有视图使用模板的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

预期价值:

当前价值:

问题:

我想弄清楚如何将这些组件(内部索引视图和布局)一起显示,如图 1 所示.

为此,我在_Layout中找到了封装Plain Page部分的代码:

我应该在那个部分调用我的索引视图吗?如何?

PartialView 敲响了警钟.

调用控制器和操作:

 
  • <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">Tiendas编辑</a></li>
  • 模板内应显示索引的部分:

     

    <div class="col-md-12 col-sm-12 col-xs-12"><div class="x_panel"><div class="x_title"><h2>普通页面</h2><ul class="nav navbar-right panel_toolbox"><li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
  • <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="#">设置 1</a>
  • <li><a href="#">设置 2</a><li><a class="close-link"><i class="fa fa-close"></i></a><div class="clearfix"></div>

    <div class="x_content">向页面添加内容...

    索引视图示例:

    @model IEnumerable@using Application.Models@{ViewData["标题"] = "索引";}@Html.Partial("_NavBar")<h2>Tiendas</h2>@*data-toggle 告诉 bootstrap 要做什么*@@*data-target 告诉引导程序要打开哪个元素*@<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>新天地</a>

    <p></p><table id="stores" class="table table-bordered table-hover table-striped"><头><tr><th>省</th><th>马卡商业</th><th>卡德纳</th><th>天达</th><th>编辑器</th></tr></thead>@foreach(模型中的变量项目){<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">编辑</a>

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

    解决方案

    已解决.

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

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

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

    我们必须小心这一点,因为脚本可能会在本地运行,但不会因为放置不当而在项目投入生产后运行.

    最后的图是这样的:

    I'm trying to add the Gentelella template to my ASP.NET Core project.

    The main problem is that the content of my current pages (any index page) is not merged with the template:

    Expected Value:

    Current Value:

    The problem:

    I'm trying to figure out how to show these components (index view inside and layout) together, as shown in picture 1.

    For this, I found the code inside the _Layout that encapsulates the Plain Page section:

    Should I make the call of my index view in that section? How?

    PartialView rings a bell.

    Calling the Controllers and actions:

                                  <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>
    

    Section inside the Template where the Index should show:

                      <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>
    

    Example of Index View:

    @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>
    

    解决方案

    Solved it.

    The proper way to position your Index view inside the _Layout is using the @RenderBody() wherever you want to load your view information.

    In this case, it was where I indicated it in the question.

    There is also the option to render your scripts, if any. @RenderSection("Scripts", required: false)

    We have to be careful with that since the script might run locally but not once the project is in production because of bad placement.

    The final picture is this:

    这篇关于Bootstrap 模板:对所有视图使用模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    相关文章
    C#/.NET最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆