C# statehaschanged () in einer Rasiermesserkomponente zwingt <video> tag nicht zum Laden/Ändern des MP4 -Spiels, nur mit ⇐ C#

[Anonymous]

Ich experimentiere mit serverseitigem Blazor. Ich versuche, mehrere Schaltflächen die .mp4 -Datei in einem Tag in einer Rasiermesserkomponente einzustellen/zu ändern. Die einzige Möglichkeit, diese Arbeit zu machen, besteht darin, eine JavaScript -Funktion über IJSRuntime zu rufen: Invokevoidasync () aus der Onparametersset () in meiner Rasiermesserkomponente. Die JavaScript -Funktion befindet sich in _host.cshtml. Dies scheint eine ziemlich hässliche Lösung für ein einfaches Problem zu sein. Das H1-Header-Tag und die Quelle Src = "Newfile" sollen aktualisiert werden, wenn ich das HTML-Rendern in Chrome betrachte, und das H1-Tag ändert sich auf der Seite korrekt, wenn eine Schaltfläche angeklickt wird. Das neue Video wird jedoch nicht geladen. Ich vermute, dass dies an das Video gebunden ist, das auf seinem eigenen Thread abgespielt wird, oder das Video -Tag selbst nicht ändert. Ich verstehe einfach nicht, wie ich dies von Razor /C#erledigen kann.
function loadVideo (strNewVideo)
{
document.getElementById('videoSourceId').src = strNewVideo;
document.getElementById("videoTagId").load();
}

< /code>

Einfache Komponente zum Abspielen von Videos ...
Datei: videoplayer.razor < /p>

@inject IJSRuntime theJavaScriptEngine;

@this.m_strRenderMe




@code {
ElementReference theVideoTag;

[Parameter]
public string strVideoFilePath { get; set; }

private string m_strRenderMe;

protected override void OnParametersSet()
{
this.m_strRenderMe = this.strVideoFilePath;

theJavaScriptEngine.InvokeVoidAsync("loadVideo", this.m_strRenderMe);

this.StateHasChanged();
}
}
< /code>

Razor-Seite mit Komponenten von oben und 4 Schaltflächen ISW ​​in
Datei: counter@page "/counter"

@using UseBlazorToReadPowerPoint.Classes

@inject CPersistantAppState thePersistantAppState



Video 1
Video 2
Video 3
Video 4

@code {

void PlayVideo_1()
{
thePersistantAppState.m_strVideoPath = "videos/Video-1.mp4";
}

void PlayVideo_2()
{
thePersistantAppState.m_strVideoPath = "videos/Video-2.mp4";
}

void PlayVideo_3()
{
thePersistantAppState.m_strVideoPath = "videos/Video-3.mp4";
}

void PlayVideo_4()
{
thePersistantAppState.m_strVideoPath = "videos/Video-4.mp4";
}

}
< /code>

Um den ausgewählten Dateinamen zu bestehen.namespace UseBlazorToReadPowerPoint.Classes
{
public class CPersistantAppState
{
public string m_strVideoPath;
}
}
< /code>

Der aufgelistete Code funktioniert. Ich kann einfach nicht herausfinden, wie ich diese Arbeit ohne den JavaScript -Anruf erstellen kann. Es scheint, als müsste es eine sauberere Art zu tun.