學習ASP.NET Core Blazor編程系列二十三——登錄(2)

来源:https://www.cnblogs.com/chillsrc/archive/2023/01/29/17072109.html
-Advertisement-
Play Games

前言 .NET6 開始,.NET Croe API 項目取消了 Startup.cs 文件,在 Program.cs 文件的 Main 函數中完成服務的註冊和中間件管道的管理。但當我們項目引入更多包的時候,Program.cs 文件也會看起來很臃腫。 而且,我們不只會有一個後端項目,為了方便快速創建 ...


學習ASP.NET Core Blazor編程系列文章之目錄 學習ASP.NET Core Blazor編程系列一——綜述 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程式(上)
學習ASP.NET Core Blazor編程系列三——實體 學習ASP.NET Core Blazor編程系列五——列表頁面 學習ASP.NET Core Blazor編程系列七——新增圖書 學習ASP.NET Core Blazor編程系列八——數據校驗 學習ASP.NET Core Blazor編程系列十三——路由(完) 學習ASP.NET Core Blazor編程系列十五——查詢 學習ASP.NET Core Blazor編程系列十六——排序 學習ASP.NET Core Blazor編程系列二十——文件上傳(完) 學習ASP.NET Core Blazor編程系列二十一——數據刷新  學習ASP.NET Core Blazor編程系列二十二——登錄(1)  

         通過查詢微軟官網上的文檔,我們知道目前Blazor沒有內置的密碼輸入組件,這個用於輸入密碼的組件需要我們來自己實現。接下來我們就來實現密碼輸入組件功能。

三、自製密碼輸入組件

     1. 在Visual Studio 2022的解決方案資源管理器中,滑鼠左鍵選中“Pages”文件夾,右鍵單擊,在彈出菜單中選擇“添加—>Razor組件…”,並將組件命名為“InputPassword”。如下圖。

     2. 這個密碼輸入組件需要繼承IputBase<T>,並且重寫TryParseValueFromString這個方法。這個方法的作用是將用戶在表單輸入框中輸入數據轉換成你需要的T類型,例如T是DateTime的話,就要把表單輸入框中輸入的數據轉換成DateTime。

      TryParseValueFromString方法有三個參數,對這三個參數說明如下:

  • value:表單輸入框中填寫的值
  • result:類型是TValue,和InputBase<T>中設定的T一致,result值會綁定到表單中Model的對應欄位上
  • validationErrorMessage:輸入框中輸入的數據在進行與類型T轉換時,轉換失幾的給出的錯誤信息

      3.因為登錄界面中表單的輸入框接收的都是string類型的數據,而且我們的UserInfo類中的Password也是string,所以不需要我們做任何轉換操作,直接將value值賦給result就可以了。具體代碼如下:

@inherits InputBase<string>

<input type="password" class="@CssClass" @bind-value="@CurrentValue" />

@code { 

    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
    {
        validationErrorMessage = null;
        result = value;
        return true;
    }
} 

四、Login頁面

        1. 在Visual Studio 2022的解決方案資源管理器中,滑鼠左鍵選中“Pages”文件夾,右鍵單擊,在彈出菜單中選擇“添加—>Razor組件…”,並將組件命名為“Login.razor”。

     2.在Visual Studio 2022的文本編輯器中打開Login.razor,我們使用內建的表單組件EditForm來製作登錄界面。具體代碼如下:

@page "/Login"
@using BlazorAppDemo.Models
@using BlazorAppDemo.Utils
 
<div class="card">
    <div class="card-body my-2">
        <h3>Login</h3>
        <hr />
        <EditForm  Model="loginModel" OnValidSubmit="SubmitHandler" OnInvalidSubmit="InvalidHandler">
            <DataAnnotationsValidator />
           
            <div class="form-group">
                <label for="userName">  @HtmlHelper.GetDisplayName(loginModel ,m=> m.UserName)</label>
                <InputText @bind-Value="loginModel.UserName" class="form-control" id="userName" />
                <ValidationMessage For="()=>loginModel.UserName" />
            </div>
            <div class="form-group">
                <label for="pwd"> @HtmlHelper.GetDisplayName(loginModel ,m=> m.Password)</label>
                <InputPassword @bind-Value="loginModel.Password" class="form-control" id="pwd" />
                <ValidationMessage For="()=>loginModel.Password" />
            </div>
            <span class="form-control-plaintext"></span>
            <div class="form-group row">
                <div class="col-sm-10">
            <button class="btn btn-primary">登錄</button>
                </div>
            </div>
        </EditForm>
    </div>
