Blazor University (19)使用 RenderFragments 模板化組件 —— 數據傳遞

原文鏈接:https://blazor-university.com/templating-components-with-renderfragements/passing-data-to-a-renderfragement/

將數據傳遞給 RenderFragment

源代碼[1]

到目前為止,我們使用了僅包含子標記的 RenderFragments,然后在渲染組件時按原樣包含子標記。除了標準的 RenderFragment 類之外,還有一個通用的 RenderFragment<T> 類,可用于將數據傳遞到 RenderFragment

允許用戶指定模板

更改 TabControl 組件并在 ChildContent 參數下添加一個新的 TabTextTemplate 參數屬性。

[Parameter]
public?RenderFragment?ChildContent?{?get;?set;?}[Parameter]
public?RenderFragment<TabPage>?TabTextTemplate?{?get;?set;?}

然后更改 foreach 循環中的標記。我們需要做的是檢查是否設置了 TabTextTemplate;如果沒有,那么我們照常渲染,如果已經設置,那么我們執行 TabTextTemplate RenderFragment,從 foreach 循環中傳入 TabPage

<CascadingValue?Value="this"><div?class="btn-group"?role="group">@foreach?(TabPage?tabPage?in?Pages){<button?type="button"class="btn?@GetButtonClass(tabPage)"@onclick=@(?()?=>?ActivatePage(tabPage)?)>@if?(TabTextTemplate?!=?null){@TabTextTemplate(tabPage)}else{@tabPage.Text}</button>}</div>@ChildContent
</CascadingValue>

要設置 TabTextTemplate,我們需要在使用 TabControl 的頁面中編輯標記。只需在 <TabControl> 元素內添加 <TabTextTemplate> 元素即可完成此操作,只要將 TabPage 的標記呈現到 TabControl 的選項卡中,該模板內的所有內容都將被視為要使用的 RenderFragment

<TabControl><TabTextTemplate>Hello</TabTextTemplate><TabPage?Text="Tab?1"><h1>The?first?tab</h1></TabPage><TabPage?Text="Tab?2"><h1>The?second?tab</h1></TabPage><TabPage?Text="Tab?3"><h1>The?third?tab</h1></TabPage>
</TabControl>

但是,一旦您這樣做,編譯器就會抱怨以下錯誤消息。

組件“TabControl”內無法識別的子內容。組件“TabControl”通過以下頂級項目接受子內容:“ChildContent”、“TabTextTemplate”。

當您的組件中只有一個 RenderFragment 參數并且它被命名為 ChildContent 時,Blazor 將假定每當我們使用該組件并在我們想要將其分配給 ChildContent 的開始和結束標記之間包含內容。但是一旦我們在消費者的標記中有兩個 RenderFragment,Blazor 就不能假定所有內容都應該分配給 ChildContent 參數。此時,組件的用戶必須顯式創建一個 <ChildContent> 元素來保存內容。

為了明確意圖,可以將 ChildContent 屬性重命名為 Tabs

<TabControl><TabTextTemplate>Hello</TabTextTemplate><ChildContent><TabPage?Text="Tab?1"><h1>The?first?tab</h1></TabPage><TabPage?Text="Tab?2"><h1>The?second?tab</h1></TabPage><TabPage?Text="Tab?3"><h1>The?third?tab</h1></TabPage></ChildContent>
</TabControl>

在 RenderFragment 中訪問上下文

到目前為止,TabControl 組件將為每個 TabPage 的選項卡只顯示文本“Hello”。我們需要的是訪問正在呈現的 TabPage,以便我們可以輸出其 Text 屬性的值。注意 TabControl 組件中 TabTextTemplate 的使用。

@if?(TabTextTemplate?!=?null){@TabTextTemplate(tabPage)}else{@tabPage.Text}

foreach 循環中創建了一個 HTML <button>,并且在該按鈕中,前面的代碼用于輸出應顯示給用戶單擊的內容。如果 TabTextTemplate 為空,則呈現 @tabPage.Text,但如果 TabTextTemplate 不為空(組件用戶已指定模板),則呈現模板,并傳入循環的當前 tabPage 以獲取上下文。

當使用 RenderFragment<T> 類的通用版本時,我們必須在渲染該片段時傳遞 <T> 的值。傳遞給片段的值可通過名為 context 的特殊變量獲得。然后可以使用它來準確確定要渲染的內容。在我們的例子中,我們希望使用一些額外的標記來呈現 TabPage.Text 屬性。

<TabTextTemplate><img?src="/images/tab.png"/>?@context.Text
</TabTextTemplate>

