当前位置：网站首页 / .NET CORE / 正文

ay的C#8.0和net5高级编程笔记15-使用ASP.NET Core Razor Pages构建网站

时间：2021年05月07日 | 作者 : aaronyang | 分类 : .NET CORE | 浏览: 800次 | 评论 0 人

NET Core开发Web

Html5、Css3和JavaScript是前端Web开发的基本组件，但是还有很多额外的技术，可以使前端Web开发更有效率，包括Bootstrap和Css预处理器（SASS和LESS），微软的TypeScript语言，以及jQuery，Angular，React和Vue等js库。所有这些高级技术最终都转换或编译为底层的三种核心技术，因此他们可以跨所有现代浏览器。


ASP.NET CORE有MVC，Web API，SignalR，运行在.NET Core上。


传统ASP.NET是在.NET Framework中的大型程序集System.Web.dll的基础上构建的，并且与微软仅在Windows下使用的Web服务器IIS做了紧密耦合。积累了很多特性，但其中有些不适合跨平台。

ASP.NET CORE重新的设计，消除了对System.Web.dll和IIS的依赖，模块化的轻量级包组成。跨平台运行，微软还创建了名为Kestrel的跨平台高性能的Web服务器，整个栈都是开源的。

微软建议使用Kestrel而不是IIS。


打开上一篇博客的项目ParacticalApps，新建一个NorthwindWeb的空网站

image.png


image.png

建立好了，设为启动项目

简单使用

image.png

和其他程序一样，Program.cs的Main方法是入口点


打开Startup.cs，默认如下

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace NorthwindWeb
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Hello World!");
                });
            });
        }
    }
}

ConfigureServices方法用来配置服务，比如MVC这样的功能

Configure默认方法实现了三件事，第一，开发时，任何未处理的异常都显示在浏览器窗口中，开发人员可以查看。第二，使用路由，第三，使用端点等待请i去，返回HelloWorld来异步响应每个Http Get请求。


www.ayjs.net====================


测试和保护网站

从HTTP切换到HTTPS，为浏览器和Web服务器之间所有流量启用加密以保护隐私。

在vscode启动网站，使用dotnet run

在vs2019，直接F5

image.png

启动以后，发现两个端口号，一个是https一个是http。

image.png

如果不建议每隔90天重新申请证书，可以从以下链接获得免费证书- https://letsencrypt.org/

由于我是vs2019，所以https就自动配好了。



在vscode中，按Ctrl+C键 停止Web服务器。

在终端输入dotnet dev-certs https --trust命令，注意消息，请求信任https开发证书，系统可能提示你输入密码，并且可能已经存在有效的https证书。

如果浏览器在运行，关闭并重启浏览器确保浏览器已经读取了证书。

在startup.cs文件中的configure方法，添加一条else语句，以便在未开发时启用HSTS。

 if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }

image.png

HSTS（http strict transport security）是一种可选的安全增强方案。如果网站启用了hsts，浏览器也支持，那就强制通过https进行所有的通信，以防止使用者使用不可信或无效的证书。

在UseRouting()后面添加一行代码，将请求导航到https

 app.UseHttpsRedirection();

image.png

vscode里面启动项目用的，应该是Kestrel Web服务器。


启用静态文件和默认文件

添加一个wwwroot文件夹，然后添加一个wwwroot/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet" crossorgin="anonymous">
    <title>AY ASP.NET CORE</title>
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            <h1 class="display-3">欢迎来到 Northwind</h1>
            <p class="lead">我们给我们的客户供应产品</p>
            <hr />
            <p>我们的客户包括餐饮,宾馆和巡航线</p>
            <p><a href="https://www.ayjs.net/" class="btn btn-primary">学习更多</a></p>
        </div>
    </div>
</body>
</html>

打开网址：https://www.bootcdn.cn/twitter-bootstrap/

复制你想要的css文件

我装了一个zencoding拓展插件

修改Startup.cs的Configure方法的代码如下：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }

            app.UseRouting();
            app.UseHttpsRedirection();
            
            app.UseStaticFiles();
            app.UseEndpoints(endpoints =>
            {
                //endpoints.MapGet("/", async context =>
                //{
                //    await context.Response.WriteAsync("Hello World!");
                //});
            });
        }

添加了UseStaticFiles方法，就可以i访问静态页面了

