本文共 20480 字,大约阅读时间需要 68 分钟。
目录
为了设置本文的上下文,自Blazor首次发布以来,已经有许多关于如何处理编辑表单的讨论、文章和建议。特别是在离开脏表单时如何停止或至少警告用户。这个问题并非特定于Blazor:所有单页应用程序和网站都面临相同的挑战。
在经典的Web表单中,每个导航都是获取或发布回服务器的信息。我们可以使用内置window.beforeunload事件来警告用户他们页面上有未保存的数据。不太好,但至少有一些好处——我们将在以后使用。这项技术在SPA中不适用。在外人看来,导航事件不是。NavigationManager拦截页面中的任何导航尝试,触发其自己的LocationChanged事件并下沉请求。连接到这个事件中的Router完成了它的魔法,并加载新的组件集到页面中。没有真正的浏览器导航发生,因此浏览器没有任何beforeunload事件可捕获。
由程序员决定编写代码来阻止用户离开肮脏的表格。当您的应用程序依赖于URL导航借口时,说起来容易做起来难。工具栏、导航侧栏和许多按钮会提交URL以便在应用程序中导航。考虑现成的Blazor模板。左侧导航栏中的所有链接都位于顶部栏中。
就个人而言,我对整个路由难题都存在严重的问题:SPA是一种应用程序,而不是网站,但是我认为其必须是其中的一小部分!本文适用于大多数。
我遇到的所有NetCore 3.1解决方案都是一种形状或另一种形状的杂物,我自己创建了一个以上的形状。社区希望的是NetCore 5中的更改,特别是一些NavigationManager取消或阻止导航请求的额外功能。那没有发生:我不认为团队对于正确的解决方案有共识,所以我们回到正题。
我在本文中介绍的是我针对该问题的最新方法。它不是完美的,但我认为在获得一些新的浏览器标准(允许切换到SPA模式并控制工具栏导航)之前,我们不会获得接近完美的解决方案。
可以在上的找到该代码。
第一个挑战——如何阻止用户访问标准页面上的任何按钮/链接导航内容?
注意——这里的大多数代码都是实验性的——绝对不适合生产。几乎没有错误检查等等。尝试保持透明性是民权主义者。
首先,我们建立一个基本的模态对话框。这与CSS框架无关。欢迎您采用它以适合Bootstrap等。
将一个razor组件添加到“共享”中,并使用一个名为ModalDialog1的文件后面的代码。添加以下代码。它是天气预报的伪装编辑。
是的,这是Bootstrap!
@if (this.Display){}
using Microsoft.AspNetCore.Components;namespace CEC.Blazor.Editor.Shared{ public partial class ModalDialog1 : ComponentBase { public bool Display { get; private set; } public void Show() { this.Display = true; this.InvokeAsync(this.StateHasChanged); } public void Hide() { this.Display = false; this.InvokeAsync(this.StateHasChanged); } }}
笔记
我们使用FetchData页面组件作为模板,因此在其中创建一个新的Razor组件Pages并调用它FetchData1。在文件后面创建一个FetchData1.razor.cs代码。切记将类标记为partial。
添加以下代码:
@page "/fetchdata1"@using CEC.Blazor.Editor.DataWeather forecast
This component demonstrates fetching data from a service.
@if (forecasts == null){Loading...
}else{
Date | Temp. (C) | Temp. (F) | Summary | |
---|---|---|---|---|
@forecast.Date.ToShortDateString() | @forecast.TemperatureC | @forecast.TemperatureF | @forecast.Summary |
using CEC.Blazor.Editor.Data;using CEC.Blazor.Editor.Shared;using Microsoft.AspNetCore.Components;using System;using System.Threading.Tasks;namespace CEC.Blazor.Editor.Pages{ public partial class FetchData1 : ComponentBase { [Inject] WeatherForecastService ForecastService { get; set; } private WeatherForecast[] forecasts; private ModalDialog1 Modal { get; set; } protected override async Task OnInitializedAsync() { forecasts = await ForecastService.GetForecastAsync(DateTime.Now); } private void ShowModalDialog() { this.Modal.Show(); } }}
笔记
在构建之前,我们需要做一些最后的更改。
我们需要在NavMenu中添加一个指向新页面的链接。
我们需要将“模态对话框”的css添加到站点css文件中。我们可以将此代码移动到组件css文件中进行生产,但在site.css中即时编辑更容易。
div.modal-background { display: block; position: fixed; z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}div.modal-content { background-color: #fefefe; margin: 10% auto; padding: 10px; border: 2px solid #888; width: 90%;}
运行该应用程序,然后转到FetchData1。点击一个编辑按钮。基础页面上的所有链接均被禁用。三种退出路径是:
我知道有第四,第五...(杀死进程,按电源开关...),但是没有什么可以阻止这些。
现在关闭这三个退出。我已经在仓库中创建了version2文件,但是您可以根据需要更新原始文件。
将js文件夹添加到wwwroot,然后添加一个site.js文件。
添加以下代码。
window.cecblazor_setEditorExitCheck = function (show) { if (show) { window.addEventListener("beforeunload", cecblazor_showExitDialog); } else { window.removeEventListener("beforeunload", cecblazor_showExitDialog); }}window.cecblazor_showExitDialog = function (event) { event.preventDefault(); event.returnValue = "There are unsaved changes on this page. Do you want to leave?";}
我们需要将此js文件包含在我们的应用程序中。更新Host._cshtml。
.....
我们需要向模式对话框添加更多功能,以模拟脏表单。更新ModalDialog中的按钮行。
@if (this.DirtyExit) { } else { }
更新文件添加背后的代码:
using Microsoft.AspNetCore.Components;using Microsoft.JSInterop;namespace CEC.Blazor.Editor.Shared{ public partial class ModalDialog2 : ComponentBase { [Inject] private IJSRuntime _js { get; set; } public bool Display { get; private set; } public bool IsDirty { get; set; } public bool IsLocked { get; private set; } private bool DirtyExit { get; set; } private string DirtyButtonCss => this.IsDirty ? "btn-danger" : "btn-success"; private string DirtyButtonText => this.IsDirty ? "Set Clean" : "Set Dirty"; public void Show() { this.Display = true; this.InvokeAsync(this.StateHasChanged); } public void Hide() { if (this.IsDirty) this.DirtyExit = true; else this.Display = false; this.InvokeAsync(this.StateHasChanged); } public void DirtyHide() { this.Display = false; this.DirtyExit = false; if (this.IsDirty) { this.IsDirty = false; CheckLock(); } this.InvokeAsync(this.StateHasChanged); } public void CancelHide() { this.DirtyExit = false; this.InvokeAsync(this.StateHasChanged); } public void SetDirty() { if (this.IsDirty) this.DirtyExit = false; this.IsDirty = !this.IsDirty; this.CheckLock(); this.InvokeAsync(this.StateHasChanged); } public void SetPageExitCheck(bool action) { _js.InvokeAsync("cecblazor_setEditorExitCheck", action); } public void CheckLock() { if (this.IsDirty && !this.IsLocked) { this.IsLocked = true; this.SetPageExitCheck(true); } else if (this.IsLocked && !this.IsDirty) { this.IsLocked = false; this.SetPageExitCheck(false); } } }}
现在运行该应用程序。点击一个编辑按钮。基础页面上的所有链接均被禁用。单击设置污点以模拟编辑字段。现在尝试关闭或导航或关闭浏览器。所有选项都应包括在内
现在让我们继续创建可以在生产中使用的ModalDialog框架。这将是一个模态对话框包装,我们可以使用它来显示任何组件。在这种情况下,WeatherViewer和ModalEditor组成。我创建了一个Component目录结构来组织代码,但是为了简单起见,将它们全部保留在基本名称空间中。
首先,我们需要添加一些实用程序类。
在Components/ModalDialog中,添加一个ModalResult类。代码如下。
Dialog关闭时,该类为返回值提供了一个容器。它返回一个对象Data和一个ModalResultType。静态构造函数用于构建实例。
namespace CEC.Blazor.Editor{ public enum ModalResultType { NoSet, OK, Cancel, Exit } public class ModalResult { public ModalResultType ResultType { get; private set; } = ModalResultType.NoSet; public object Data { get; set; } = null; public static ModalResult OK() => new ModalResult() { ResultType = ModalResultType.OK }; public static ModalResult Exit() => new ModalResult() { ResultType = ModalResultType.Exit }; public static ModalResult Cancel() => new ModalResult() { ResultType = ModalResultType.Cancel }; public static ModalResult OK(object data) => new ModalResult() { Data = data, ResultType = ModalResultType.OK }; public static ModalResult Exit(object data) => new ModalResult() { Data = data, ResultType = ModalResultType.Exit }; public static ModalResult Cancel(object data) => new ModalResult() { Data = data, ResultType = ModalResultType.Cancel }; }}
现在添加一个ModalOptions类。它是将配置选项传递到模式对话框的容器。这是带有getter和setter的简单IEnumerable集合对象。
using System.Collections;using System.Collections.Generic;namespace CEC.Blazor.Editor{ public class ModalOptions :IEnumerable> { // Ststic List of options - only one currently defined public static readonly string __Width = "Width"; private Dictionary Parameters { get; } = new Dictionary (); public IEnumerator > GetEnumerator() { foreach (var item in Parameters) yield return item; } IEnumerator IEnumerable.GetEnumerator() => this.GetEnumerator(); public T Get (string key) { if (this.Parameters.ContainsKey(key)) { if (this.Parameters[key] is T t) return t; } return default; } public bool TryGet (string key, out T value) { value = default; if (this.Parameters.ContainsKey(key)) { if (this.Parameters[key] is T t) { value = t; return true; } } return false; } public bool Set(string key, object value) { if (this.Parameters.ContainsKey(key)) { this.Parameters[key] = value; return false; } this.Parameters.Add(key, value); return true; } }}
添加IModalDialog接口。它定义了我们构建的任何模式对话框都需要实现的public属性和方法。它在我们的代码和特定的模态对话框实现之间提供了一个抽象层——干净的CSS版本,BootStrap版本...。
using Microsoft.AspNetCore.Components;using System.Threading.Tasks;namespace CEC.Blazor.Editor{ public interface IModalDialog { public ModalOptions Options { get; } TaskShowAsync (ModalOptions options) where TModal : IComponent; void Dismiss(); void Close(ModalResult result); void Update(ModalOptions options = null); void Lock(bool setlock); }}
现在,添加ModalDialog,IModalDialog的基本CSS不可知实现。
Razor标记非常简单,类似于我们编写的原型:
@namespace CEC.Blazor.Editor@implements IModalDialog@if (this.Display){}
在代码中:
using Microsoft.AspNetCore.Components;using Microsoft.JSInterop;using System.Threading.Tasks;namespace CEC.Blazor.Editor{ public partial class ModalDialog : IModalDialog { [Inject] private IJSRuntime _js { get; set; } public ModalOptions Options { get; protected set; } = new ModalOptions(); public bool Display { get; protected set; } public bool IsLocked { get; protected set; } protected RenderFragment _Content { get; set; } protected string Width => this.Options.TryGet(ModalOptions.__Width, out string value) ? $"width:{value}" : string.Empty; protected TaskCompletionSource _ModalTask { get; set; } = new TaskCompletionSource (); public Task ShowAsync (ModalOptions options) where TModal : IComponent { this.Options = options ??= this.Options; this._ModalTask = new TaskCompletionSource (); this._Content = new RenderFragment(builder => { builder.OpenComponent(1, typeof(TModal)); builder.CloseComponent(); }); this.Display = true; InvokeAsync(StateHasChanged); return this._ModalTask.Task; } /// /// Method to update the state of the display based on UIOptions /// /// public void Update(ModalOptions options = null) { this.Options = options ??= this.Options; InvokeAsync(StateHasChanged); } ////// Method called by the dismiss button to close the dialog /// sets the task to complete, show to false and renders the component /// (which hides it as show is false!) /// public async void Dismiss() { _ = this._ModalTask.TrySetResult(ModalResult.Cancel()); this.Display = false; this._Content = null; await InvokeAsync(StateHasChanged); } ////// Method called by child components through the cascade value of this component /// sets the task to complete, show to false and renders the component /// (which hides it as show is false!) /// /// public async void Close(ModalResult result) { _ = this._ModalTask.TrySetResult(result); this.Display = false; this._Content = null; await InvokeAsync(StateHasChanged); } private void SetPageExitCheck(bool action) { _js.InvokeAsync("cecblazor_setEditorExitCheck", action); } public void Lock(bool setlock) { if (setlock && !this.IsLocked) { this.IsLocked = true; this.SetPageExitCheck(true); } else if (this.IsLocked && !setlock) { this.IsLocked = false; this.SetPageExitCheck(false); } } }}
我只在这里展示WeatherEditor。WeatherViewer是没有“脏”功能的较简单版本。有关代码,请参见Repo。
Razor代码与原型模式对话框中的代码相同。
@namespace CEC.Blazor.EditorWeather Editor
Date@DateTime.Now.ToLongDateString()Temperature C0 deg CTemperature C32 deg FSummaryAnother Beast-from-the-East day@if (this.DoDirtyExit) { } else { }
许多控制代码也从原型代码中提取。我们选择级联IModalDialog以使用其public接口方法与ModalDialog包装器进行交互。例如, Exit检查控件是否IsDirty。如果很干净,它会调用this.Modal?.Close(ModalResult.OK()),以关闭对话框包装并销毁此类的实例。
using Microsoft.AspNetCore.Components;namespace CEC.Blazor.Editor{ public partial class WeatherEditor : ComponentBase { [CascadingParameter] private IModalDialog Modal { get; set; } public bool IsDirty { get; set; } public bool IsLocked { get; private set; } private bool DoDirtyExit { get; set; } private string DirtyButtonCss => this.IsDirty ? "btn-warning" : "btn-info"; private string DirtyButtonText => this.IsDirty ? "Set Clean" : "Set Dirty"; private void Exit() { if (this.IsDirty) { this.DoDirtyExit = true; this.InvokeAsync(this.StateHasChanged); } else this.Modal?.Close(ModalResult.OK()); } public void DirtyExit() { if (this.DoDirtyExit) { this.IsDirty = false; this.Modal?.Lock(false); this.Modal?.Close(ModalResult.Cancel()); } } public void CancelExit() { this.DoDirtyExit = false; this.InvokeAsync(this.StateHasChanged); } public void SetDirty() { if (this.IsDirty) this.DoDirtyExit = false; this.IsDirty = !this.IsDirty; this.Modal?.Lock(this.IsDirty); this.InvokeAsync(this.StateHasChanged); } }}
最后,我们在Pages中创建一个被称为FetchDataModal的FetchData新版本。
Razor标记与原型非常相似。
@page "/fetchdatamodal"@using CEC.Blazor.Editor.DataWeather forecast
This component demonstrates fetching data from a service.
@if (forecasts == null){Loading...
}else{
Date | Temp. (C) | Temp. (F) | Summary | ||
---|---|---|---|---|---|
@forecast.Date.ToShortDateString() | @forecast.TemperatureC | @forecast.TemperatureF | @forecast.Summary |
与原型非常相似,但:
using CEC.Blazor.Editor.Data;using Microsoft.AspNetCore.Components;using System;using System.Threading.Tasks;namespace CEC.Blazor.Editor.Pages{ public partial class FetchDataModal : ComponentBase { [Inject] WeatherForecastService ForecastService { get; set; } private WeatherForecast[] forecasts; private ModalDialog Modal { get; set; } protected override async Task OnInitializedAsync() { forecasts = await ForecastService.GetForecastAsync(DateTime.Now); } private async void ShowViewDialog() { var options = new ModalOptions(); options.Set(ModalOptions.__Width, "60%"); await this.Modal.ShowAsync(options); } private async void ShowEditDialog() { var options = new ModalOptions(); options.Set(ModalOptions.__Width, "80%"); await this.Modal.ShowAsync (options); // any code to execute after the editor is complete goes here } }}
希望我已经展示了一些用于处理Blazor和SPA中的编辑状态的技术和策略。本文的一些要点:
转载地址:http://zqwhj.baihongyu.com/