返回顶部
首页 > 资讯 > 后端开发 > ASP.NET >ASP.NETCore中的Razor页面实现路由功能
  • 705
分享到

ASP.NETCore中的Razor页面实现路由功能

2024-04-02 19:04:59 705人浏览 八月长安
摘要

在服务器端 WEB 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求。最简单的方法是将 URL 映射到磁盘上的物理文件,在 Raz

服务器WEB 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求。最简单的方法是将 URL 映射到磁盘上的物理文件,在 Razor 页面框架中,asp.net团队就是这样实现的。

关于 Razor 页面框架如何将 URL 与文件相匹配,有一些规则您必须了解,以及如何根据需要自定义规则改变输出的结果。如果您将 Razor 页面与 Web FORM 框架进行比较,您还需要了解取代的 Ur l参数以及在URL中传递数据的机制。

规则一,Razor 页面需要一个根目录。默认情况下,该根目录是 Pages,位于Web应用程序项目的根目录中。您可以在Startup类的ConfigureServices方法中配置其它文件夹作为根目录。以下是将根目录更改为位于应用程序 “Content” 文件夹:

    public void ConfigureServices(IServiceCollection services)
    { 
        services 
            .Addmvc(). 
            AddRazorPagesOptions(options => { 
                options.RootDirectory = "/Content";
         }); 
    }

规则二,URL映射到Razor页面,URL不包含文件扩展名。

规则三,“Index.cshtml”是一个默认文档,这意味着如果URL中缺少文件名,该请求将被映射到指定文件夹中的“Index.cshtml”。以下是一些URL如何映射到文件路径的示例:

URL映射文件
www.domain.com/Pages/Index.cshtml
www.domain.com/index/Pages/Index.cshtml
www.domain.com/index/Pages/Index.cshtml
www.domain.com/account/Pages/account.cshtml 或者 /Pages/account/index.cshtml

在最后一个例子中,URL映射到两个不同的文件 - 根目录中的“account.cshtml”、“account”文件夹中的“index.cshtml”。Razor 页面框架无法识别要选择哪一个文件,因此如果您在应用程序中实际同时拥有这两个文件,那么如果您尝试浏览www.domain.com/account,会抛出如下异常:

AmbiguousActionException: Multiple actions matched. The following actions matched route data and had all constraints satisfied:

Page: /account/Index

Page: /account

URL传递参数

就像大多数其它框架一样,参数可以作为查询字符串在 URL 中传递,例如:www.domain.com/product?id=1;或者,您可以将其作为路由参数传递,因此上述示例将变为www.domain.com/product/1。URL的一部分必须映射到参数名称,在页面的路由模板来实现的,@page指令的一部分:

@page "{id}"

该模板告诉框架将页面名称之后URL的第一段作为“id”的路由参数。您可以通过多种方式访问路由参数的值。第一个是使用RouteData字典:

@page "{id}"
{
    var productId = RouteData.Values["id"];
}

或者,您可以向该页面的OnGet()方法添加与路由参数相同名称的参数,并将其值分配给公共属性:

@page "{id}"
@{
    @functions{

        public int Id { get; set; }

        public void OnGet(int id)
        {
            Id = id;
        }
    }
}
<p>The Id is @Id</p>

如果您使用的是PageModel,那么是这样实现的:

using Microsoft.Aspnetcore.Mvc.RazorPages;

namespace RazorPages.Pages
{
    public class ProductModel : PageModel
    {
        public int Id { get; set; }
        public void OnGet(int id)
        {
            Id = id;
        }
    }
}
@page "{id}"
@model  ProductModel
<p>The Id is @Model.Id</p>

最后,您可以在公有属性使用BindProperty特性,并省略该OnGet方法中的参数。Razor 文件内容保持不变,但是PageModel代码略有更改:

using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPages.Pages
{
    public class ProductModel : PageModel
    {
        [BindProperty(SupportsGet = true)]
        public int Id { get; set; }
        public void OnGet()
        {
        }
    }
}

