分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

ASP.NET Core使用Razor页面

发布时间:2023-09-06 01:47责任编辑:林大明关键词:.NET

ASP.NET Core使用Razor页面

Razor是ASP.NET的页面引擎,在ASP.NET MVC 3以后被广泛使用,我在之前的博客中有所介绍,需要更多了解的朋友请移步【Razor语法】

在ASP.NET中,我们仍然使用Razor来构建Web页面。

首先使用Visual Studio 2017创建一个Web应用程序,打开创建好的项目,可以看到VS已经为我们创建好了项目的结构:

文件/文件夹说明
wwwroot静态文件目录
PagesRazor页面
appsettings.json配置
Program.cs托管ASP.NET Core的应用
Startup.cs应用启动类,用于配置应用程序

与空白应用程序不同的是,Web应用默认为我们引用了MVC管道,代码在Startup文件中:

// This method gets called by the runtime. Use this method to add services to the container.public void ConfigureServices(IServiceCollection services){ ???services.AddMvc();}// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.public void Configure(IApplicationBuilder app, IHostingEnvironment env){ ???if (env.IsDevelopment()) ???{ ???????app.UseBrowserLink(); ???????app.UseDeveloperExceptionPage(); ???} ???else ???{ ???????app.UseExceptionHandler("/Error"); ???} ???app.UseStaticFiles(); ???app.UseMvc();}

接下来我们创建一个自己的Razor页面。

Hello World 页面

在Razor文件夹邮件,选择Razor,不使用模板页,创建好以后,可以看到生成了两个文件:

文件名说明
HelloWorld.cshtmlRazor页面
HelloWorld.cshtml.csRazor页面对应的Model

如果需要修改HTML代码,则在Razor页面中进行修改;数据、页面行为等内容则在Model文件中进行修改。

运行我们的HelloWorld页面,Razor对应的页面地址为:~/HelloWorld

添加Model字段

为了测试Model的用法,我们在Model中添加两个字段,并在OnGet方法中赋值,修改后的Model如下:

public class HelloWorldModel : PageModel{ ???/// <summary> ???/// 操作 ???/// </summary> ???public string Method { get; set; } ???/// <summary> ???/// 服务器时间 ???/// </summary> ???public string ServerTime ???{ ???????get ???????{ ???????????return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"); ???????} ???} ???public void OnGet() ???{ ???????this.Method = "Get"; ???}}

对页面进行修改,添加显示Model中字段的代码:

<body> ???<h1>Hello World</h1> ???<p> ???????Method:@Model.Method ???</p> ???<p> ???????Server time:@Model.ServerTime ???</p></body>

编译应用程序,刷新浏览器中的页面查看效果。

添加POST操作

添加新的实体Visitor

public class Visitor{ ???public string Name { get; set; } ???public string Email { get; set; }}

在Model中添加OnPost代码:

/// <summary>/// 访客/// </summary>[BindProperty]public Visitor Visitor { get; set; }/// <summary>/// Post操作/// </summary>public void OnPost(Visitor visitor){ ???this.Method = "Post"; ???this.Visitor = visitor;}

对Visitor字段使用了BindProperty特性,表明这个字段进行绑定操作。

对页面进行修改:

<form method="post"> ???<p> ???????<label>姓名:</label> ???????<input type="text" asp-for="Visitor.Name" /> ???</p> ???<p> ???????<label>邮箱:</label> ???????<input type="text" asp-for="Visitor.Email" /> ???</p> ???<input type="submit" value="提交" /></form>

刷新页面,填写相应的信息,随后点击提交按钮,OnPost方法可以正常接收到参数,更新后的页面也可以带出刚才提交的数据。

添加数据验证

public class Visitor{ ???[Required] ???[StringLength(20, MinimumLength =5)] ???public string Name { get; set; } ???[Required] ???[EmailAddress] ???public string Email { get; set; }}

使用DataAnnotations对Visitor类中的字段进行标注。然后在OnPost中进行验证:

/// <summary>/// Post操作/// </summary>public IActionResult OnPost(){ ???if (!ModelState.IsValid) ???{ ???????return Redirect("~/HelloWorld"); ???} ???this.Method = "Post"; ???return Page();}

此时,如果提交的数据不能通过验证,则页面跳转到Get请求。

ASP.NET Core使用Razor页面

原文地址:https://www.cnblogs.com/youring2/p/8687005.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved