So erhalten Sie ein Number -Pad -Dialog in einer Blazor -Server -Web -App ⇐ C#

[Anonymous]

Ich entwickle eine Web -App für ein Touch -Panel, in dem keine Tastatur verfügbar ist (und ich möchte die Tastatur auf dem Bildschirm vermeiden). Ich habe eine Reihe von Möglichkeiten ausprobiert, um dieses Problem ohne Freude zu lösen. Mein letzter Versuch ist es, den Dialog "Blazor Fluent UI Panel" zu verwenden, und ich bin nahe. Mein letztes verbleibendes Problem ist es, den in das Zahlenkissen eingegebenen Wert an die Rasiermesserkomponente, die das Zahlenkissen öffnete, zurückgegeben zu haben. Der Anwendungsfall lautet also: < /p>

Der Benutzer klickt auf ein Formularfeld (fluentTextinput), um einen numerischen Wert einzugeben. OK , um den Wert zu verwenden oder den Vorgang abzubrechen.

Code: Select all

@implements IDialogContentComponent




1
2
3

4
5
6

7
8
9

Clear
0
Backspace



@code {
[Parameter]
public string Content { get; set; } = string.Empty;

public void AddDigit(MouseEventArgs e, int digit)
{
Content += digit.ToString();
StateHasChanged();
}

public void ClearInput()
{
Content = string.Empty;
}

public void Backspace()
{
if (Content.Length > 0)
{
Content = Content.Substring(0, Content.Length - 1);
}
}
}
< /code>
Hier ist der Code für die Hostkomponente, die das Panel für die Eingabe öffnet: < /p>


@code {
private IDialogReference? _dialog;
private string RealPowerCmd { get; set; } = "0";

private async Task OpenDialogRealPower()
{
var parameters = new DialogParameters()
{
Content = RealPowerCmd,
Alignment = HorizontalAlignment.Right,
PrimaryAction = "OK",
SecondaryAction = "Cancel"
};
_dialog = await DialogService.ShowPanelAsync(RealPowerCmd, parameters);
DialogResult result = await _dialog.Result;
if (result.Cancelled)
{
return;
}
if (result.Data is not null)
{
var inputValue = result.Data as string;
RealPowerCmd = inputValue!;
StateHasChanged();
}
}
}
< /code>
inputValue

gibt den Wert, den der Benutzer eingegeben hat, nicht zurück.