So führen Sie clientseitige Benutzeroberflächenereignisse in Blazor aus

asp.net-core blazor c#

Frage

Ich habe gerade angefangen, mit Blazor herumzuspielen und ich kann bereits das große Potenzial dieses neuen Frameworks erkennen.

Ich frage mich jedoch, wie es mit einfachen Dingen wie der Fokussierung auf ein Eingabesteuer umgehen wird? Zum Beispiel, nachdem ich ein Klickereignis behandelt habe, möchte ich den Fokus auf ein Texteingabesteuerelement setzen. Muss ich JQuery für so etwas verwenden, oder wird Blazor einige eingebaute Methoden für so etwas haben?

Vielen Dank

Update: So mache ich das jetzt, bis ich mehr über Blazor erfahren habe. (Das funktioniert, aber ich weiß, dass es bessere Möglichkeiten geben wird, mit solchen Dingen umzugehen, wenn Blazor zur Primetime bereit ist.)

Aus meiner Sicht habe ich den folgenden Script-Abschnitt:

<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
    document.getElementById(ctrl).focus();
    return true;
});
</script>

Dann habe ich im Abschnitt Funktionen diese Funktion:

<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
    document.getElementById(ctrl).focus();
    return true;
});
</script>

Dann rufe ich es von einer Refresh-Methode auf. (Dies verwendet den Beispielcode von TalkingDotNet unter http://www.talkingdotnet.com/create-a-crud-app-using-blazor-and-asp-net-core/ )

<script>
Blazor.registerFunction('FocusControl', (ctrl) => {
    document.getElementById(ctrl).focus();
    return true;
});
</script>

Akzeptierte Antwort

Blazor ist nur der Ersatz (um genauer zu sein "Mehrwert") zu den Javascript. Es ist eine Client-Side-Only-Lösung (aber möglicherweise mit einigen einfachen Bindung an ASP.Net in der Zukunft).

Dennoch basiert es vollständig auf HTML und CSS. C # ersetzt den js-Teil mithilfe der Web-Assembly. Es hat sich also nichts daran geändert, wie Sie auf HTML-Steuerelemente zugreifen / diese ändern.

Ab sofort (Version 0.1.0) müssen Sie sich auf die HTML DOM focus() Methode verlassen, um das zu tun, was Sie vorhaben (ja, Sie müssen Javascript jetzt verwenden :().

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undifined according to js specs
}

Für weitere Informationen können Sie sich unten beziehen.

Wenn Sie das Verpacken von js ordentlich verbessern möchten . Sie können so etwas tun. https://stackoverflow.com/a/49521216/476609

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undifined according to js specs
}

Fügen Sie diese Komponente dann zum Stamm hinzu. (App.cshtml)

// Not tested code
// This is JavaScript. 
// Put this inside the index.html. Just below <script type="blazor-boot"></script>
<script>
    Blazor.registerFunction('Focus', (controlId) => {
      return document.getElementById(controlId).focus();
    });
</script>

//and then wrap it for calls from .NET:    
// This is C#

public static object Focus(string controlId)
{
    return RegisteredFunction.Invoke<object>("Focus", controlId);
    //object type is used since Invoke does not have a overload for void methods. Don't know why. 
    //this will return undifined according to js specs
}

Beliebte Antwort

Sie können die JavaScript-Funktion nicht direkt aufrufen. Sie müssen zuerst Ihre Funktionen wie

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

Dann müssen Sie in C # eine Methode deklarieren, die diese JavaScript-Funktion aufruft. Mögen,

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

Sie können diese C # -Methode auf Knopfdruck aufrufen. Mögen,

<script>
 Blazor.registerFunction('ShowControl', (item) => {       
     var txtInput = document.getElementById("txtValue");         
     txtInput.style.display = "";
     txtInput.value = item;
     txtInput.focus();          
});
return true;
</script>

Dieser Beitrag erstellt eine CRUD App mit Blazor und ASP.NET Core zeigt eine funktionierende Demo des Aufrufs von JavaScript von Blazor.




Lizenziert unter: CC-BY-SA with attribution
Nicht verbunden mit Stack Overflow
Ist diese KB legal? Ja, lerne warum
Lizenziert unter: CC-BY-SA with attribution
Nicht verbunden mit Stack Overflow
Ist diese KB legal? Ja, lerne warum