欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-27 20:22:37
1、创建一个Asp.Net Core Web应用程序 1.1、打开VS2019 新建项目 1.2、选好项目位置后进入选择界面,选择Web应用程序 1.3、进去的页面结构如下 Pages 文件夹:包含 Razor 页面和支持文件。 每个 Razor 页面都是一对文件: 一个 .cshtml 文件,其中 ......

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

1.1、打开vs2019 新建项目

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

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

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

 

1.3、进去的页面结构如下

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

 

 

 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,数据库上下文点击右边的+号

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

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

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

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

   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=密码"
    }
}

 

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

 

看生成的数据库

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

 

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)

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

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)

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

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,

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

 

 

 

 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、运行起来测试看

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

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还不怎么熟悉不知道怎么学习跟着做就行了,对后面肯定有很大的帮助。

原文地址: