Asp.NET Core進階 第三篇 Asp.Net Core Razor Pages介紹

   

第三篇  Asp.Net Core Razor Pages介紹

 

 

       前言   要熟練使用Core平台開發項目，必先熟悉一種新的Webs頁面即Razor Pages，Razor Pages是一種包含C#代碼的web頁面，服務后端包含Models，前端包含C#，相當於簡化了Controllers的MVC Views頁面。

　　Razor Pages頁面特點如下：
　　1，文件名首位不能是下划線
　　2，文件擴展名為.cshtml
　　3，文件的第一行是 @page
　　4，Razor代碼塊被@{ }包裹，內部為標准C#代碼。
　　5，PageModel，推薦使用頁面模型，頁面模型通過 @model 模型名稱 引入頁面中。

     學些目標：

　　1，創建Razor Pages 項目、了解常用的Nuget包
　　2，了解Razor Pages基本的頁面組成
　　3，與Sqlserver數據庫交互完成CRUD操作
　　4，Razor Pages搜索、驗證等操作。

    准備工具：

　　Vs2017以上的版本和Sqlserver2008以上版本

    一、創建Razor Pages

　　在Vs中新建一個項目名稱為RazorPages項目，項目類型選擇“Asp.Net Core Webs應用”，目標框架選擇“.Net Core 3.1”。

 

 

 

 

 

　　Core下基本的Razor Pages框架目錄如下，頁面默認在Pages文件夾里，wwwroot文件夾存儲Css和Js頁面樣式文件，“appsettings.json”為生成部署文件，“Program.cs”中的main函數是主程序的入口，“Startup.cs”中配置Sql連接，路由注冊服務等后面會詳細講到，（關注@高山流水學編程不迷路）

 Razor Pages頁面內容格式如下：

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

    二、為Razor添加Models模型，模型類名稱為UserData。操作步驟：右鍵點擊解決方案“RazorPages”，添加Models文件夾，然后右鍵點擊“Models”文件夾添加一個“UserData.cs”的類文件，如下圖所示。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Threading.Tasks;

namespace RazorPages.Models
{
    public class UserData
    {
        [Key, Column(Order = 1)]
        public int UserId { get; set; }
        public string UserName { get; set; }
        public string Password { get; set; }
    }
}

 

 

 

     三、使用Vs實體框架生成Razor頁面(CRUD)   

　　首先右鍵點擊Pages文件夾，在它下面添加一個“Users”文件夾，右鍵點擊“Users”，依次點擊“添加”->“新搭建基架的項目”->"使用實體框架生成Razor Pages頁面（CRUD）"

        

 

選擇模型類

 

 

 　　注意在生成的結果中報錯，提示缺少依賴的NuGet包可以點擊通過右鍵點擊“項目資源”，“”管理NuGet程序包”來添加。在右側選擇安裝，安全前注意選擇對應的版本，比如：Core3.1選擇Sql數據包版本最好選擇3.0，詳細官網有介紹。

 

 

　　 常用的幾個NuGet數據包如下：

　　　　Microsoft.EntityFrameworkCore.SqlServer（選擇版本：V3.0）   ==> Sqlserver數據庫連接使用
　　　　Microsoft.EntityFrameworkCore.Tool（選擇版本：V3.0）            ==> 完成Sqlserver數據CRUD
　　　　EntityFramework.SqlServerCompact （選擇版本：V4.1）           ==> Sqlserver數據庫操作和交互

      下面是非常重要的三步：一是在Startup.cs中注冊如下ConfigureServices的服務（如果系統已生成，不用添加），二是在appsettings.json文件中添加Sqlserver數據庫連接字符串。如下所示

       注意：Startup.cs中“GetConnectionString("MVCSqlContext")”方法名稱與appsettings.json中的ConnectionStrings": {"MVCSqlContext": }名稱一致。

public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();

            services.AddDbContext<RazorPagesContext>(options =>
                    options.UseSqlServer(Configuration.GetConnectionString("MVCSqlContext")));
        }

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "MVCSqlContext": "Server=localhost;Database=InfoUser;User ID=sa;Password=sa;"
  }
}

    第三步，在Startup.cs文件中添加Users路由路徑

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;
using RazorPages.Data;

namespace RazorPages
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();

            services.AddDbContext<RazorPagesContext>(options =>
                    options.UseSqlServer(Configuration.GetConnectionString("MVCSqlContext")));
        }

        // 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.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });
        }
    }
}

 

生成解決方案后，點擊“”在瀏覽器中運行程序，在網址后面輸入Users，運行節目如下：

 

     四、Razor Pages頁面驗證 

　　在Models下面UserData.cs類，給可以給每一個方法加一個限制，即頁面的驗證屬性。代碼如下：

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Threading.Tasks;

namespace RazorPages.Models
{
    public class UserData
    {
        [Key, Column(Order = 1)]   //指定為主鍵
        [Display(Name = "編號")]   //字段名重命名
        public int UserId { get; set; }

        [StringLength(60, MinimumLength = 3)]   //驗證長度大於3，小於60
        [Required]
        public string UserName { get; set; }


        [RegularExpression(@"^[A-Z0-9]{6}$")]   //驗證輸入項為大寫字母或數字組成的6位數
        [Required]       //必填項
        public string Password { get; set; }
    }
}

 

 

---------------Razor語法大全（以下內容來源與網絡  原創：https://www.cnblogs.com/dengxinglin/p/3352078.html）-------------

Razor語法大全

 本文頁面來源地址：http://www.cnblogs.com/dengxinglin/p/3352078.html

Razor是基於framewor4以上寫的一個開源項目：https://github.com/Antaris/RazorEngine/

