.net maui blazor路由和導航,傳參,重新整理

邢帅杰發表於2024-04-09

.net maui blazor路由和導航,傳參,重新整理
參考:https://learn.microsoft.com/zh-cn/aspnet/core/blazor/fundamentals/routing?view=aspnetcore-8.0
頁面:TestPage1.razor:
@page "/test1/{Text}"
<p>必填引數:@Text</p>
@code {
[Parameter]
public string? Text { get; set; }
}

可選引數@page "/test1/{Text?}"
給引數設定預設值
protected override void OnParametersSet()
{
Text = Text ?? "fantastic";
}
使用 OnInitialized{Async} 方法而不是 OnParametersSet 方法時,如果使用者在同一元件內導航,則不會發生屬性 Text 向 fantastic 的預設分配。
例如,當使用者從 /route-parameter-2/amazing 導航到 /route-parameter-2 時,就會出現這種情況。
隨著元件例項持久儲存並接受新引數,便不會再次呼叫 OnInitialized 方法。

路由約束
路由約束強制在路由段和元件之間進行型別匹配。
在以下示例中,到 User 元件的路由僅在以下情況下匹配:
請求 URL 中存在 Id 路由段。
Id 段是一個整數 (int) 型別。
@page "/user/{Id:int}"
<p>User Id: @Id</p>
@code {
[Parameter]
public int Id { get; set; }
}

約束,示例,匹配項示例,固定條件區域性匹配
bool {active:bool} true,FALSE 否
datetime {dob:datetime} 2016-12-31,2016-12-31 7:32pm 是
decimal {price:decimal} 49.99,-1,000.01 是
double {weight:double} 1.234,-1,001.01e8 是
float {weight:float} 1.234,-1,001.01e8 是
guid {id:guid} CD2C1638-1638-72D5-1638-DEADBEEF1638,{CD2C1638-1638-72D5-1638-DEADBEEF1638} 否
int {id:int} 123456789,-123456789 是
long {ticks:long} 123456789,-123456789 是

//重新整理頁面
可以透過呼叫 NavigationManager.Refresh(bool forceLoad = false) 來重新整理當前頁,它會始終執行增強型導航(如果可用)。 如果增強型導航不可用,Blazor 將執行整頁過載。
預設啟用增強型導航,但可使用 data-enhance-nav HTML 屬性按每個連結進行分層控制。
以下示例禁用增強型導航:
<a href="redirect" data-enhance-nav="false">
GET without enhanced navigation
</a>
<ul data-enhance-nav="false">
<li>
<a href="redirect">GET without enhanced navigation</a>
</li>
<li>
<a href="redirect-2">GET without enhanced navigation</a>
</li>
</ul>
若要啟用增強的表單處理,請將 Enhance 引數新增到 EditForm 表單或將 data-enhance 屬性新增到 HTML 表單(<form>)
增強的表單處理不是分層的,也不會傳輸到子表單。
不支援:無法在上級元素上設定增強型導航來為表單啟用增強型導航。

查詢字串
使用 [SupplyParameterFromQuery] 屬性指定元件引數來自查詢字串。
查詢字串提供的元件引數支援以下型別:
bool,DateTime,decimal,double,float,Guid,int,long,string。
上述型別的可為空變體。
上述型別的陣列,無論它們是可為空還是不可為空。
正確的區域性固定格式設定適用於給定型別 (CultureInfo.InvariantCulture)。

指定 [SupplyParameterFromQuery] 屬性的 Name 屬性以使用不同於元件引數名稱的查詢引數名稱。
在使用 /search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman URL 的以下示例中:
Filter 屬性解析為 scifi stars。
Page 屬性解析為 3。
Stars 陣列是從名為 star (Name = "star") 的查詢引數填充的,並解析為 LeVar Burton 和 Gary Oldman。
@code {
[SupplyParameterFromQuery]
public string? Filter { get; set; }

[SupplyParameterFromQuery]
public int? Page { get; set; }

[SupplyParameterFromQuery(Name = "star")]
public string[]? Stars { get; set; }
}

相關文章