Asp.Net Core 学习教程2、使用ASP.NET Core中的RazorPages

1、创建一个asp.net core web应用程序

1.1、打开vs2019 新建项目

1.2、选好项目位置后进入选择界面，选择web应用程序

 

1.3、进去的页面结构如下

 

 

 pages 文件夹：包含 razor 页面和支持文件。 每个 razor 页面都是一对文件：

• 一个 .cshtml 文件，其中包含使用 razor 语法的 c＃ 代码的 html 标记 。
• 一个 .cshtml.cs 文件，其中包含处理页面事件的 c# 代码 。

 

wwwroot 文件夹：包含静态文件，如 html 文件、javascript 文件和 css 文件。

appsettings.json：包含配置数据，如连接字符串。

program.cs：包含程序的入口点。 

startup.cs：包含配置应用行为的代码。

运行起来如果提示要安装证书的直接点是就可以了，出现welcome就表示可以了

2、添加模型

2.1、在这里搭建“商品”模型的基架。 确切地说，基架工具将生成页面，用于对“商品”模型执行创建、读取、更新和删除 (crud) 操作。

右击项目名称添加文件夹models，在models新文件夹里新建一个模型类shop

using system;
using system.collections.generic;
using system.componentmodel.dataannotations;
using system.linq;
using system.threading.tasks;

namespace corerazorpages.models
{
    /// <summary>
    /// 商品类
    /// </summary>
    public class shop
    {
        
        [display(name="id")]
        public int id { get; set; }
        [display(name = "guid")]
        public string guid { get; set; }
        [display(name = "名称")]
        public string name { get; set; }
        [display(name = "价格")]
        public decimal price { get; set; }
        [display(name = "添加日期")]
        [datatype(datatype.date)]
        public datetime addtime { get; set; }
    }
}

3、添加基架

3.1、右击pages文件夹添加一个文件夹shop，然后右击shop>添加>新搭建基架的项目>使用实体框架生成razor页面（crud）模型类选择shop，数据库上下文点击右边的+号

3.2、生成项目，如果报错shop就加上命名空间，这里是因为文件夹shop名称跟类名shop一样

项目文件夹多了个data那是数据库上下文，还有配置文件里面也加了数据库访问的字符串在appsetting.json文件夹里

   3.3、更改数据库链接

打开appsettiong.json文件修改里面的数据库链接字符串，然后点工具>nuget包管理器>程序包管理控制台依次输入add-migration initialcreate、update-database，警告不要管他（程序员不怕警告就怕错误 哈哈）

{
  "logging": {
    "loglevel": {
      "default": "information",
      "microsoft": "warning",
      "microsoft.hosting.lifetime": "information"
    }
  },
  "allowedhosts": "*",
    "connectionstrings": {
        //原来生成的server=(localdb)\\mssqllocaldb;database=corerazorpagescontext-10c906a7-1959-4967-9659-0fcbfe8b7d16;trusted_connection=true;multipleactiveresultsets=true
        "corerazorpagescontext": "data source=服务器地址;initial catalog=数据库名user id=用户名;password=密码"
    }
}

 

 

看生成的数据库

 

3.4、修改文件夹shared下的布局_layout.cchtml添加shop导航

看起来有点像winform的服务器控件一样哈哈，asp-area是区域名，现在没有 asp-page是指razor的位置这里是shop/index

 <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/index">corerazorpages</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarsupportedcontent"
                        aria-expanded="false" aria-label="toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/index">home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="shop/index">商品</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/privacy">privacy</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

  3.5、添加一些数据在shop中，在data文件件下面添加一个类 adddefaultdata，然后修改程序入口main 方法。

从依赖关系注入容器获取数据库上下文实例>调用 initdata方法，并将上下文传递给它、方法完成时释放上下文

using system;
using system.collections.generic;
using system.linq;
using system.threading.tasks;

//添加命名空间
using microsoft.entityframeworkcore;
using microsoft.extensions.dependencyinjection;
using corerazorpages.models;
namespace corerazorpages.data
{
    public class adddefaultdata
    {
        /// <summary>
        /// 添加数据
        /// </summary>
        /// <param name="serviceprovider"></param>
        public static void initdata(iserviceprovider serviceprovider)
        {
            using (var db = new corerazorpagescontext(serviceprovider.getrequiredservice<dbcontextoptions<corerazorpagescontext>>()))
            {
                //如果有数据就不添加了
                if (db.shop.any())
                {
                    return;
                }
                //添加10条初始数据
                for(var i=0;i<10;i++)
                {
                    var model = new shop
                    {
                        name = "商品"+i.tostring(),
                        guid = guid.newguid().tostring("n"),
                        price = i + 0.66m,
                        addtime = datetime.now
                    };
                    db.shop.addrange(model);
                }
                db.savechanges();
            }
        }
    }
}

using system;
using system.collections.generic;
using system.linq;
using system.threading.tasks;
using microsoft.aspnetcore.hosting;
using microsoft.extensions.configuration;
using microsoft.extensions.hosting;
using microsoft.extensions.logging;
//添加命名空间
using microsoft.extensions.dependencyinjection;
using corerazorpages.data;

namespace corerazorpages
{
    public class program
    {
        public static void main(string[] args)
        {
            var host = createhostbuilder(args).build();
            using (var scope=host.services.createscope())
            {
                var services = scope.serviceprovider;
                try
                {
                    adddefaultdata.initdata(services);
                }
                catch (exception ex)
                {
                    var logger = services.getrequiredservice<ilogger<program>>();
                    logger.logerror(ex, "添加初始数据失败");
                }

            }
                host.run();
        }

