У меня есть приложение blazor, которое получает некоторые входные данные, вычисляет и отображает некоторые выходные данные через форму редактирования и одну модель.

Некоторые входы:

<EditForm Model="@model" OnValidSubmit="hundlevalidsubmit">
    <div class="form-group">
            <label>Full Name</label>
                 
            <InputText style="width: 25%" @bind-Value="model.name" class="form-control">
            </InputText>
        </div>


<div class="form-group">
     <label>Type of Vessel</label>
       <InputSelect style="width: 25%" @bind-Value="model.typeofvessel" class="form-control">
                <option value="">Select the type of Vessel</option>
                <option value="5">General Cargo Ship</option>
                <option value="10">General Cargo Ship</option>
                <option value="15">Roll on-roll off Ship</option>
                <option value="20">Bulk Carrier</option>
            </InputSelect>
        </div>
<div class="form-group">
      <label>Gross Tonnage</label>
         <InputNumber style="width: 25%" @bind-Value="model.gt" class="form-control" />
        </div>
</EditForm>

Затем я связываю результаты в конце страницы с

<EditForm Model="@model" OnValidSubmit="hundlevalidsubmit">
    <div class="card-body">
        <div class="row">
            <div class="col">Full Name:</div>
            <div class="col text-right">@model.name</div>
        </div>
        <div class="row">
            <div class="col">EEXI Value:</div>
            <div class="col text-right">@eexi.ToString("N")</div>
        </div>
        <div class="row">
            <div class="col">Compliance:</div>
            <div class="col text-right">@model.compliance</div>
        </div>

    </div>
</EditForm>

И отобразите их с помощью кнопки расчета в конце страницы следующим образом:

<EditForm Model="@model" OnValidSubmit="hundlevalidsubmit">

    <center>
        <div class="checkbox">
            <label>
                <input name="cbPrivacy" id="cbPrivacy" type="checkbox"> I accept Dromon Bureau of Shipping (<a href="https://localhost:44310/Privacy" target="_blank">Privacy Policy</a>).
            </label>
        </div>

        <div class="col-lg-10 @*col-lg-offset-2*@" style="margin-bottom:20px;">
            <button class="btn btn-default btn-medium">Cancel</button>
            <button href="/Results" @onclick="@(() => { SendEmail(); })" style="background-color:green;" class="btn btn-primary btn-medium">
                Calculate
            </button>
            @*href="/Results"*@
            @* <p><a href="/About"  @onclick="@(() => { SendEmail(); })" style="background-color:green;" class="btn btn-primary btn-medium">Calculate</a></p>*@
        </div>
    </center>

</EditForm>

Это код, который делает вычисления

@code {

public infomodel model = new infomodel();
public double eexi;
public void hundlevalidsubmit()
{
    eexi = (int.Parse(model.typeofvessel) + model.gt);

    if (eexi > 50)
    {
        model.compliance = "Yes";
    }
    else
    {
        model.compliance = "No";
    }


}

Теперь я хотел бы отобразить результаты на новой странице (результаты). Обратите внимание, что это мое первое приложение, поэтому технические знания ограничены.

-1
Nikolas Kypri 26 Янв 2022 в 13:10
Вам действительно не следует использовать <center>
 – 
Dharman
26 Янв 2022 в 16:42
Что я должен использовать, чтобы разместить кнопки в центре? а в чем проблема с
? Спасибо
 – 
Nikolas Kypri
26 Янв 2022 в 16:59
Вы должны использовать CSS
 – 
Dharman
26 Янв 2022 в 16:59

6 ответов

Способ 1: Вы можете передавать параметры на страницу, по которой осуществляется навигация таким образом, если значений немного, они нечувствительны и используются только в одном месте.

NavigationManager.NavigateTo($“NextPage/{Value1}/{Value2}”);

Следующая страница:

@page “/nextpage/{value1}/{value2}

[Parameter]
Public string Value1 {get; set;}

[Parameter]
Public string Value2 {get; set;}

Метод 2: Он включает использование DI для хранения глобальных данных.

Зарегистрируйте такой сервис в program.cs

builder.Services.AddScoped<DataService>();

На первой странице:

@inject DataService dataService;

dataService.model = new model with calculated values

На второй странице:

@inject DataService dataService;

Используйте dataService.model для получения значений

DataService.cs

Public class DataService{
    public infomodel model{get; set;}
}
0
Dharman 26 Янв 2022 в 16:40
Спасибо за ваши комментарии! Кажется, я не могу зарегистрировать builder.Services.AddScoped(); Вот мое пространство именprograms.cs FinalExiiCalculator {public class Program {public static void Main(string[] args) { CreateHostBuilder(args).Build().Run(); } public static IHostBuilder CreateHostBuilder(string[] args) => Host.CreateDefaultBuilder(args) .ConfigureWebHostDefaults(webBuilder => { webBuilder.UseStartup(); }); } }
 – 
Nikolas Kypri
26 Янв 2022 в 15:22
Вам нужно добавить пространство имен этого класса в файле program.cs
 – 
Surinder Singh
26 Янв 2022 в 15:24
Мне нужно создать новое пространство имен? И как тогда добавить услугу?
 – 
Nikolas Kypri
26 Янв 2022 в 15:35
Не могли бы вы сообщить мне об ошибке или проблеме, с которой вы столкнулись при регистрации службы, чтобы я мог помочь вам зарегистрировать службу
 – 
Surinder Singh
26 Янв 2022 в 15:39
Спасибо. Проблема в том, что я не знаю, как зарегистрировать службу. Куда вставить этот код в файле program.cs? (builder.Services.AddScoped();)
 – 
Nikolas Kypri
26 Янв 2022 в 15:43

this is how you register services

Вот как вы регистрируете услуги

-1
Surinder Singh 26 Янв 2022 в 15:46
Пожалуйста, смотрите скриншот ниже
 – 
Nikolas Kypri
26 Янв 2022 в 16:00

Вы можете использовать файл startup.cs для DI

public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();

            services.AddScoped<DataService>();
        }
