Blazor 页面重定向

最新推荐文章于 2024-06-08 08:07:40 发布
最新推荐文章于 2024-06-08 08:07:40 发布
阅读量4.1k 收藏 1
点赞数
分类专栏： Blazor 文章标签： blazor 重定向 跳转 页面 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33319140/article/details/90215274
版权
  • 首先在组件中引入相关依赖项
@inject IUriHelper uriHelper
  • 然后在@function中需要重定向的位置，使用如下代码
uriHelper.NavigateTo("");

其中NavigateTo的参数为路由地址，比如在本地的时候，默认路由为http://locallhost:5000，要重定向到http://locallhost:5000/login，那么参数就是

"login"
Expecto.Patronum
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Blazor之路由
六十五号腕
06-25 1510
路由的常用场景 Web开发当中，路由是指页面之间的相互跳转，最常见的有以下两种情况： 浏览器输入地址或者点击链接 业务代码的定向跳转 不管通过哪种方式，其实本质上都是一样的，都是通过URL的来定位到对应的页面。 这里还是以WebAssembly的项目为基础来探索一下路由的功能吧。对项目结构不清楚的朋友可以先看上一篇Blazor 初体验。 浏览器输入地址或者点击链接 通过上一篇Blazor 初体验我们已经知道每个页面都有个@page指令来定义该页面对应的URL。 比如： @page "/" @page "
JSP 页面重定向
01-08
JSP 页面重定向 当需要将文档移动到一个新的位置时，就需要使用JSP重定向了。 最简单的重定向方式就是使用response对象的sendRedirect()方法。这个方法的签名如下： public void response.sendRedirect(String ...
Blazor组件多路由模板的使用
knownchen的专栏
04-24 360
Blazor组件支持使用多个 @page 指令的多个路由模板。 示例如下： @page "/sample1" @page "/smaple2" @inject NavigationManager Navigation <h1>@url</h1> @code { private string url; protected override void OnParametersSet() { base.OnParametersSet();
尝试使用blazor（一）吐槽blazor，未开始之前，先吐为敬
最新发布
mrdzhu的博客
06-08 550
基本上是真实的，可以说90%的代码，都可以用c#来解决掉，当然不包括css+html代码。原因之一：因为就前端本身来说，blazor其实是在纯前端的技术上加了一层c#，而不是用c#完全代替javascript。非常冷门，我刚用blazor遇到问题，花钱找人解决，找了国内几个著名的平台，几乎没人会blazor。再次，blazor生成的项目，在win中可以直接双击EXE文件就运行，连node.js和Nginx这些都省了，在linux中也只需要配置Nginx就能使用了，非常方便。就目前而言，答案是否定的。
Blazor Webassembly访问api时的未登录重定向问题
u010769267的博客
11-27 795
默认创建的Blazor Webassembly hosted项目，在Server端设置启用权限功能后，未登陆情况下访问api会返回302重定向，重定向到/Account/Login页面，这并不是我们想要的 可以设置Webassembly端的HttpClient，增加Header X-Requested-With:XMLHttpRequest 在Webassembly端的Program.cs中，修改： builder.Services.AddScoped(sp => new HttpClient { B
c 获取当前url html,c# – 在Blazor组件中获取当前Url
weixin_39864101的博客
06-22 283
我需要知道当前页面的url,以检查是否必须将某种样式应用于元素.下面的代码就是一个例子.@using Microsoft.AspNetCore.Blazor.Services@inject IUriHelper UriHelper@implements IDisposable@urlBlazorHomeCounterFetch data@functions {private string url ...
什么是blazor
weixin_30907935的博客
09-13 1180
blazor是一个微软推出的基于webassembly和C#(面向对象) 以及F#(面向函数)的前端框架 它类似vue react anglar的单页前端框架 只是他不再使用js或typescript 一年前我以为typescript会一骑绝尘 但是前端技术的更新迭代总是快得令人眼花缭乱 众所皆知,C#生态不好,但这不能掩盖它血统优于java的事实 现在你可以web开...
Blazor学习之旅 (6) 路由系统
dotNET跨平台
11-26 573
【Blazor】|总结/Edison Zhou大家好，我是Edison。许久没有更新Blazor学习系列了，今天续更。Blazor 的路由系统就和 ASP.NET MVC的路由系统一样，可以为我们提供灵活的选项，可用于确保用户请求到达可处理它们并返回用户想要的信息的组件。本篇，我们来了解下在Blazor中的路由系统。使用路由模板在 Blazor 中，使用路由来确保将每个请求发送到最适合的组件，并...
.net页面重定向 URLRewriter
11-28
.net页面重定向 URLRewriter，页面重写技术 UrlRewrite就是我们通常说的地址重写，用户得到的全部都是经过处理后的URL地址。 优点 　一：提高安全性，可以有效的避免一些参数名、ID等完全暴露在用户面前，如果用户...
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
10-18
页面重定向在很多场景下是必要的，比如用户登录后跳转到首页，或者在操作成功后跳转到新的页面显示结果。 `redirect`方法在ThinkPHP中被用来创建一个HTTP响应，该响应指示浏览器跳转到另一个URL。这个方法的语法...
ASP.NET MVC页面重定向简单介绍
10-20
主要为大家详细介绍了ASP.NET MVC页面重定向的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现页面跳转重定向的几种方式
10-25
主要介绍js实现页面跳转重定向的几种方式,需要的朋友可以参考下
Blazor 路由及导航开发指南
farway000的博客
07-13 1040
翻译自 Waqas Anwar 2021年4月2日的文章《A Developer’s Guide To Blazor Routing and Navigation》[1]检查传入的请求 URL 并将它们导航到对应的视图或页面是每个单页应用程序 (SPA) 框架的基本功能。Blazor Server 和 WebAssembly 应用程序也同样支持使用一些内置组件和服务进...
Blazor之Router入门
qq_36819973的博客
11-10 291
Router 组件允许路由到 Razor 组件。 Router 组件在 App 组件 (App.razor) 中使用。编译带有 @page 指令的 Razor 组件 (.razor) 时，将为生成的组件类提供一个 RouteAttribute 来指定组件的路由模板。
学习ASP.NET Core Blazor编程系列十——路由（上）
Gefangenes的博客
06-05 1126
在Blazor里给每个组件指定一个路径（URL），当路由匹配的时候，会在节点里面渲染出来，如果没有的话会在节点里面渲染，当然你也可以自定义一个404的页面。在Visual Studio 2022的解决方案资源管理器中，找到App.razor组件，使用鼠标左键双击，在文本编辑器中打开，找到Router组件的 NotFound 模板，NotFound 模板中设置自定义内容。例如如下示例代码：
Blazor Webassembly多标签页开发
A4610A的专栏
10-11 338
最近准备用Blazor Webassembly做后台开发要用到多标签页，找了半天发现绝大多数都是Blazor Server的多标签没有Webassembly。没办法只能自己想办法造轮子了。 查了许多资料最后还是决定用iframe来实现，不过标签切换等逻辑是用c#代码实现的。 基本功能已经都实现了不论是标签滚动、激活、左移、右移、关闭其他，还是在内容页跳转、新增、关闭标签都有实现。 已经可以用来做实际项目 源码地址: https://github.com/liningit/BlazorWebassemblyM
Blazor University （22）路由 —— 定义路由
dotNET跨平台
05-17 179
原文链接：https://blazor-university.com/routing/路由与标准 ASP.NET MVC 一样，Blazor 路由是一种用于检查浏览器 URL 并将其匹配到要呈现的页面的技术。路由比简单地将 URL 匹配到页面更灵活。它允许我们根据文本模式进行匹配，例如，上图中的两个 URL 都将映射到同一个组件并传入一个 ID 用于上下文（在本例中为 1...
C# URL的封装UrlAppHelper
内事问度娘，外事问谷歌！
03-19 173
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web;   namespace Utility.Helper {     /// &lt;summary&gt;     /// App操作类     /// &lt;/s...
blazor 做一个登陆页面
05-11
首先，你需要创建一个 Blazor 应用程序。在 Visual Studio 中，选择“创建新项目”，然后选择“Blazor 应用程序”。 接下来，你需要创建一个 Login 组件。在 Blazor 中，组件是页面的基本构建块。你可以使用 Razor 语法创建组件。 在 Login 组件中，你需要添加一个表单和两个文本框，一个用于输入用户名，一个用于输入密码。你还需要添加一个按钮，用于提交表单。这个按钮将触发一个事件，该事件将验证用户输入，并将用户重定向到主页。 下面是一个示例 Login 组件： ```html @page "/login" @using System.Security.Authentication @inject HttpClient Http <h1>Login</h1> @if (errorMessage != null) { <p>@errorMessage</p> } <form> <label for="username">Username:</label> <input type="text" id="username" name="username" @bind-value="@username" /> <label for="password">Password:</label> <input type="password" id="password" name="password" @bind-value="@password" /> <button type="button" @onclick="@Login">Login</button> </form> @code { private string username; private string password; private string errorMessage; private async Task Login() { try { var result = await Http.PostAsync("api/login", new FormUrlEncodedContent(new Dictionary<string, string> { ["username"] = username, ["password"] = password })); if (result.StatusCode == HttpStatusCode.Unauthorized) { errorMessage = "Invalid username or password"; } else if (result.IsSuccessStatusCode) { NavigationManager.NavigateTo("/"); } } catch (Exception ex) { errorMessage = ex.Message; } } } ``` 在这个示例中，我们使用 HttpClient 来与后端 API 进行通信。在这个示例中，我们将表单数据作为 URL 编码的键值对发送到后端 API。如果用户名或密码无效，我们会显示一个错误消息。如果登录成功，我们将重定向到主页。 当用户输入用户名和密码并单击“登录”按钮时，会触发 Login 方法。在 Login 方法中，我们使用 HttpClient 来向后端 API 发送 POST 请求。如果请求成功，我们将重定向到主页。如果请求失败，我们将显示一个错误消息。 最后，你需要在应用程序中注册 Login 组件。你可以在 App.razor 文件中添加以下代码： ```html <Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> ``` 这会将 Login 组件添加到路由器中，以便用户可以访问它。现在，你可以在浏览器中运行应用程序，并访问 /login 页面，以查看你的登录页面的外观和功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值