Blazor University (33)表單 —— EditContext、FieldIdentifiers

原文鏈接:https://blazor-university.com/forms/editcontext-fieldidentifiers-and-fieldstate/

EditContext、FieldIdentifiers 和 FieldState

請注意,對于那些希望了解 Blazor 如何“在后臺”工作的人來說,這是一個高級主題。無需了解此信息即可正常使用 Blazor - 但我覺得了解內部信息可能是有益的。

讓我們從描述 Blazor 如何維護表單數據的元狀態的 UML 圖開始。

92f9dd20059c252e5524592ca9ddd0cf.png

EditContext

每當 EditForm.Model 更改(表單中正在修改的對象)時,都會執行 EditForm.OnParametersSet 并創建一個新的 EditContext 實例。EditForm 組件將此 EditContext 聲明為級聯值[1],以便表單中的任何組件都可以訪問它。

EditContext 是當前正在編輯的對象的表單元數據持有者。在表單中編輯對象(例如 Person)時,Blazor 需要了解有關該對象的其他信息,以便提供更豐富的用戶體驗。Blazor 持有的其他信息告訴我們:

  • 如果模型的特定屬性已被手動更改。

  • 哪些模型屬性有驗證錯誤,這些錯誤是什么。

顯然,正在編輯的模型類應該只代表我們特定的業務需求,因此讓我們的模型類實現這些額外的用戶界面狀態信息將是一個關注點沖突——因此 Blazor 將這些額外信息本身存儲在 EditContext 中。這就是 EditForm 在其 Model 更改時創建一個新的 EditContext 的原因,因為如果 Model 更改,則 EditContext 中保存的信息不再相關。

FieldIdentifier

FieldIdentifier 的目的是為對象的特定屬性提供標識。它與 System.Reflection.PropertyInfo 不同,因為它標識特定對象實例的屬性,而反射標識類的屬性。

給定一個具有名為 PostalCode 的屬性的 Address 類,我們可以預期以下相等規則:

是否相等?
// 反射:不同實例上的相同屬性
address1.GetProperty(“郵政編碼”);
address2.GetProperty(“郵政編碼”);
// FieldIdentifier:同一個實例的同一個屬性
new FieldIdentifier(address1, “PostalCode”);
new FieldIdentifier(address1, “PostalCode”);
// FieldIdentifier:不同實例上的相同屬性
new FieldIdentifier(address1, “PostalCode”);

new FieldIdentifier(address2, “PostalCode”);

當 UI 狀態(例如驗證錯誤)需要與輸入值相關聯時,我們需要某種方式來識別該狀態與哪些輸入數據相關。在以前的 Web 技術中,通常使用字符串來標識單個輸入,以下是一些示例:

  • EmailAddress

  • HomeAddress.PostalCode

  • WorkAddress.PostalCode

一旦用戶界面變得復雜,這些路徑可能會非常復雜。

  • Contacts[0].Name

  • Contacts[0].ContactDetails[0].TelephoneNumber

  • Contacts[0].ContactDetails[0].EmailAddress

  • Contacts[9].ContactDetails[3].TelephoneNumber

Blazor 簡化了此過程,因為它的設計方式允許它始終在同一進程中處理對象和屬性標識。這使我們能夠通過存儲兩條簡單的信息來識別任何對象的任何屬性。

1.直接引用對象本身。2.該對象的屬性名稱。

標識現在很簡單,并且(與字符串路徑不同)永遠不必更改以考慮數據的更改,例如從數組中刪除項目。例如,在字符串路徑方法中,如果要刪除列表中的第一個聯系人,則需要將 Contacts[9].ContactDetails[3].TelephoneNumber 更改為 Contacts[8].ContactDetails[3].TelephoneNumber。Blazor 的 ObjectReference/PropertyName 方法避免了這種復雜性。

即使我們編寫自己的自定義驗證器與服務器對話以確定有效性(例如唯一值的可用性,例如 EmailAddress),我們的 Blazor 驗證器也會獲得一個 FieldIdentifier 的實例,然后可以關聯來自服務器調用的結果直接使用正確對象實例的正確屬性。

FieldState

FieldState 類包含有關任何對象屬性的附加信息。EditContext 類具有 Dictionary<FieldIdentifier, FieldState> 類型的私有屬性 - 這使 Blazor 可以將其附加狀態存儲在扁平列表中以便快速訪問。

給定以下模型