        public static ihostbuilder createhostbuilder(string[] args) =>
            host.createdefaultbuilder(args)
                .configurewebhostdefaults(webbuilder =>
                {
                    webbuilder.usestartup<startup>();
                });
    }
}

  数据库依赖注入在staup.cs里面已经自己生成好了

public void configureservices(iservicecollection services)
        {
            services.addrazorpages();
            //数据库连接
            services.adddbcontext<corerazorpagescontext>(options =>
                    options.usesqlserver(configuration.getconnectionstring("corerazorpagescontext")));
        }

 然后启动 点到商品导航上面数据就有了，也可以一些基本的操作（crud）

4、添加搜索

添加名称，guid的搜索，在pages文件夹下面的shop文件夹下面的index.cchtml.sc打开 修改

using system;
using system.collections.generic;
using system.linq;
using system.threading.tasks;
using microsoft.aspnetcore.mvc;
using microsoft.aspnetcore.mvc.razorpages;
using microsoft.entityframeworkcore;
using corerazorpages.data;
using corerazorpages.models;

namespace corerazorpages.pages.shop
{
    public class indexmodel : pagemodel
    {
        private readonly corerazorpages.data.corerazorpagescontext _context;

        public indexmodel(corerazorpages.data.corerazorpagescontext context)
        {
            _context = context;
        }
        /// <summary>
        /// 模型list
        /// </summary>
        public ilist<corerazorpages.models.shop> shop { get;set; }
        [bindproperty(supportsget = true)]
        public string searchname { get; set; }
        [bindproperty(supportsget = true)]
        public string searchguid { get; set; }
        public async task ongetasync()
        {
            var model = _context.shop.where(x=>x.id>0);
            if (!string.isnullorempty(searchname))
                model = model.where(x => x.name.contains(searchname));
            if (!string.isnullorempty(searchguid))
                model = model.where(x => x.guid.contains(searchguid));
            shop = await model.tolistasync();
        }
    }
}

 在index.cshtml里面添加

<p>
    <a asp-page="create">create new</a>
</p>
<form>
    <p>
        名字: <input type="text" asp-for="searchname" />
        guid: <input type="text" asp-for="searchguid" />
        <input type="submit" value="搜索" />
    </p>
</form>

 searchname 、searchguid：包含用户在搜索文本框中输入的文本。 searchstring 也有 [bindproperty] 属性。 [bindproperty] 会绑定名称与属性相同的表单值和查询字符串。 在 get 请求中进行绑定需要 (supportsget = true)。

5、添加字段，验证

5.1在模型文件shop.cs添加一个字段remark

using system;
using system.collections.generic;
using system.componentmodel.dataannotations;
using system.linq;
using system.threading.tasks;

namespace corerazorpages.models
{
    /// <summary>
    /// 商品类
    /// </summary>
    public class shop
    {
        
        [display(name="id")]
        public int id { get; set; }
        [display(name = "guid")]
        public string guid { get; set; }
        [display(name = "名称")]
        public string name { get; set; }
        [display(name = "价格")]
        public decimal price { get; set; }
        [display(name = "添加日期")]
        [datatype(datatype.date)]
        public datetime addtime { get; set; }
        /// <summary>
        /// 新加字段、验证
        /// </summary>
        [required]//必填
        [stringlength(10,errormessage ="{0}最大长度10  必填")]//最大长度
        [regularexpression(@"^[a-z]+[a-za-z""'\s-]*$")]//验证格式
        public string ramake { get; set; }
    }
}

 

 5.2nuget包管理器>程序包管理控制台依次输入add-migration remake、update-database，

 

 

 

 

 5.3、编辑shop文件夹下面的index.cshtml、create.cshtml、delete.cshtml、details.cshtml、edit.cshtml文件添加remake字段

 <td>
                @html.displayfor(modelitem => item.ramake)
            </td>



 <div class="form-group">
                <label asp-for="shop.ramake" class="control-label"></label>
                <input asp-for="shop.ramake" class="form-control" />
                <span asp-validation-for="shop.ramake" class="text-danger"></span>
            </div>




 <dd class="col-sm-10">
            @html.displayfor(model => model.shop.ramake)
        </dd>




<div class="form-group">
                <label asp-for="shop.ramake" class="control-label"></label>
                <input asp-for="shop.ramake" class="form-control" />
                <span asp-validation-for="shop.ramake" class="text-danger"></span>
            </div>

 

5.4、运行起来测试看

6、代码总结：

• razor 页面派生自 pagemodel。 按照约定，pagemodel 派生的类称为 <pagename>model。 此构造函数使用依赖关系注入将 razorpagesmoviecontext 添加到页。 所有已搭建基架的页面都遵循此模式，对页面发出请求时，ongetasync 方法向 razor 页面返回影片列表。 调用 ongetasync 或 onget 以初始化页面的状态。 在这种情况下，ongetasync 将获得影片列表并显示出来。

  当 onget 返回 void 或 ongetasync 返回 task 时，不使用任何返回语句。 当返回类型是 iactionresult 或 task<iactionresult> 时，必须提供返回语句

• @page 指令：@page razor 指令将文件转换为一个 mvc 操作，这意味着它可以处理请求。 @page 必须是页面上的第一个 razor 指令。 @page 是转换到 razor 特定标记的一个示例

• @model 指令指定传递给 razor 页面的模型类型。 在前面的示例中，@model 行使 pagemodel 派生的类可用于 razor 页面。 在页面上的 @html.displaynamefor 和 @html.displayfor html 帮助程序中使用该模型。

现在开始对razor页面有一定了解，大多数代码都是系统自己生成的，数据库上下文类、依赖注入、我也是对core还不怎么熟悉不知道怎么学习跟着做就行了，对后面肯定有很大的帮助。

原文地址：