Blazor Modal对话框编辑器

@if (this.Display) { 
    
 
     
 
      
 
       
 
        

          Date 
        
 
        

          @DateTime.Now.ToLongDateString(); 
        
 
       
 
       
 
        

          Temperature C 
        
 
        

          0 deg C 
        
 
       
 
       
 
        

          Temperature C 
        
 
        

          32 deg F 
        
 
       
 
       
 
        

          Summary 
        
 
        

          Another Beast-from-the-East day 
        
 
       
 
       
 
        
 
         Close 
        
 
       
 
      
 
     
 
    
 }

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); } } }

笔记

@page "/fetchdata1" @using CEC.Blazor.Editor.Data 
Weather forecast
 
This component demonstrates fetching data from a service.
 @if (forecasts == null) { 
Loading...
 } else { 
    
       @foreach (var forecast in forecasts) { 
       } 
     
 
     
 
      
 
       
Date
 
       
Temp. (C)
 
       
Temp. (F)
 
       
Summary
 
      
 
     
 
     
 
       
@forecast.Date.ToShortDateString()
 
       
@forecast.TemperatureC
 
       
@forecast.TemperatureF
 
       
@forecast.Summary
 
       
Edit
 
      
 
    
 } 
    

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(); } } }

笔记

 
      
       Fetch data 1 
      

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%; }

运行版本1

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。

..... 

 
    
 
     
 
      @this.DirtyButtonText @if (this.DirtyExit) { 
      Dirty Close 
      Cancel } else { 
      Close } 
     
 
    

更新文件添加背后的代码：

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); } } } } 
    

运行版本2

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

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; } } } 
          
         
        
       
      
    

IModal对话

using Microsoft.AspNetCore.Components; using System.Threading.Tasks; namespace CEC.Blazor.Editor { public interface IModalDialog { public ModalOptions Options { get; } Task 
    
      ShowAsync 
     
       (ModalOptions options) where TModal : IComponent; void Dismiss(); void Close(ModalResult result); void Update(ModalOptions options = null); void Lock(bool setlock); } } 
      
    

模态对话框

@namespace CEC.Blazor.Editor @implements IModalDialog @if (this.Display) { 
     
     
 
      

        @this._Content 
      
 
     
 
     }

在代码中：

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); } } } } 
              
          
         
        
       
      
    

天气组件

@namespace CEC.Blazor.Editor 
    
 
     
 
      
 
       
Weather Editor
 
      
 
     
 
     
 
      

        Date 
      
 
      

        @DateTime.Now.ToLongDateString() 
      
 
     
 
     
 
      

        Temperature C 
      
 
      

        0 deg C 
      
 
     
 
     
 
      

        Temperature C 
      
 
      

        32 deg F 
      
 
     
 
     
 
      

        Summary 
      
 
      

        Another Beast-from-the-East day 
      
 
     
 
     
 
      
 
       @this.DirtyButtonText @if (this.DoDirtyExit) { 
       Dirty Close 
       Cancel } else { 
       Close } 
      
 
     
 
    

许多控制代码也从原型代码中提取。我们选择级联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); } } }

FetchDataModal

@page "/fetchdatamodal" @using CEC.Blazor.Editor.Data 
Weather forecast
 
This component demonstrates fetching data from a service.
 @if (forecasts == null) { 
Loading...
 } else { 
    
       @foreach (var forecast in forecasts) { 
       } 
     
 
     
 
      
 
       
Date
 
       
Temp. (C)
 
       
Temp. (F)
 
       
Summary
 
      
 
     
 
     
 
       
@forecast.Date.ToShortDateString()
 
       
@forecast.TemperatureC
 
       
@forecast.TemperatureF
 
       
@forecast.Summary
 
       
View
 
       
Edit
 
      
 
    
 } 
    

与原型非常相似，但：

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 } } } 
      
    

总结