ASP.NET Core使用Razor页面

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

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

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

文件/文件夹 说明
wwwroot 静态文件目录
Pages Razor页面
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.cshtml Razor页面
HelloWorld.cshtml.cs Razor页面对应的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页面的更多相关文章

  1. 独立使用Asp.net Core 的razor模板 (一):Razor引擎的一些细节

    由于最近需要写一些界面稍微好看点的Winform程序,如果用原生控件,,想要达到好看的程度,需要花费比较大的功夫,因为之前使用过CefSharp,因此发觉如果是使用CEF+Html的方式,界面可以相对 ...

  2. [译]ASP.NET Core揭秘 - Razor Pages

    原文 什么是Razor Pages? Razor pages是ASP.NET Core 2.0的新特性,它被设计用来更快的开发页面,比传统的MVC模式更便捷. 创建项目 为了使用Razor Pages ...

  3. Asp.net core中由于页面编码导致的中文乱码

    问题描述 最近使用asp.net core写了一个简单的网站,在windows系统下完全没有出现问题.后来在linux系统中搭建了docker,并且在linux中自动使用git获取源码,编译,部署一条 ...

  4. Asp.Net Core Mvc Razor之RazorPage

    在AspNetCore.Mvc.Razor命名空间中的RazorPage继承RazorPageBase,并定义的属性为: HttpContext Context 表示当前请求执行的HttpContex ...

  5. asp.net core 的 razor pages 如何使用ajax调用后台方法

    Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法. 当网页被写入浏览器时,基于服务器的代码能够创建动态内容. 在网页加载时,服务器在向浏览器返回页面 ...

  6. asp.net core + 前端H5 页面视频站制作尝试

    .net core 2.1出来一段时间了,一直关注,前周花了半天时间学习了一下,特制作了一个视频小站(欢迎扫码体验): 页面首页效果如下: 播放页面效果如下: 部分代码: using ENT.IBLL ...

  7. ASP.NET Core 中的 Razor 页面介绍

    标题:ASP.NET Core 中的 Razor 页面介绍 地址:https://docs.microsoft.com/zh-cn/aspnet/core/razor-pages/index?view ...

  8. 学习ASP.NET Core Razor 编程系列一

    一. 概述 .NET Core 1.0发布的时候就想进行学习的,不过根据微软的以往的发布规律1.0版可以认为是大众测试版,2.0才算稳定.现在2.1都已经发布了预览版,之前对其"不稳定&qu ...

  9. [Asp.Net Core] Blazor WebAssembly - 工程向 - 如何在欢迎页面里, 预先加载wasm所需的文件

    前言, Blazor Assembly 需要最少 1.9M 的下载量.  ( Blazor WebAssembly 船新项目下载量测试 , 仅供参考. ) 随着程序越来越复杂, 引用的东西越来越多,  ...

随机推荐

  1. Codeforces 342D Xenia and Dominoes 状压dp

    码就完事了. #include<bits/stdc++.h> #define LL long long #define fi first #define se second #define ...

  2. GFS 安装使用

    准备环境: 1.OS: Centos:7.2x86_64 2.主机 server1: 192.168.30.41 wohaoshuai1 server2: 192.168.30.42 wohaoshu ...

  3. netty04(重点来了、指定某个客户端发信息或者群发)小声嘀咕~~我也是从零开始学得、、、想学习netty的又不知道怎么下手的童鞋们~~

    还是和上几篇一样,先给出前面笔记的连接,有没看的可以去看看再来! netty01   . netty02  .netty03 看到这里.你基本上可以使用netty接受信息和根据对应的信息返回信息了 接 ...

  4. 场景/故事/story——寻物者发布消息场景、寻失主发布消息场景、消息展示场景、登录网站场景

    1.背景:(1)典型用户:吴昭[主要]  尤迅[次要] 王丛[次要] 佑豪[次要](2)用户的需求/迫切需要解决的问题a.吴昭:经常在校园各个地方各个时间段,丢失物品需要寻找.b.吴昭:偶尔浏览一下最 ...

  5. 2018年中国研究生数学建模竞赛C题 二等奖 赛题论文

    2018年中国研究生数学建模竞赛C题 对恐怖袭击事件记录数据的量化分析 恐怖袭击是指极端分子或组织人为制造的.针对但不仅限于平民及民用设施的.不符合国际道义的攻击行为,它不仅具有极大的杀伤性与破坏力, ...

  6. Fire! -两次dfs

    题目描述: Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the owner of ...

  7. 003.Heartbeat MySQL双主复制

    一 基础环境 节点 系统版本 MySQL版本 业务IP 心跳IP Master01 CentOS 7.5 MySQL 5.6 192.168.88.100 192.168.77.100 Master0 ...

  8. XamarinEssentials教程清空键值

    XamarinEssentials教程清空键值 Preferences类的Clear()方法可以清空所有的键和值.该方法有两种形式,下面依次进行介绍. (1)Clear()方法的语法形式如下: pub ...

  9. javascript 伪数组和转化为标准数组

    1: 什么是伪数组 伪数组是一个含有length属性的json对象, 它是按照索引的方式存储数据, 它并不具有数组的一些方法,只能能通过Array.prototype.slice转换为真正的数组,并且 ...

  10. [数据库]Sqlite使用入门

    官网的文档结构十分恶劣,大概翻了一下,提供入门指引. 0. sqlite的安装 根据自身情况,在官网下载32位/64位的dll文件以及sqlite-tools-win32-x86-3240000.zi ...