如何在Blazor中進行客戶端UI事件

asp.net-core blazor c#

我剛開始玩Blazor,我已經看到了這個新框架的巨大潛力。

不過,我想知道如何處理簡單的事情,例如將注意力集中在輸入控件上?例如,在我處理click事件後,我想將焦點設置為文本輸入控件。我是否必須使用JQuery這樣的東西,還是Blazor會為這類東西提供一些內置的方法?

謝謝

更新:這是我現在這樣做的方式,直到我了解更多關於Blazor的信息。 (這很有效,但我知道當Blazor準備好迎接黃金時段時,會有更好的方法來處理這樣的事情。)

在我看來,我有以下腳本部分:

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

然後,在函數部分我有這個功能:

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

然後我從Refresh方法中調用它。 (這是使用TalkingDotNet提供的示例代碼,網址為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>

一般承認的答案

Blazor只是javascript的替代品(更準確地說是“增值”)。它只是一個客戶端解決方案(但未來可能會與ASP.Net輕鬆綁定)。

它完全基於html和CSS。 C#正在使用Web程序集替換js部分。因此,訪問/修改html控件的方式沒有任何改變。

截至目前(版本0.1.0),你必須依靠HTML DOM focus()方法來做你想做的事情(是的,你現在必須使用javascript :()。

// 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
}

有關更多信息,請參閱下文。

如果你想整齊地改善js的pakaging 。你可以做這樣的事情。 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
}

然後將此組件添加到根目錄。 (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
}

熱門答案

你不能直接調用JavaScript函數。您需要先註冊您的功能,如,

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

然後你需要在C#中聲明一個調用這個JavaScript函數的方法。喜歡,

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

您可以通過單擊按鈕調用此C#方法。喜歡,

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

這篇文章使用Blazor和ASP.NET Core創建一個CRUD應用程序顯示了一個從Blazor調用JavaScript的工作演示。




許可下: CC-BY-SA with attribution
不隸屬於 Stack Overflow
這個KB合法嗎? 是的,了解原因
許可下: CC-BY-SA with attribution
不隸屬於 Stack Overflow
這個KB合法嗎? 是的,了解原因