Razor是包含了模板引擎和動態編譯兩部分。本部分就簡單記錄了模板引擎的一些語法，之后用Razor做一個代碼生成器，就使用Razor的語法來。

Razor的發布是和MVC一起的，作為MVC的視圖模板引擎。

 

Razor文件類型

   Razor可以在vb.net和C#中使用。分別對應了兩種文件類型，.vbhtml和.cshtml 

 

Razor的標識符

    @字符被定義為Razor服務器代碼塊的標識符，后面的表示是服務器代碼了。web form中使用<%%>中寫服務器代碼一個道理。在vs工具里面提供了代碼着色和智能感應的功能。如下面代碼：

@{string userName= "鄧星林";}
    <span>@userName</span>
    <span>@DateTime.Now.ToString("yyyy-MM-hh")</span>

 

Razor的作用域

     在上面一個例子中都已經使用到了大括號{}，不錯，大括號里面的就是表示作用域的范圍，用形如@{code}來寫一段代碼塊。

@{
    string userName= "鄧星林";
    @userName
}

在作用域(代碼塊)中輸出也是用@符號的。

 

用Razor和html代碼混合編寫

   在Razor中寫html代碼和html代碼中寫Razor語句都是可以的，並且還有智能提示。

   a.在作用域內如果是以html標簽開始則視為文本輸出

   b.如果要輸出@，則使用@@

   c.如果要輸出非html標簽和非Razor語句的代碼，則用@:，他的作用是相當於在處於html下面編寫一樣了，如在@：后面可以加上@就是表示Razor語句的變量

 如：

@{

    var str = "abc";
        ////下面會輸出：this is a mail：[e-mail], this is var: abc,this is mail@str,this is @；
    @: this is a mail：[e-mail], this is var: @str,this is  mail@str,this is @@；
    //下面輸出abc
    @str
  
}

Razor作用塊注釋

    razor作用塊里面本身就是服務器代碼了，因此可使用服務器代碼的注釋，注釋有//和/**/分別是單行注釋和多行注釋。

   另外razor注釋還可以使用自身特有的@* 注釋的內容 *@，支持單行和多行的。

@{
   @*
       多行注釋
       多行注釋
   *@
   var i = 10;  @* asdfasf *@
}

Razor類型轉換

         As系列擴展方法和Is系列擴展方法

          AsInt(), IsInt()

　    　AsBool(),IsBool()

    　　AsFloat(),IsFloat()

　   　AsDecimal(),IsDecimal()

　    　AsDateTime(),IsDateTime()

　  　ToString()

@{
    var i = “10”;
}
<p> i = @i.AsInt() </p> <!-- 輸出 i = 10 --> 

 

razor其它

  @Href("~/")//表示網站的根目錄

  @Html.Raw(Module.Content)  輸出HTML，如：@Html.Raw('<font color='red'>紅字</font>')，就會顯示出紅色的”紅字“，不用的話會直接顯示這段html字符串（<font color='red'>紅色文字</font>）

 

 

 

在實際中，比如一個網站，整過框架是一樣的，而有的地方是很多相同的版塊。因此我們需要復用。

 

布局（Layout）

   layout方式布局就是相當於一個模板一樣的，我們在它地址地方去添加代碼。相當於定義好了框架，作為一個母版頁的，在它下面的頁面需要修改不同代碼的地方使用@RenderBody()方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>我的網站 - @Page.Title</title>
    </head>
    <body>
        @RenderBody()
    </body>
</html>

@{
    Layout = "/LayoutPage.cshtml";
    Page.Title = "測試頁面哦";
}

<p>This is a layout test</p>

 

頁面（Page）

 page是當需要在一個頁面中，輸出另外一個razor文件的內容時候用到，比如頭部或者尾部這些公共的內容時候需要用到。輸出就使用 @RenderPage()方法

如：A頁面中也要把B頁面的內容輸出

A頁面：

<p>
    @RenderPage("/b.cshtml")
</p>

b頁面的代碼如下：

<font color="red">這是一個子頁面</font>

 

Section區域

    Section是定義在Layou的中使用的。在Layout的頁面中用。在要Layout的父頁面中使用@RenderSection("Section名稱 ")

定義：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>我的網站 - @Page.Title</title>
    </head>
    <body>
     @RenderSection("SubMenu")
        @RenderBody()
    </body>
</html>

在它的子頁面中使用

@section SubMenu{
    Hello This is a section implement in About View.
 }

 如果在子頁面中沒有去實現了SubMenu了，則會拋出異常。我們可以它的重載@RenderSection("SubMenu", false)

 @if (IsSectionDefined("SubMenu"))
        {
            @RenderSection("SubMenu", false)
        }
        else
        {
            <p>SubMenu Section is not defined!</p>
        }

 

 Helper

   helper就是可以定義可重復使用的幫助器方法，不僅可以在同一個頁面不同地方使用，還可以在不同的頁面使用。

如在cshtml中那么寫：

@helper sum(int a,int b)
{  
   var result=a+b;
　　@result  

}
<div >
    <p>@@helper的語法</p>    <p>2+3=@sum(2,3)</p> 
    <p>5+9=@sum(5,9)</p>
</div>

我們通常會把一類Helper放在一個單獨的cshtml文件中，而文件名就相當於一個類名。

我把sum放在HelpMath.cshtml文件中，則我們在那上面cshtml中的使用方法是:

<p>2+3=@HelpMath.sum(2,3)</p> 
<p>5+9=@HelpMath.sum(5,9)</p>

另外，系統還為我們提供了一些列的Helper，用來簡化Html的書寫。這些Helper放在@Html中，我們可以方便的使用：

<p>
    @Html.TextBox("txtName")
</p>