-1
Dharman 26 Янв 2022 в 16:40
1
Это действительно альтернативный ответ? Пожалуйста, не относитесь к переполнению стека как к чату
 – 
Dharman
26 Янв 2022 в 16:40
Да, это полный ответ, задающий вопрос пользователь не может понять решение, поэтому я создал пример проекта и опубликовал его работоспособный код, чтобы помочь ему понять решение.
 – 
Surinder Singh
26 Янв 2022 в 16:42
1
Вы разместили 4 решения без каких-либо объяснений. Непонятно, какой из них лучший. Пожалуйста, объясните их
 – 
Dharman
26 Янв 2022 в 16:43

Это серверный проект Blazor .NET 6.0.

Program.cs

using FinalExiiCalculator.Data;
using FinalExiiCalculator.Services;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;

var builder = WebApplication.CreateBuilder(args);

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

builder.Services.AddSingleton<DataService>();

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

**DataService.cs**
using FinalExiiCalculator.Models;

namespace FinalExiiCalculator.Services
{
    public class DataService
    {
        public infomodel  infomodel{get; set;} = new();
    }
}

**infomodel.cs**
    public class infomodel
    {
        public string compliance { get; set; } = "";
        public string typeofvessel { get; set; } = "";
    }

counter.razor

@page "/counter"

@using FinalExiiCalculator.Services
@inject DataService dataService

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;

         dataService.infomodel.typeofvessel = "My Vessel";
        dataService.infomodel.compliance = "Yes";
    }
}

FetchData.razor

@page "/fetchdata"

<PageTitle>Weather forecast</PageTitle>

@using FinalExiiCalculator.Data
@inject WeatherForecastService ForecastService

@using FinalExiiCalculator.Services
@inject DataService dataService

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from a service.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>

    <div>
        <span>@dataService.infomodel.typeofvessel</span>
        <span>@dataService.infomodel.compliance</span>
    </div>
}

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}
-1
Surinder Singh 26 Янв 2022 в 16:40
3
Пожалуйста, не публикуйте несколько ответов. Вместо этого отредактируйте тот, который вы уже разместили.
 – 
tripleee
26 Янв 2022 в 16:36
3
Вы должны отредактировать один из своих ответов, чтобы объединить все данные из всех ваших ответов, а затем удалить остальные.
 – 
Stephen Ostermiller
26 Янв 2022 в 16:37

Мой program.cs

Могу ли я изменить свой код, как тот, который вы отправили?

-3
Nikolas Kypri 26 Янв 2022 в 15:59
1
Пожалуйста, не используйте кнопку «Опубликовать свой ответ» для отправки контента, который не пытается ответить на вопрос в верхней части этой страницы. Если вы хотите задать новый вопрос, для этого есть отдельная кнопка «Спросить»; но, вероятно, сначала просмотрите справочный центри, в частности, Как спросить.
 – 
tripleee
26 Янв 2022 в 16:35