38a7d8c9c34cf9b30029ed8c2ef6674b.gif

避免 @context 名稱沖突

如果名稱 context 與組件中的另一個標識符沖突,則可以通過在 RenderFragment 上使用 Context 屬性來指示 Blazor 逐個使用不同的名稱。

例如,前面演示的 TabTextTemplate 標記可以改為如下編寫。

<TabTextTemplate?Context="TheTab"><img?src="/images/tab.png"/>?@TheTab.Text
</TabTextTemplate>

參考資料

[1]

源代碼: https://github.com/mrpmorris/blazor-university/tree/master/src/TemplatedComponents/PassingDataToARenderFragment

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/287760.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/287760.shtml
英文地址,請注明出處:http://en.pswp.cn/news/287760.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

一頭扎進Node(三) - File System

file.open:異步模式打開文件 fs.open(path, flags[, mode], callback) 案例代碼如下&#xff1a; var fs require(fs);/*** 參數說明&#xff1a;* 1.path&#xff1a;要打開的文件的文件路徑* 2.flags&#xff1a;打開文件的方式 讀/寫* r&#xff1a;只讀方式打開文件…

《零基礎看得懂的C語言入門教程 》——(十二)原來結構體是這么回事

一、學習目標 了解C語言的結構體的使用方法了解C語言結構體的結構的賦值了解多種C語言結構體變量的賦值方法和取值方法 目錄 C語言真的很難嗎&#xff1f;那是你沒看這張圖&#xff0c;化整為零輕松學習C語言。 第一篇&#xff1a;&#xff08;一&#xff09;脫離學習誤區 第…

【學生選課系統經典】C#與SQLSERVER連接:Windows應用工程案例

實驗任務描述 1 用C#訪問SQLSERVER數據庫(兩種安全模式); 2 用C#完成數據庫指定表上的數據顯示; 3 用C#完成數據庫指定表上的數據插入、刪除和更新; 4 用C#完成數據庫用戶驗證。 注意,由于C#語言的強大功能,下面的代碼適用于SQLSERVER2000、也適合于SQLSERVER2005。區別僅…

Java精選筆記_JDBC

JDBC概述 什么是JDBC JDBC全稱是Java數據庫連接&#xff08;Java Database Connectivity&#xff09;&#xff0c;應用程序可通過這套API連接到關系數據庫&#xff0c;并使用SQL語句來完成對數據庫中數據的查詢、更新和刪除等操作。是一套用于執行SQL語句的Java API。Java的數據…

mysql關系數據庫引擎_MySQL數據庫引擎詳解

作為Java程序員&#xff0c;MySQL數據庫大家平時應該都沒少使用吧&#xff0c;對MySQL數據庫的引擎應該也有所了解&#xff0c;這篇文章就讓我詳細的說說MySQL數據庫的Innodb和MyIASM兩種引擎以及其索引結構。也來鞏固一下自己對這塊知識的掌握。Innodb引擎Innodb引擎提供了對數…

Java之synchronized的JVM底層實現原理精簡理解

1 synchronized的JVM底層原理實現的精簡理解 Java 虛擬機中的synchronized基于進入和退出Monitor對象&#xff08;也稱為管程或監視器鎖&#xff09;實現&#xff0c; 無論是顯式同步(synchronized作用在同步代碼塊&#xff0c;有明確的 monitorenter 和 monitorexit 指令) 還是…

三分鐘掌握Actor和CSP模型

點擊上方藍字進行關注前文傳送門&#xff1a;《三分鐘掌握共享內存模型和 Actor模型》&#xff0c; 一直想比較Actor模型與golang的CSP模型&#xff0c;經過一段時間的實戰記錄了本文。Actor vs CSP模型? 傳統多線程的的共享內存&#xff08;ShareMemory&#xff09;模型使用l…

DateTimeToUnix/UnixToDateTime 對接時間轉換

問題&#xff0c;通過毫秒數來解析出時間&#xff1a;&#xff08;很多對接的時候經常需要用到&#xff09; <?php $MyJson {"jingdong_vas_subscribe_get_responce":{"code":"0","item_code":"FW_GOODS-2236-1","…

【學生選課系統經典】VB與SQLSERVER連接:Windows應用工程案例

實驗任務描述 1 用VB6訪問SQLSERVER數據庫(兩種安全模式); 2 用VB6完成數據庫指定表上的數據顯示; 3 用VB6完成數據庫指定表上的數據插入、刪除和更新; 4 用VB6完成SQLSERVER2008數據庫用戶驗證。 一、數據庫系統 該實驗中,所要求的數據庫名稱為SCHOOL,總共涉及以下表:

