Blazored Modal 开源项目教程

Blazored Modal 开源项目教程

ModalA powerful and customizable modal implementation for Blazor applications.项目地址:https://gitcode.com/gh_mirrors/moda/Modal

1. 项目的目录结构及介绍

Blazored Modal 项目的目录结构如下：

Blazored.Modal/
├── src/
│   ├── Blazored.Modal/
│   │   ├── Components/
│   │   │   ├── Modal.razor
│   │   │   ├── ModalBackdrop.razor
│   │   │   ├── ModalContent.razor
│   │   │   └── ModalDialog.razor
│   │   ├── Interfaces/
│   │   │   └── IModalService.cs
│   │   ├── Services/
│   │   │   └── ModalService.cs
│   │   ├── BlazoredModal.razor.css
│   │   ├── BlazoredModal.razor.js
│   │   ├── BlazoredModal.csproj
│   │   ├── BlazoredModalOptions.cs
│   │   ├── ModalParameters.cs
│   │   └── ModalResult.cs
│   └── Blazored.Modal.Demo/
│       ├── Pages/
│       │   ├── FetchData.razor
│       │   ├── Index.razor
│       │   └── ModalDemo.razor
│       ├── Shared/
│       │   ├── MainLayout.razor
│       │   └── NavMenu.razor
│       ├── wwwroot/
│       │   ├── css/
│       │   │   └── app.css
│       │   ├── sample-data/
│       │   │   └── weather.json
│       │   └── index.html
│       ├── Blazored.Modal.Demo.csproj
│       ├── Program.cs
│       └── Startup.cs
├── tests/
│   └── Blazored.Modal.Tests/
│       ├── Blazored.Modal.Tests.csproj
│       └── ModalServiceTests.cs
├── .gitignore
├── LICENSE
├── README.md
└── Blazored.Modal.sln

目录结构介绍

• src/Blazored.Modal/: 包含核心库的源代码。

  • Components/: 包含模态框的各个组件。
  • Interfaces/: 包含模态框服务的接口定义。
  • Services/: 包含模态框服务的实现。
  • BlazoredModal.razor.css 和 BlazoredModal.razor.js: 模态框的样式和脚本文件。
  • BlazoredModal.csproj: 项目文件。
  • BlazoredModalOptions.cs, ModalParameters.cs, 和 ModalResult.cs: 相关类定义。

• src/Blazored.Modal.Demo/: 包含示例项目的源代码。

  • Pages/: 包含示例页面的 Razor 文件。
  • Shared/: 包含共享布局和导航菜单的 Razor 文件。
  • wwwroot/: 包含静态资源文件。
  • Blazored.Modal.Demo.csproj: 示例项目文件。
  • Program.cs 和 Startup.cs: 示例项目的入口文件。

• tests/Blazored.Modal.Tests/: 包含测试项目的源代码。

2. 项目的启动文件介绍

在 src/Blazored.Modal.Demo/ 目录下，项目的启动文件是 Program.cs 和 Startup.cs。

Program.cs

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Net.Http;
using System.Threading.Tasks;

namespace Blazored.Modal.Demo
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            builder.Services.AddBlazoredModal();

            await builder.Build().RunAsync();
        }
    }
}

Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions

ModalA powerful and customizable modal implementation for Blazor applications.项目地址:https://gitcode.com/gh_mirrors/moda/Modal