约束

此外,在此示例中参数的约束是它必须有一个值。URL www.domain.com/product/applewww.domain.com/product/21一样有效,都是可以与路由匹配。如果您希望id值为整数,则可以通过将数据类型添加到模板来指定约束:

@page "{id:int}"

现在,如果您尝试通过“apple”作为参数值,应用程序将返回404 Not Found状态码。

您可以指定值不是必需的,可以将参数设置为可为空类型:

@page "{id:int?}"

如果您的应用程序允许使用“apple”作为参数值,则可以指定只允许使用A-Z和a-z的字符:

@page "{id:alpha}"

您可以与最小长度要求相结合:

@page "{id:alpha:minlength(4)}"

更多的约束信息,可以查看微软文档。

友好URL

友好的URL能够将 URL 映射到磁盘上的任意文件,打破根据文件名一对一的映射关系。您可以使用这个特性来不改变 URL 以进行SEO优化而不能重命名文件的问题,例如,如果希望所有请求由一个文件进行处理。友好 URL 在Startup类型的ConfigureServices方法中配置,调用RazorPagesOption类的AddPageRoute方法。以下示例将 URL www.domain.com/product 映射到Razor 页面 “extras”文件夹“products.cshtml”文件:

    public void ConfigureServices(IServiceCollection services)
    {
        services
            .AddMvc()
            .AddRazorPagesOptions(options =>
            {
                options.Conventions.AddPageRoute("/extras/products", "product");
            });
    }

如果您在 Web Forms 中使用过友好 URL,则应注意AddPageRoute方法的参数顺序与 Web Forms MapPageRoute方法相反,文件路径作为第一个参数。此外,AddPageRoute将路由模板作为第二参数,而不是路由定义,其中任何约束被单独定义。

最后一个例子说明将所有请求映射到单个文件。如果站点内容存储在特定位置(数据库markdown文件),并且由单个文件(例如 “index.cshtml” )负责根据 URL 定位内容,然后将其处理为HTML,则可以执行此操作:

    public void ConfigureServices(IServiceCollection services)
    {
        services
            .AddMvc()
            .AddRazorPagesOptions(options => {
                 options.Conventions.AddPageRoute("/index", "{*url}");
        });
    }

路由模板(*)通配符表示“全部”。即使使用此配置,磁盘上的现有文件和URL之间的匹配规则仍然正常运行。

总结

Razor 页面中的路由系统非常直观,基于文件位置,但如果需要覆盖默认约定,它也非常强大,可配置。

到此这篇关于ASP.net core中Razor页面实现路由功能的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: ASP.NETCore中的Razor页面实现路由功能

