首页 > 编程语言 >asp.net core3.1 使用RenderSection和Section

asp.net core3.1 使用RenderSection和Section

时间:2023-03-14 15:46:52浏览次数:43  
标签:RenderSection asp ViewBag Section content below bit Id

 

我们使用公共文件,常常会用到同样的头部和尾部,那么就可以使用了

 

 

 

 

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Book store application</title>
    <link href="~/css/site.css" rel="stylesheet" />
    <link href="~/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <header class="container">
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
          <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src="~/image//logo.jpg" width="30" height="30"/>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse d-sm-inline-block flex-sm-row-reverse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="btn btn-outline-primary">Login</a>
                  <a class="btn btn-primary">Register</a>
                </li>
              </ul>
              <ul class="navbar-nav flex-grow-1">
                  <li class="nav-item">
                      <a  href="/" class="nav-link text-dark">Home</a>
                  </li>
                  <li class="nav-item">
                      <a href="/home/ContactUs" class="nav-link text-dark">About</a>
                  </li>
                <li class="nav-item">
                     <a href="/home/AboutUs" class="nav-link text-dark">Contact</a>
                </li>
                <li class="nav-item">
                      <a href="/book/getallbook" class="nav-link text-dark">All Books</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
    </header>
    <div class="container">
        @RenderSection("breadcrumb",required:false)
    </div>
 
    <main>
        @RenderBody()
    </main>
    <footer class="border-top footer text-muted text-center">
        <div class="container">
            Coryright &copy; Book Store @DateTime.Now.Year
        </div>
    </footer>

    <script src="~/lib/jquery/jquery.min.js"></script>
    <script src="~/lib/twitter-bootstrap/js/bootstrap.min.js"></script>
    @RenderSection("scripts",required:false);
</body>
</html>

 

 

 

那么子文件呢,就是body的,或者他们的顺序

 

 

 

 

 

 

@{
    dynamic data = ViewBag.Data;
    var bookInfo = ViewData["book"] as BookModel;
}


  @section breadcrumb{
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">Library</a></li>
                <li class="breadcrumb-item active" aria-current="page">Index</li>
            </ol>
        </nav>
    }
<main>
    <section class="jumbotron py-5 text-center container">
        <h1>welcome to bookstore @ViewBag.Title</h1>
        <div class="row py-lg-5">
            <div class="col-lg-6 col-md-8 mx-auto">
                <h1 class="fw-light">Album example</h1>
                <p class="lead text-muted">
                    @data.Id @data.Name <br />
                    [email protected]<br />
                    [email protected]<br />
                    Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
                <p>
                    <a href="#" class="btn btn-primary my-2">Main call to action</a>
                    <a href="#" class="btn btn-secondary my-2">Secondary action</a>
                </p>
                <h1>1222 @bookInfo.Id</h1>
                <h1>222 @bookInfo.Author</h1>
            </div>
        </div>
    </section>

    <div class="album py-5 bg-light">
        <div class="container">
            <h3 class="h3">Top books</h3>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                <div class="col">
                    <div class="card shadow-sm">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
                        <div class="card-body">
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card shadow-sm">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
                        <div class="card-body">
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card shadow-sm">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
                        <div class="card-body">
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
 
            </div>
        </div>
    </div>
</main>

@section scripts{
       
}

 

 

 

 

 

他们头部应该是有,_ViewStart.cshtml页面

@{
    Layout = "_Layout";
}

 

 

 

 

 

 

 

 

 

 

还有引入的值,_ViewImports.cshtml页面

@using Webgentle.BookStore.Models;

 

标签:RenderSection,asp,ViewBag,Section,content,below,bit,Id
From: https://www.cnblogs.com/hechunfeng/p/17215148.html

相关文章

  • ASP.NET Core - 配置系统之自定义配置提供程序
    4.自定义配置提供程序在.NETCore配置系统中封装一个配置提供程序关键在于提供相应的IconfigurationSource实现和IConfigurationProvider接口实现,这两个接口在上一......
  • 学习ASP.NET Core Blazor编程系列二十八——JWT登录(3)
    学习ASP.NETCoreBlazor编程系列文章之目录学习ASP.NETCoreBlazor编程系列一——综述学习ASP.NETCoreBlazor编程系列二——第一个Blazor应用程序(上)学习A......
  • asp.net mvc5部署到IIS 403 - 禁止访问: 访问被拒绝。
    asp.netmvc5部署到IIS403-禁止访问:访问被拒绝。各种检查,修改web.config,权限...都无果此时,检查一下你项目下是否缺少Global.asax文件......
  • 【ASP.NET Core】修改Blazor.Server的Hub地址后引发的问题
    BlazorServer,即运行在服务器上的Blazor应用程序,它的优点是应用程序在首次运行时,客户端不需要下载运行时。但它的代码是在服务器上执行的,然后通过SignalR通信来更新客......
  • 遭遇奇怪的问题:所有 ASP.NET Core ViewComponent 都输出为空
    3月9日晚上的一次发布中遇到一个非常奇怪的问题,发布前在staging环境测试正常,发布到生产环境后发现所有ViewComponent都输出为空(没有任何内容)。生产环境与staging环......
  • C# ASP.NET MVC 配置允许跨域访问
    在web.config文件中的system.webServer节点下增加如下配置<httpProtocol><customHeaders><addname="Access-Control-Allow-Origin"value="*"/>......
  • ASP.NET Core - 配置系统之配置提供程序
    3.配置提供程序上面提到,通过IConfigurationBuilder的实现类对象,我们可以自由地往配置系统中添加不同的配置提供程序,从而获取不同来源的配置信息。.NETCore中,微软提供......
  • ASP.NET Core - 配置系统之配置添加
    2.配置添加配置系统可以读取到配置文件中的信息,那必然有某个地方可以将配置文件添加到配置系统中。之前的文章中讲到ASP.NETCore入口文件中,builder(WebApplicationBui......
  • ASP.NET Core - 配置系统之配置读取
    一个应用要运行起来,往往需要读取很多的预设好的配置信息,根据约定好的信息或方式执行一定的行为。配置的本质就是软件运行的参数,在一个软件实现中需要的参数非常多,如果我们......
  • ASP.NET Core 文件上传
    以下是将上传的图片保存在本地的示例代码:1、在前端,使用HTML表单元素和POST方法将文件上传到后端:<formmethod="post"enctype="multipart/form-data"action="/upload">......