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

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

时间:2021年05月07日 | 作者 : aaronyang | 分类 : .NET CORE | 浏览: 231次 | 评论 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.0core3,”的文章

猜你喜欢

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

发表评论

必填

选填

选填

必填

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

  查看权限

合肥科大智能常年招聘C# .NET CORE,vue前端,JAVA开发,有想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui 工作是wpf,不接活,目前主要折腾maui

AYUI8社区版Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始,兴趣学习研究WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

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

查看捐赠

AYUI7.X MVC教程 更新如下:

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

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表