本文链接: https://lsjlt.com/news/140002.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • ASP.NETCore中的Razor页面实现路由功能
    在服务器端 Web 应用程序框架中,其中非常重要的设计是开发人员如何将URL与服务器上的资源进行匹配,以便正确的处理请求。最简单的方法是将 URL 映射到磁盘上的物理文件,在 Raz...
    99+
    2024-04-02
  • ASP.NETCore中的Razor页面使用视图组件
    视图组件简介 在新的ASP.NET Core MVC中,视图组件类似于局部视图,但它们更强大。视图组件不使用模型绑定,仅依赖于您在调用时提供的数据。 视图组件特性: 呈现页面响应的某...
    99+
    2024-04-02
  • vue3配置router路由并实现页面跳转功能
    目录1、安装vue-router2、根目录下新建router文件夹,下面新建index.js文件和routes.js2.1文件中引入vue方法、配置页面具体路径3、main.js文件...
    99+
    2023-05-17
    vue3页面跳转 vue3配置router路由
  • vue3+Typescript实现路由标签页和面包屑功能
    目录在vue中实现路由标签页和面包屑需求分析最终效果实现步骤第一步:创建路由标签组件和面包屑第二步:创建路由标签数组第三步:监听路由变化并自动添加新标签第四步:处理关闭标签事件第五步...
    99+
    2023-05-19
    vue3面包屑 vue3路由标签页
  • nodejs中实现路由功能
    初学Node,发现了与自己之前的观点完全不同的场面——你眼中的JavaScript,是干什么用的呢?特效?or 只是与客户端的交互?可以说,JavaScript最早是运行在浏览器中的,然而你要这样想,浏览器...
    99+
    2022-06-04
    路由功能 nodejs
  • Flutter实现页面路由及404路由拦截
    为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigator.of(context).push( MaterialPageRoute(builde...
    99+
    2024-04-02
  • Flutter app页面路由以及路由拦截的实现
    目录为什么要使用路由 Flutter路由介绍 页面结构与逻辑 实现关键代码 页面路由跳转 为什么要使用路由 在之前我们的代码中,页面跳转使用的代码如下所示: Navigato...
    99+
    2024-04-02
  • ASP.NET MVC实现路由功能
    1、定义路由、路由规则 public static void RegisterRoutes(RouteCollection routes) { ...
    99+
    2022-11-13
    ASP.NET MVC 路由功能
  • vue-router中怎么实现单页面路由
    本篇文章给大家分享的是有关vue-router中怎么实现单页面路由,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。vue中,有一个类库叫做vue...
    99+
    2024-04-02
  • nodeJS实现路由功能实例代码
    前面的话 本文将使用NodeJS实现较复杂应用的路由功能 结构 项目结构如下 代码如下 功能 【router.js】 // 加载所需模块 var http = require('http');...
    99+
    2022-06-04
    实例 代码 路由功能
  • Vue实现路由跳转至外界页面
    目录Vue路由跳转至外界页面解决办法Vue路由跳转页面的几种方式总结Vue路由跳转至外界页面 用法 如果使用路由是在 vue 页面中来回跳转,可以使用 this.$router.pu...
    99+
    2022-12-09
    Vue路由 Vue路由跳转 Vue路由跳转页面
  • 怎样使用nodejs实现路由功能
    这篇文章主要介绍怎样使用nodejs实现路由功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!结构项目结构如下代码如下功能【router.js】// 加载所需模块var http =&n...
    99+
    2023-06-06
  • 如何使用nodejs实现路由功能
    这篇文章将为大家详细讲解有关如何使用nodejs实现路由功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。结构  项目结构如下  代码如下功能【router.js】// 加载所需模块var&nb...
    99+
    2023-06-14
  • 怎么用Vue-Router实现路由功能
    这篇“怎么用Vue-Router实现路由功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么用Vue-Router实现路由...
    99+
    2023-07-04
  • 如何进行SAP Hybris Commerce的页面路由实现
    今天就跟大家聊聊有关如何进行SAP Hybris Commerce的页面路由实现,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。登录Hybris前台,在product catalog里...
    99+
    2023-06-04
  • 微信小程序怎么实现页面路由
    本文小编为大家详细介绍“微信小程序怎么实现页面路由”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么实现页面路由”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。什么是路由?路由(routing)是指分组...
    99+
    2023-06-30
  • 怎么使用vue-router实现单页面路由
    这篇“怎么使用vue-router实现单页面路由”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用vue-router实...
    99+
    2023-07-04
  • Node.js自定义实现文件路由功能
    一、创建路由处理定义 //获取http模块 var http = require('http'); //文件 模块 var fs = require('fs'); //404文件 var e...
    99+
    2022-06-04
    自定义 文件 路由功能
  • 如何使用Vue-Router2实现路由功能
    这篇文章主要为大家展示了“如何使用Vue-Router2实现路由功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用Vue-...
    99+
    2024-04-02
  • Vue通过路由实现页面间参数的传递
    目录在Vue项目开发中,页面之间传递参数有很多种方法1.路由传递2.sessionStorage/localStorage缓存的形式进行传递3.父子组件之间的传值 4.使用...
    99+
    2023-05-17
    vue路由实现页面参数传递 vue页面参数传递 vue路由参数传递
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作