image.png

接下来添加

         app.UseDefaultFiles();

            app.UseStaticFiles();

然后F5运行，直接默认就可以打开index.html了


了解Razor Pages

Razor Pages允许开发人员轻松地将HTML标记和C#代码混合在一起，这就是.cshtml文件。

默认情况下，ASP.NET Core在名为Pages的文件夹中查找Razor Pages


新增一个Pages文件夹，将index.html文件移到Pages文件夹，然后后缀名改为 .cshtml

在Startup.cs的ConfigureServices方法中，添加相关服务，例如模型绑定，授权，防伪，视图和标签助手，如下所示：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace NorthwindWeb
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }

            app.UseRouting();
            app.UseHttpsRedirection();

            app.UseDefaultFiles();
            app.UseStaticFiles();
            app.UseEndpoints(endpoints =>
            {
                //endpoints.MapGet("/", async context =>
                //{
                //    await context.Response.WriteAsync("Hello World!");
                //});
                endpoints.MapRazorPages();
            });
        }
    }
}

Razor语法由@符号表示.

它们需要文件顶部的@page指令

它们的@functions部分定义了以下内容：

    用于存储数据值的属性。这种类的实例可自动实例化模型，模型可以在特殊方法中设置属性，你可以在标记中获取属性值。

    OnGet、OnPost、OnDelete等方法，这些方法会在发出GET、POST和DELETE等请求时执行。


修改index.cshtml页面

@page
@functions{
    public string DayName{get;set;}
    public void OnGet(){
       Model.DayName=DateTime.Now.ToString("dddd");
    }
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet" crossorgin="anonymous">
    <title>AY ASP.NET CORE</title>
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            <h1 class="display-3">欢迎来到 Northwind</h1>
            <p class="lead">我们给我们的客户供应产品</p>
            <hr />
            <p>今天 @Model.DayName 我们的客户包括餐饮,宾馆和巡航线</p>
            <p><a href="https://www.ayjs.net/" class="btn btn-primary">学习更多</a></p>
        </div>
    </div>
</body>
</html>

image.png


使用Razor页面使用共享布局

Pages文件夹下添加一个_ViewStart.cshtml

image.png

image.png

添加内容如下：

@*
    主页面
*@
@{
    Layout = "_Layout";
}

在Pages文件夹中创建一个名为Shared文件夹，新增 Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet" crossorgin="anonymous">
    <title>@ViewData["Title"]</title>
</head>
<body>
    <div class="container">
        @RenderBody()
        <hr />
        <footer>
            <p>Copyright &copy; 2021-@ViewData["Title"] www.ayjs.net</p>
        </footer>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/js/bootstrap.min.js"></script>
    @RenderSection("Scripts", false);
</body>
</html>

ViewData是一个键值对，自己在后台设置好，前台就可以拿到了。

模板页做好了，打开index.cshtml修改代码

@page
@functions{
    public string DayName{get;set;}
    public void OnGet(){
       ViewData["Title"]="Northwind 网站";
       Model.DayName=DateTime.Now.ToString("dddd");
    }
}

<div class="jumbotron">
    <h1 class="display-3">欢迎来到 Northwind</h1>
    <p class="lead">我们给我们的客户供应产品</p>
    <hr />
    <p>今天 @Model.DayName 我们的客户包括餐饮,宾馆和巡航线</p>
    <p><a href="suppliers" class="btn btn-primary">了解更多关于供应商的信息</a></p>
</div>

启动项目后，效果如下：

image.png

单击蓝色的按钮，跳转的页面没找到。

写页面 前台代码和后台 要分开，接下来在Pages文件夹中添加 suppliers.cshtml和suppliers.cshtml.cs文件。

在vs2019中，

image.png

image.png

点击添加

image.png

有两个Razor页面-空，这次选择第一个，这样可以同时创建2个文件

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace NorthwindWeb.Pages
{
    public class suppliersModel : PageModel
    {
        public IEnumerable<string> Suppliers { get; set; }
        public void OnGet()
        {
            ViewData["Title"] = "Northwind网站 - Suppliers";
            Suppliers = new[] { "微软","谷歌","百度","UI小哥杨洋"};
        }
    }
}

对PageModel类，查看定义，按下F12键

image.png

打开suppliers.cshtml，修改代码如下

@page
@model NorthwindWeb.Pages.suppliersModel
<div class="row">
    <div class="display-2">Suppliers</div>
    <table class="table">
        <thead class="thead-inverse">
            <tr>
                <th>公司名字</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var name in Model.Suppliers)
            {
                <tr><th>@name</th></tr>
            }
        </tbody>
    </table>