protected?override?OnInitialized()
{var?country1?=?new?Country{Code?=?"GB",Name?=?"Great?Britain"};var?address1?=?new?Address{Line1?=?"The?Mansion",Line2?=?"Bletchley?Park",Line3?=?"Sherwood?Drive",Town?=?"Bletchley",Area?=?"Milton?Keynes",PostalCode?=?"MK3?6EB",Country?=?country1};var?person1?=?new?Person{Name?=?"My?name",Age?=?12,HomeAddress?=?address1,TelephoneNumber?=?"+44?(0)?1908?64004"};
}

我們希望看到如下的字段標識符:

c2cdee397ead2686e1d402be2a92836a.png

注意: 條目僅在需要時添加到字典中。

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

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

相關文章

Flutter之Container的寬度如何設置為手機屏幕寬度

1、問題 Container的寬度如何設置為手機屏幕寬度 2、解決辦法 width: MediaQuery.of(context).size.width,Row(children: [Container(height: 40,width: MediaQuery.of(context).size.width,// width: double.infinity,color: Colors.red,child: Row(children: [Containe…

團隊項目開發篇章8

例會時間&#xff1a;2016.11.3 整理&#xff1a;姬索肇 例會照片 每個人的工作 任務分配 我們今天與王鹿鳴學長和李云濤學長針對團隊開發過程中遇到的問題進行了討論&#xff0c;非常感謝學長們的熱心幫助&#xff0c;同時我們也被他們強大的編程能力所折服~ 在這里為學長們點…

MongoDB常用命令

啟動MongoDB$mongod --fork --logpath/data/log/r3.log--fork 允許mongod后臺運行&#xff0c;但是必須指定日志記錄文件路徑&#xff08;Enables a daemon mode that runs the mongos process in the background.&#xff09;--logpath 指定日志記錄文件路徑 導出Collections$…

【地理信息系統GIS】教案(七章全)第一章:地理信息系統概述

文章目錄 第一節 GIS基本概念第二節 GIS的組成第三節 GIS的功能第四節 GIS的發展第一節 GIS基本概念 1.1 GIS基本概念 1、信息 是用文字、數字、符號、語言、圖象、圖形等介質來表達事件、事物或現象等的內容、數量和特征,從而向人們(或系統)提供關于現實世界新的事實和知…

C# 讀寫ini文件 保存信息

/// <summary> /// 獲取本地信息 /// </summary> /// <returns></returns> private List<MHistoryKewWord> GetLocalHistoryKeyWords(){List<MHistoryKewWord> list new List<MHistoryKewWord>();var fs new FileStream("dat…

表達式的動態解析和計算,Flee用起來真香

前言在很多項目中經常會出現需要動態解析表達式和計算的場景&#xff0c;比如一些自動審核規則&#xff0c;或者是一些變量的值通過維護的公式在運行過程中動態算出&#xff1b;由于場景需求&#xff0c;都需要比較靈活的配置對應的表達式&#xff0c;然后希望在需要的時候能根…

C語言九十五之實現經典的反轉數組(通過指針或數組下標操作)

?作者簡介&#xff1a;大家好我是碼瑪莎拉蒂&#xff0c;CSDN博客專家&#x1f947;&#x1f947;&#x1f947; &#x1f4c3;個人主頁&#xff1a;個人主頁 &#x1f525;系列專欄&#xff1a;C語言試題200例 &#x1f4ac;推薦一款模擬面試、刷題神器&#x1f449; 點擊跳轉…

Linux下使用shell實現上傳linux下某個目錄下所有文件到ftp

首先我們需要搞清楚單個文件怎么上傳&#xff0c;把這個單文件上傳到ftp上的實現命名為一個:upload_to_ftp_command.sh 之后&#xff0c;需要弄清楚怎么實現遍歷一個目錄下的所有文件的&#xff0c;把這個遍歷某個目錄下的文件實現命名為&#xff1a;foeach_directory_and_uplo…

【地理信息系統GIS】教案(七章全)第二章:地理信息系統數據結構及數據獲取

文章目錄 第一節 地理空間及其表達第二節 空間數據采集第三節 屬性數據采集第四節 空間數據格式轉換第五節 空間數據質量第一節 地理空間及其表達 1.1 地理空間 地理空間上至大氣電離層,下至地幔莫霍面,是生命過程活躍的場所,也是宇宙過程對地球影響最大的區域。 地理信息…

[轉]Mysql數據庫開發的36條原則

前言 這些原則都是經歷過實戰總結而成 每一條原則背后都是血淋淋的教訓 這些原則主要是針對數據庫開發人員&#xff0c;在開發過程中務必注意 總是在災難發生后&#xff0c;才想起容災的重要性&#xff1b; 總是在吃過虧以后&#xff0c;才記得曾有人提醒過。 一、核心原則…

Kamp;R練習題6-1統計關鍵詞出現的次數

這道練習題訓練了&#xff1a; 1.結構體數組 2.二分查找 3.指針操作 ---- 都不難。但非常基礎&#xff0c;我認為非常好&#xff0c;做完了記到博客上來&#xff0c;題目見k&R&#xff0c;實現例如以下&#xff1a; /** Practice of struct array. K&R 6-1* author : w…

大話領域驅動設計——表示層及其他

概述表示層又稱用戶界面層&#xff0c;包含應用程序的頁面、組件等UI元素。服務層提供項目的HTTP API接口&#xff0c;包含MVC Controller和相關組件。ABP框架雖然在表示層提供了不少組件&#xff0c;但是這些和DDD本身沒有多少關系。而且隨著前后端分離架構的流行&#xff0c;…

C語言九十六之實現經典的字符串反轉(通過指針或下標操作)

?作者簡介&#xff1a;大家好我是碼莎拉蒂&#xff0c;CSDN博客專家&#x1f947;&#x1f947;&#x1f947; &#x1f4c3;個人主頁&#xff1a;個人主頁 &#x1f525;系列專欄&#xff1a;C語言試題200例 &#x1f4ac;推薦一款模擬面試、刷題神器&#x1f449; 點擊跳轉進…

Windows10家庭中文版沒有本地策略選項完美解決方案

Win+R,在運行中輸入:secpol.msc,查看安全設置是否打開,如下圖所示。 組策略對于優化和維護Windows系統來說十分重要。眾所周知,Windows 10家庭版中并不包含組策略,對于使用家庭版Windows的朋友來說,十分不方便。 通常情況下,如果策略組沒有打開的話,在安裝CAD等軟件時…

JavaScript總結(六)

使用DOM操縱樣式表 ? 操縱元素的Style樣式屬性&#xff08;所有的均對于CSS的內聯式&#xff09; 對于每個CSS樣式&#xff0c;Style對象都包含了一個相對應的屬性&#xff0c;只需要用到style屬性即可&#xff1b; Div.style.color "red"; //給div元素設置字體顏色…

[轉]淺談CMD和win powershell的區別

1、前言&#xff1a;本文給大家簡單描述了一下POWERSHELL和CMD的區別&#xff0c;簡單的說&#xff0c;Powershell是cmd的超集&#xff0c;換句話說&#xff0c;cmd能做的事情&#xff0c;Powershell都能做&#xff0c;但是Powershell還能額外做許多cmd不能做的活。 2、cmd是和…

【ArcGIS風暴】柵格計算器(Raster Calculator)運算出現錯誤問題及解決方案匯總

柵格計算器(Raster Calculator) 是一種空間分析函數工具,可以輸入地圖代數表達式,使用運算符和函數來做數學計算,建立選擇查詢,或鍵入地圖代數語法。只有熟練的運用并記憶一些常用的公式,才能很好的運用柵格計算器。在使用的過程中,容易出現這樣那樣的問題,本文就把柵…

「博客之星」評選,互投5星,留鏈必投

?? ? ?? 歡迎誠信互投? ? ? ?? ????? 謝謝各位大佬門&#xff0c;互投5星????? 投票地址&#xff1a; https://bbs.csdn.net/topics/603958492 投票地址&#xff1a; https://bbs.csdn.net/topics/603958492 投票地址&#xff1a; https://bbs.csdn.net…

為 ServiceCollection 實現裝飾器模式

為 ServiceCollection 實現裝飾器模式Intro在二十四種設計模式中&#xff0c;有一個模式叫做裝飾器模式一般用來動態地給一個對象添加一些額外的職責&#xff0c;就增加功能來說&#xff0c;裝飾模式比生成子類更為靈活&#xff0c;有更好的擴展性&#xff0c;我們也可以借助 D…

手把手教你啟用Win10的Linux子系統 Ubuntu

1、打開“開發者選項” 2、啟用“執行 Linux 程序的windows 子系統” 3、應用商店下載安裝Ubuntu 附&#xff1a;ubuntu的一些命令及查看已安裝軟件包的命令 // 系統 # uname -a # 查看內核/操作系統/CPU信息 # head -n 1 /etc/issue # 查看操作系統版本 # cat…