092 Partial Views

黄健华Yeah

已于 2024-04-18 19:31:28 修改

阅读量205

点赞数 4

于 2024-04-18 19:23:41 首次发布

本文链接：https://blog.csdn.net/KevinHuang2088/article/details/137933760

版权

ASP.NET Core 8.0 Guide 专栏收录该内容

128 篇文章 0 订阅

订阅专栏

示例

新建一个ASP.NET Core Empty项目，名称为PartialViewsExample

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();

//app.MapGet("/", () => "Hello World!");
app.UseStaticFiles();
app.UseRouting();
app.MapControllers();

app.Run();

新建文件夹wwwroot，在下面添加StyleSheet.css

body 
{
    font-family: 'Segoe UI', Tahoma, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 18px;
    background-color: #f7f7f7;
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

.container
{
    min-width: 500px;
}

.navbar
{
    background-color: #cacaca;
    padding: 10px;
    box-shadow: 0px 1px 2px 2px #cacaca;
}

.navbar-brand
{
    margin: 0px 30px 5px 5px;
    font-size: 1.1em;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.navbar > ul
{
    list-style-type: none;
    width: 100%;
}

.navbar > ul > li
{
    width: 100%;
}

.navbar > ul > li > a:link, .navbar > ul > li > a:visited
{
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.4s;
    display: inline-block;
    margin: 0px 3px;
    color: #1383a4;
    text-decoration: none;
}

.navbar > ul > li > a:hover
{
    background-color: #fffff;
    color: #086581;
}

.nav-active
{
    background-color: #ececec;
}

.page-content
{
    padding: 10px;
    min-height: 90vh;
}

.full-size-height
{
    min-height: 100vh;
}

.table
{
    border-collapse: collapse;
    border: 1px solid #ffffff;
    padding: 5px;
    box-shadow: 0px 0px 4px 2px #e4e4e4;
    margin: 10px 0px;
    margin: auto;
}

.table thead
{
    background-color: #727774;
    color: #ffffff;
}

.table thead th
{
    padding: 5px 10px;
    text-align: left;
}

.table thead td
{
    padding: 6px 10px;
}

.table tbody tr
{
    transition: background-color 0.4s, color 0.3s;
    background-color: #efefef;
    border-bottom: 1px solid #ffffff;
}

.table tbody tr
{
    background-color: #01759d;
    color: #ffffff;
}

.w-25
{
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

.text-green
{
    color: #0a8438;
}

.text-red{
    color: #ff0000;
}

.text-left{
    text-align: left;
}

.text-right{
    text-align: right;
}

.text-center{
    text-align: center;
}

.margin-auto
{
    margin: auto;
}

.float-left{
    float: left;
}

.clear{
    clear: both;
}

.box{
    margin: 10px 20px;
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #d3d1d1;
    box-shadow: 0px 0px 3px 2px #ffffff;
}

.blue-back
{
    background-color: #9ad3f7;
}

.footer-content{
    background-color: #bfbfbf;
    color: #000000;
    padding: 20px;
    text-align: center;
}

.header{
    background-color: #055c87;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

@media screen and (min-width: 1000px)
{
    .navbar-brand
    {
        display: inline-block;
        margin-bottom: 0px;
    }

    .navbar > ul
    {
        display: inline-block;
        width:auto;
    }

    .navbar > ul > li
    {
        display: inline-block;
        width: auto;
    }

    .navbar > ul > li > a 
    {
        display: inline-block;
        width: auto;
    }
}

新建Controllers文件夹，在下面新建HomeController

using Microsoft.AspNetCore.Mvc;

namespace PartialViewsExample.Controllers
{
    public class HomeController : Controller
    {
        [Route("/")]
        public IActionResult Index()
        {
            return View();
        }

        [Route("about")]
        public IActionResult About()
        {
            return View();
        }
    }
}

在Views/Shared文件夹下新建_Layout.cshtml

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/stylesheet.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="navbar">
            <div class="navbar-brand">Asp.Net Core Demo App</div>
            <ul>
                <li><a href="~/">Home</a></li>
                <li><a href="~/about">About</a></li>
            </ul>
        </div>
    </div>
    <div class="page-content">
        @RenderBody()
    </div>
    <div>
        
    </div>
</body>
</html>

在Views/Shared文件夹下新建_ListPartialView.cshtml

<div class="list container">
    <h3>Cities</h3>
    <ul>
        <li>London</li>
        <li>Paris</li>
        <li>New York</li>
        <li>Tokyo</li>
        <li>Rome</li>
    </ul>
</div>

在Views下面新建_ViewStart.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

在Views下面新建_ViewImports.cshtml

@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"

Index.cshtml中使用Partial View

<h1>Home</h1>

@* <partial name="_ListPartialView"></partial> *@

<div class="box">
    @*必须设置了_ViewIMports.cshtml中的@addTagHelper才能使用partial name=*@
    <partial name="_ListPartialView"></partial> 

</div>

About.cshtml中使用Partial View

<h1>About</h1>

<h2>About compony here</h2>
<p>
    丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
    明月几时有？把酒问青天。
    不知天上宫阙，今夕是何年。
    我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
    起舞弄清影，何似在人间。
    转朱阁，低绮户，照无眠。
    不应有恨，何事长向别时圆？
    人有悲欢离合，月有阴晴圆缺，此事古难全。
    但愿人长久，千里共婵娟。
</p>

<div class="box">
    @* <partial name="_ListPartialView"></partial> *@
    @* @await Html.PartialAsync("_ListPartialView") *@
    @{
        await Html.RenderPartialAsync("_ListPartialView");
    }
</div>

调用Partial View的三种方法