I have a blazor app that gets some inputs, calculates, and displays some outputs via Edit Form and single model.

Some of the inputs:

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


<div >
     <label>Type of Vessel</label>
       <InputSelect style="width: 25%" @bind-Value="model.typeofvessel" >
                <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 >
      <label>Gross Tonnage</label>
         <InputNumber style="width: 25%" @bind-Value="model.gt"  />
        </div>
</EditForm>

I then bind the results at the end of the page with

<EditForm Model="@model" OnValidSubmit="hundlevalidsubmit">
    <div >
        <div >
            <div >Full Name:</div>
            <div >@model.name</div>
        </div>
        <div >
            <div >EEXI Value:</div>
            <div >@eexi.ToString("N")</div>
        </div>
        <div >
            <div >Compliance:</div>
            <div >@model.compliance</div>
        </div>

    </div>
</EditForm>

And display them with a calculate button at the end of the page with this:

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

    <center>
        <div >
            <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  style="margin-bottom:20px;">
            <button >Cancel</button>
            <button href="/Results" @onclick="@(() => { SendEmail(); })" style="background-color:green;" >
                Calculate
            </button>
            @*href="/Results"*@
            @* <p><a href="/About"  @onclick="@(() => { SendEmail(); })" style="background-color:green;" >Calculate</a></p>*@
        </div>
    </center>

</EditForm>

This is the code that does the calculations

@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";
    }


}

Now I would like to display the results on a new page (results). Please note this is my first app so limited technical knowledge.

CodePudding user response：

Method 1: You can pass parameters to page being navigated like this, if the values are few and not sensitive and are used only in one place

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

NextPage:

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

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

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

Method 2: It involves using DI to hold global data

Register service like this in program.cs

builder.Services.AddScoped<DataService>();

In first page:

@inject DataService dataService;

dataService.model = new model with calculated values

In second page:

@inject DataService dataService;

Use dataService.model to retrieve values

DataService.cs

Public class DataService{
    public infomodel model{get; set;}
}

CodePudding user response：

You can use startup.cs file for DI

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

            services.AddScoped<DataService>();
        }

CodePudding user response：

This one is Blazor server-side .NET 6.0 project

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  @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 >
        <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);
    }
}