</div>

启动项目，单击蓝色按钮，显示如下

image.png

更多Razor的@用法：查看


使用Entity Framework Core 与 ASP.NET Core

网站 添加NorthwindContextLib 项目的引用

image.png

打开Startup.cs修改，添加数据库字符串链接

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            string databasePath = "Northwind.db";
            services.AddDbContext<Northwind>(options => options.UseSqlite($"Data Source={databasePath}"));
        }

拷贝前面的第11篇的 Northwind.db文件到网站的根目录

然后设置文件属性

image.png


打开SuppliersModel，添加Northwind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using NorthwindContextLib;

namespace NorthwindWeb.Pages
{
    public class suppliersModel : PageModel
    {
        private Northwind db;
        public suppliersModel(Northwind injectedContext)
        {
            db = injectedContext;
        }
        public IEnumerable<string> Suppliers { get; set; }
        public void OnGet()
        {
            ViewData["Title"] = "Northwind网站 - Suppliers";
            //Suppliers = new[] { "微软","谷歌","百度","UI小哥杨洋"};
            //取出供应商中 companyName字段返回 个IEnumerable<string>
            Suppliers = db.Suppliers.Select(s => s.CompanyName);
        }


    }
}

image.png

使用Razor页面操作数据

启用模型 以插入实体

现在，这个页面想要能增加一个Supplier，根据名字提交信息

BindProperty这个特性来自using Microsoft.AspNetCore.Mvc;


打开suppliers.cshtml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using NorthwindContextLib;
using NorthwindEntitesLib;

namespace NorthwindWeb.Pages
{
    public class suppliersModel : PageModel
    {
        private Northwind db;
        public suppliersModel(Northwind injectedContext)
        {
            db = injectedContext;
        }
        public IEnumerable<string> Suppliers { get; set; }
        public void OnGet()
        {
            ViewData["Title"] = "Northwind网站 - Suppliers";
            //Suppliers = new[] { "微软","谷歌","百度","UI小哥杨洋"};
            //取出供应商中 companyName字段返回 个IEnumerable<string>
            Suppliers = db.Suppliers.Select(s => s.CompanyName);
        }

        [BindProperty]
        public Supplier Supplier { get; set; }
        public IActionResult OnPost()
        {
            if (ModelState.IsValid)
            {
                db.Suppliers.Add(Supplier);
                db.SaveChanges();
                return RedirectToPage("/suppliers");
            }
            return Page();
        }

    }
}

前台修改代码：

@page
@model NorthwindWeb.Pages.suppliersModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<div class="row">
    <div class="display-2">Suppliers</div>
    <table class="table">
        <thead class="thead-inverse">
            <tr>
                <th>公司名字</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var name in Model.Suppliers)
            {
                <tr><th>@name</th></tr>
            }
        </tbody>
    </table>
</div>
<div class="row">
    <p>输入一个供应商的名字：</p>
    <form method="post">
        <div>
            <input asp-for="Supplier.CompanyName"/>
            <input type="submit"/>
        </div>
    </form>
</div>

解释：

    带有POST方法的<Form>元素是普通的html标记

带有asp-for标记助手的<input>元素允许将数据绑定到Razor页面背后的模型。

添加

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

这行代码，就可以post到后台的那个onpost方法了


启动项目，测试，输入 新杨洋，点击 提交 按钮

image.png

提交后

image.png


使用Razor类库

所有与Razor Pages相关的内容都可以编译成类库，以便于重用，在NC3.0后续版本中，已经可以包含静态文件。


vscode中，使用

 dotnet new razorclasslib

创建好类库，添加NorthwindContextLib.csproj的引用

image.png


在vs2019中，右键解决方案，新建

image.png

添加NorthwindEmployees


 image.png

image.png

image.png

按照书中的示例，只有vs2019里面的正确，以vs2019的为准


展开Areas，MyFeature文件夹 重命名PacktFeatures文件夹

