Blazored Modal不会出现

如何解决Blazored Modal不会出现

几天前，我更新了blazored.Modal，但现在我的PopUp无法正常工作。我调整了代码，但仍然无法使用，也找不到问题。我真的不知道该怎么办，我清除了缓存并使用了其他浏览器，但仍然无法正常工作。

代码： App.Razor

<CascadingblazoredModal>
    <CascadingAuthenticationState>
        <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>
    </CascadingAuthenticationState>
</CascadingblazoredModal>

_Imports.razor

@using blazored
@using blazored.Modal
@using blazored.Modal.Services

_Host.razor

@page "/"
@namespace FHNW_ASS.Pages
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="utf-8" />
    <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>FHNW-ASS</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

    <link href="_content/blazored.Modal/blazored-modal.css" rel="stylesheet" />

</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">?</a>
    </div>

    <script src="_content/blazored.Modal/blazored.modal.js"></script>

</body>
</html>

带有按钮（Journal.razor）的页面

@page "/Journal"

@using FHNW_ASS.Models
@using Microsoft.Extensions.Configuration
@using FHNW_ASS.Services

@inject IConfiguration _config
@inject IModalService  modal
@inject IJournalService service


<div class="titleWrapper">
    <div class="title">Journale eine go dreieeee</div>
    <div class="flexBox">
        <div class="content">
            <button @onclick="@(() => modal.Show<JournalInputPage>("Add Journal Entry"))" class="additionButton">
                <img class="plusIcon" src="/elements/plus-black-symbol.svg" />
                Add Journal Entry
            </button>
        </div>
    </div>
</div>
<hr />
<br />
<br />

应弹出的页面（JournalInputPage.razor）

@using Microsoft.Extensions.Configuration
@using FHNW_ASS.Models


@inject FHNW_ASS.Models.FHNW_ASSContext _context
@inject IConfiguration _config
@inject IModalService  modal

<!DOCTYPE html>

<head>
    <link href="~/css/site.css" rel="stylesheet" />
</head>


<body>
    <EditForm Model="@journalInputModel" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />

        <p>
            <label for="title">Journal Title</label> <br />
            <InputText id="title" @bind-Value="journalInputModel.JournalTitle" /> <br />
        </p>

        <p>
            <label for="Week">Week</label> <br />
            <InputNumber id="week" @bind-Value="journalInputModel.JournalWeek" /> <br />
        </p>

        <p>
            <label for="content">Journal Content</label> <br />
            @*<InputText id="content" @bind-Value="JournalInput.JournalContent" />*@
            <textarea id="content" rows="10" cols="100" @bind="journalInputModel.JournalContent" />
        </p>

        @*<InputDate id="create" />

            <InputDate id="edit" />*@

        <button type="submit" class="submitButton">Submit</button>
    </EditForm>
</body>

这就是您所需要的。

解决方法

所以我找到了解决方案。我不知道为什么，但是我的blazor.server.js不在_Host中。

<script src="_framework/blazor.server.js"></script>

Blazored Modal不会出现

如何解决Blazored Modal不会出现

解决方法

相关推荐