1

https://github.com/W-Maxo/OpenStreetMapForBlazor мне понравился этот репозиторий и я решил использовать этот компонент OpenStreetMap в своем проекте. Сам проект из репозитория я перевел на net8.0 и все работает. Как только начал добавлять зависимости в свой проект ничего не работает, хотя запускается без ошибок.

Я добавил все зависимости, классы, css и js. Они подгружаются, но как я заметил не все. OSMap.js не работает и не загружает остальные js и css файлы.

      @page "/"
@inject IConfiguration config;

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div style="height: 500px;">
    <OSMap Click="@MapClickEvent" CenterMap="@defPosition" />
</div>

@code {
    public MapPosition position;
    public bool btnActive;

    MapPosition? defPosition;

    protected override async Task OnInitializedAsync()
    {
        defPosition = new MapPosition() { Lat = config.GetValue<double>("Main:DefLat"), Lng = config.GetValue<double>("Main:DefLng") };
    }

    public void MapClickEvent(MapClickEventArgs args)
    {
        //events.Add(DateTime.Now, $"Map clicked at Lat: {args.Position.Lat}, Lng: {args.Position.Lng}");

        if (args != null) position = args.Position;

        //btnActive = !(position.Lng == defPosition.Lng && position.Lat == defPosition.Lat);
        //actualJson = JsonConvert.SerializeObject(args);

        //StateHasChanged();
    }
}

вот Prorgam.cs моего проекта


// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseRouting();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

и Program.cs проекта из репозитория:

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using OpenStreetMapForBlazor.Data;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

app.Run();

Еще прошу заметить что проект из репозитория использует разметку cshtml и razor так как это темплейт из net7.0. А в моем проекте только razor.

вот _Layout.cshtml

@using Microsoft.AspNetCore.Components.Web
@namespace OpenStreetMapForBlazor.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="OpenStreetMapForBlazor.styles.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="Server" />
</head>
<body>
    @RenderBody()

    <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="_framework/blazor.server.js"></script>
    <script src="js/OSMap.js"></script>
</body>
</html>

и App.razor моего проекта\

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <base href="/"/>
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
    <link rel="stylesheet" href="app.css"/>
    <link rel="stylesheet" href="BlazorApp1.styles.css"/>
    <link rel="icon" type="image/png" href="favicon.png"/>
    <HeadOutlet/>
</head>

<body>
<Routes/>
<script src="js/OSMap.js"></script>
<script src="_framework/blazor.web.js"></script>
</body>

</html>

вот код домашней страницы и все конфигурации работают, но по прежденему не высвечивается OSMap component

проект из репозитория(тут видно что js подгружается

А это мой проект где уже не подгружаются файлы

1 ответ 1

0

в 8 версии Blazor есть изменения в модели, по умолчанию создается статическая веб страница, и чтоб активировать работу компонентов, которые в том числе должны взаимодействовать с js, необходимо добавить

@rendermode InteractiveServer,

  • либо, если это васм то @rendermode InteractiveWebAssembly

вот документация

Вы можете заметить это на примере шаблона страницы Counter

Таким образом, добавьте в ваш компонент @rendermode InteractiveServer и карта отобразится

page "/"

@rendermode InteractiveServer

@inject IConfiguration config;

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<div style="height: 500px;">
    <OSMap Click="@MapClickEvent" CenterMap="@defPosition" />
</div>

@code {
    public MapPosition position;
    public bool btnActive;

    MapPosition? defPosition;

    protected override async Task OnInitializedAsync()
    {
        defPosition = new MapPosition() { Lat = config.GetValue<double>("Main:DefLat"), Lng = config.GetValue<double>("Main:DefLng") };
    }

    public void MapClickEvent(MapClickEventArgs args)
    {
        if (args != null) position = args.Position;
    }
}

введите сюда описание изображения

  • не забудьте appsettings
2

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.