在Pages子文件夹中添加一个名为_ViewStart.cshtml

@*
    主页面
*@
@{
    Layout = "_Layout";
}

在Pages子文件夹中,添加

image.png

然后添加NorthwindContextLib 引用

image.png

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using NorthwindContextLib;
using NorthwindEntitesLib;

namespace PacktFeatures.Pages
{
    public class employeesModel : PageModel
    {
        private Northwind db;
        public employeesModel(Northwind injectedContext)
        {
            db = injectedContext;
        }
        public IEnumerable<Employee> Employees { get; set; }
        public void OnGet()
        {
            Employees = db.Employees.ToArray();
        }

    }
}

前台

@page
@using NorthwindEntitesLib
@model PacktFeatures.Pages.employeesModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<div class="row">
    <div class="display-2">员工列表</div>

</div>
<div class="row">
    @foreach (Employee emp in Model.Employees)
    {
        <div class="col-sm-3">
            <partial name="_Employee" model="emp"/>
        </div>
    }
</div>

上方的代码：

@using导入Employee的类型空间

添加标签助手addTagHelper，就可以使用partial元素

声明Razor页面的模型类型，就可以使用刚刚定义的类。

枚举模型中的员工，使用 分部视图输出每个 员工的页面。接下来创建每个员工该怎么显示。

更多partial讲解，https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/tag-helpers/built-in/partial-tag-helper


在Pages文件夹中创建Shared子文件夹，添加一个_Employee.cshtml

image.png

按照约定，分部视图的名字，以下划线开头

如果把分部视图放到Shared文件夹中，就可以自动找到这个分部视图

这里可使用引导卡样式输出每个员工的信息

@model NorthwindEntitesLib.Employee
    <div class="card border-dark mb-3" style="max-width:19rem;">
        <div class="card-header">@Model.FirstName</div>
        <div class="card-body text-dark">
            <h5 class="card-title">@Model.Country</h5>
            <p class="card-text">@Model.Notes</p>
        </div>
    </div>

image.png

这里的name等于分部视图的文件名字

www.ayjs.net====================

使用Razor类库

NorthwindWeb客户端添加引用

打开NorthwindWeb/Pages/index.cshtml

添加一点代码;

@page
@functions{
    public string DayName{get;set;}
    public void OnGet(){
       ViewData["Title"]="Northwind 网站";
       Model.DayName=DateTime.Now.ToString("dddd");
    }
}

<div class="jumbotron">
    <h1 class="display-3">欢迎来到 Northwind</h1>
    <p class="lead">我们给我们的客户供应产品</p>
    <hr />
    <p>今天 @Model.DayName 我们的客户包括餐饮,宾馆和巡航线</p>
    <p><a href="suppliers" class="btn btn-primary">了解更多关于供应商的信息</a></p>
    <p><a class="btn btn-primary" href="PacktFeatures/employees">了解员工</a></p>
</div>


运行后，效果如下

image.png

单击 了解员工 按钮

image.png


探索主题：

ASP.NET Core基础：https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals

Razor Pages介绍：https://docs.microsoft.com/zh-cn/aspnet/core/razor-pages

Razor语法参考：https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/razor

布局：https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/layout

ASP.NET Core 中的 Razor Pages 和 Entity Framework Core教程：https://docs.microsoft.com/zh-cn/aspnet/core/data/ef-rp/intro?view=aspnetcore-5.0&tabs=visual-studio


通过这篇文章后 ，你就可以对着MSDN文档，开始学习了。



推荐您阅读更多有关于“C#8.0，core3，”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

  查看权限

抖音:wpfui 工作wpf,兴趣学习flutter

目前在合肥市某公司上班，已经厌弃，如果你的公司看的上我，加我QQ私聊

AYUI8全源码 Github地址:前往获取

杨洋（AaronYang简称AY,安徽六安人）AY唯一QQ:875556003和AY交流

高中学历，2010年开始web开发,2015年1月17日开始学习WPF

声明:AYUI7个人与商用免费，源码可购买。部分DEMO不免费

不是从我处购买的ayui7源码，我不提供任何技术服务，如果你举报从哪里买的，我可以帮你转正为我的客户，并送demo

查看捐赠

AYUI7.X MVC教程 更新如下：

第一课 第二课 程序加密教程

标签列表