</div>


@code {
    private UserInfo loginModel = new UserInfo();

    private void SubmitHandler()
    {
        Console.WriteLine($"用戶名:{loginModel.UserName} ,密碼:{loginModel.Password}");
    }

 
    private void InvalidHandler()
    {
        Console.WriteLine($"用戶名: {loginModel.UserName} ,密碼:{loginModel.Password}");

    }
}

      3.在Visual Studio 2022的菜單欄上,找到“調試-->開始調試”或是按F5鍵,Visual Studio 2022會生成BlazorAppDemo應用程式,併在瀏覽器中打開Home頁面,我們使用滑鼠點擊左邊的菜單欄上的“登錄”菜單項,頁面會進入“Login”頁面,如下圖。

      4.我們使用滑鼠左鍵,直接點擊“登錄”按鈕,頁面會提示我們必須輸入用戶名與密碼。如下圖。

 

5.當我們輸入的用戶名與密碼,不符合校驗規則時,頁面會提示我們必須輸入符合校驗規則的用戶名與密碼。如下圖。

 

     6.最終我們輸入了符合校驗規則的用戶名與密碼。如下圖。

 

7. 在輸入了正確的用戶名與密碼之後,使用滑鼠左鍵點擊“登錄”按鈕。系統後臺獲取了我們在表單輸入框中輸入的用戶名與密碼。如下圖。

 

 

 

 
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文結合京東監控埋點場景,對解決樣板代碼的技術選型方案進行分析,給出最終解決方案後,結合理論和實踐進一步展開。通過關註文中的技術分析過程和技術場景,讀者可收穫一種樣板代碼思想過程和解決思路,並對Java編譯器底層有初步瞭解。 ...
  • 在golang中可以使用a := b這種方式將b賦值給a,只有當b能進行深拷貝時a與b才不會互相影響,否則就需要進行更為複雜的深拷貝。 下麵就是Go賦值操作的一個說明: Go語言中所有賦值操作都是值傳遞,如果結構中不含指針,則直接賦值就是深度拷貝;如果結構中含有指針(包括自定義指針,以及切片,map ...
  • 第一種方式:使用{} firstDict = {"name": "wang yuan wai ", "age" : 25} 說明:{}為創建一個空的字典對象 第二種方式:使用fromkeys()方法 second_dict = dict.fromkeys(("name", "age")) #valu ...
  • 如果您想查找高於或低於平均值的數字,可以不必計算該平均值,就能查看更高或更低的值。通過Java應用程式,可以自動突出顯示這些數字。除了快速突出顯示高於或低於平均值的值外,您還可以查看高於或低於的值的個數。現在讓我們看看如何在 Java應用程式中實現此操作。 引入jar包 導入方法1: 手動引入。將  ...
  • 幾乎所有的高級編程語言都有自己的垃圾回收機制,開發者不需要關註記憶體的申請與釋放,Python 也不例外。Python 官方團隊的文章 https://devguide.python.org/internals/garbage-collector 詳細介紹了 Python 中的垃圾回收演算法,本文是這篇 ...
  • 在新版本的pandas中,上述代碼會引起警告,建議改成SQLAlchemy connectable(engine/connection),後續代碼將引入這種升級的連接方式。 ...
  • *以下內容為本人的學習筆記,如需要轉載,請聲明原文鏈接 微信公眾號「englyf」https://mp.weixin.qq.com/s/2GFLTstDC7w6u3fTJxflNA 本文大概 1685 個字,閱讀需花 6 分鐘內容不多, 但也花了一些精力如要交流, 歡迎關註我然後評論區留言 謝謝你的 ...
  • 目錄 背景 get 與 post 的區別 所有介面都用 post 請求? 背景 最近在逛知乎的時候發現一個有趣的問題:公司規定所有介面都用 post 請求,這是為什麼? 看到這個問題的時候其實我也挺有感觸的,因為我也曾經這樣問過我自己。在上上一家公司的時候接到一個項目是從零開始搭建一個微服務,當時就 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...