我在 Visual Studio 2019 中使用 Blazor Server 應用程式。在 .razor 頁面中，我有：
<div >
<div >
<div >
<label for="ConnectionStringEdit" id="Label1">Connection String for destination</label>
</div>
<div >
<input type="text" id="ConnectionStringEdit" name="ConnectionStringEdit" text=@ConnectDestination spellcheck="false" style="width: 585px; height: 26px;" >
</div>
<div >
<input type="submit" id="btnConnect" name="btnConnect" value="Connect" @onclick="Connect1">
</div>
</div>
</div>
現在在我的代碼部分
@code {
private string ConnectDestination { get; set; } = "";
private void Connect1()
{
if (ConnectDestination.Length > 0)
{
// do something
}
}
}
當我在 Input 中插入一些東西并按下按鈕時，ConnectDestination 不會獲取 Input Control 的值。所以最后一個 If 條件永遠不會為真。如何獲取名為 ConnectionStringEdit 的 Input 控制元件的插入值？
謝謝
uj5u.com熱心網友回復：
它應該是 @bind-value="@ConnectDestination"
您也可以使用 short 指令@bind：
@bind="@ConnectDestination"
注意：所有輸入元素的型別都是通過元素的value屬性系結的。
注意：@bind-value和@bind都是編譯器指令，指示編譯器在后臺發出代碼，從而在變數和 Html 標記之間實作雙向資料系結。編譯器通過將變數系結到value元素的屬性來創建雙向資料系結，相當于：
value="@ConnectDestination"，它創建從變數到系結元素的單向系結。編譯器還創建了一個事件回呼，它啟用了從元素到變數的系結，相當于：
@onchange="@((args) => ConnectDestination = args.Value?.ToString())"
這意味著如果您希望對系結有更多控制權，您可以自己執行此操作。你通常會做這樣的事情：
value="@ConnectDestination" @onchange="OnChange"
并像這樣定義回呼方法：
private void OnChange(ChangeEventArgs args)
{
// Note that it is your responsibility to update the
// ConnectDestination variable:
ConnectDestination = args.Value?.ToString());
}
注意：這是錯誤的：
<input type="submit" id="btnConnect" name="btnConnect" value="Connect" @onclick="Connect1">
輸入元素的型別屬性應設定為button：
<input type="button"
Blazor 應用程式是一個 SPA ......意味著沒有提交。唯一使用“提交”按鈕的地方是在使用 EditForm 組件時，即便如此，“提交”操作也會被 Blazor 攔截并取消。
uj5u.com熱心網友回復：
你可以試試
<input type="text" id="ConnectionStringEdit" name="ConnectionStringEdit" @bind=@ConnectDestination spellcheck="false" style="width: 585px; height: 26px;" >
或者
<input type="text" id="ConnectionStringEdit" name="ConnectionStringEdit" value="@ConnectDestination"
@onchange="@((ChangeEventArgs __e) => ConnectDestination = __e?.Value?.ToString())" spellcheck="false" style="width: 585px; height: 26px;" >
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/409256.html
標籤：