blazorblazored

Blazored Modal won't show up


I updated Blazored.Modal a few days ago but now my PopUp won't work. I adjusted the code but it still won't work and I can't find the problem. I don't really know what to do anymore I cleared my cache and used other Browsers but it still doesn't work.

Code: 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>

Page with the button (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 />

Page that should PopUp (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>

Think that's all you need.


Solution

  • So I found the solution. I don't know why but my blazor.server.js wasn't in the _Host.

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