丟失api-ms-win-crt-runtime-l1-1-0.dll

運行Cmder的時候提示&#xff1a;丟失api-ms-win-crt-runtime-l1-1-0.dll在網上找了一些方法&#xff0c;基本解決方法都是裝VC2015的運行時&#xff0c;但是我安裝的時候出錯&#xff0c;大家可以先試試。接著我就去解決安裝出錯這問題沒&#xff0c;折騰了半天也沒成功。后來…

《假如編程是魔法之零基礎看得懂的Python入門教程 》——(二)魔法實習生第一步了解魔杖的使用

學習目標 了解什么是開發環境了解python語言的環境安裝了解python語言編程的編輯器工具 目錄 第一篇&#xff1a;《假如編程是魔法之零基礎看得懂的Python入門教程 》——&#xff08;一&#xff09;既然你選擇了這系列教程那么我就要讓你聽得懂 第三篇&#xff1a;《假如編…

Java之synchronized可重入性的理解

1 synchronized可重入性的理解 當一個線程試圖操作一個由其他線程持有的對象鎖的臨界資源時&#xff0c;將會處于阻塞狀態&#xff0c;但當一個線程再次請求自己持有對象鎖的臨界資源時&#xff0c;如果當前鎖是重入性&#xff0c;會請求將會成功&#xff0c;如果當前鎖不是可…

onmouseover-onmouseout

<input type"checkbox" value"autoLogin" οnmοuseοver"block()" οnmοuseοut"none()">兩周內自動登錄 <div id"div1">為了您的信息安全請不要在網吧或公共電腦勾選此項</div> <script> functi…

mysql5.7 only_full_group_by_Mysql5.7及以上版本 ONLY_FULL_GROUP_BY報錯的解決方法

近期在開發過程中&#xff0c;因為項目開發環境連接的mysql數據庫是阿里云的數據庫&#xff0c;而阿里云的數據庫版本是5.6的。而測試環境的mysql是自己安裝的5.7。因此在開發過程中有小伙伴不注意寫了有關group by的sql語句。在開發環境中運行是正常的&#xff0c;而到了測試環…

一款高速的NET版的離線免費OCR

PaddleOCR.Onnx一款基于Paddle的OCR&#xff0c;項目使用ONNX模型&#xff0c;速度更快。本項目同時支持X64和X86的CPU上使用。本項目是一個基于PaddleOCR的C代碼修改并封裝的.NET的工具類庫。包含文本識別、文本檢測、基于文本檢測結果的統計分析的表格識別功能&#xff0c;同…

spring 注解簡單使用

一、通用注解 1、項目結構&#xff1a; 2、新建Person類&#xff0c;注解Component未指明id&#xff0c;則后期使用spring獲取實例對象時使用默認id"person"方式獲取或使用類方式獲取 package hjp.spring.annotation.commen;import org.springframework.stereotype.C…

selenium+python筆記3

#!/usr/bin/env python # -*- coding: utf-8 -*- """ desc:學習unittest的用法 注意setUp/setUpClass&#xff0c;tearDown/tearDownClass的區別 ① setUp():每個測試函數運行前運行 ② tearDown():每個測試函數運行完后執行 ③ setUpClass():必須使用classmeth…

【學生選課系統經典】C#與SQLSERVER連接:ASP.NET網站(服務器端,IIS發布)

實驗任務描述 1 用C#訪問SQLSERVER數據庫(兩種安全模式); 2 用C#完成數據庫指定表上的數據顯示; 3 用C#完成數據庫指定表上的數據插入、刪除和更新; 4 用C#完成數據庫用戶驗證。 此處使用ASP.NET工程來完成這個項目,和Windows應用不同的是:這個項目是在服務器上、依靠IIS服…

TCP包頭、UDP包頭、IP包頭、和MAC幀包頭詳細字段和包頭大小

1 TCP頭 TCP是一種可靠的、面向連接的字節流服務,頭部定義如下。 /*TCP頭定義,共20個字節*/ typedef struct _TCP_HEADER {short m_sSourPort;       // 源端口號16bitshort m_sDestPort;       // 目的端口號16bitunsigned int m_uiSequNum; …

經典面試題:用戶反映你開發的網站訪問很慢可能會是什么原因

原文鏈接&#xff1a;http://blog.csdn.net/lv_victor/article/details/53148421 問題場景&#xff1a;某個用戶向你反映說你開發的網站訪問速度很慢&#xff0c;但是該用戶訪問其他問題很正常&#xff0c;分析下原因、有哪些工具分析原因、怎么解決問題&#xff1f; 最近面試兩…