學習ASP.NET Core Blazor編程系列二十一——數據刷新

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

前言 眾所周知記憶體緩存(MemoryCache)數據是從記憶體中獲取,性能表現上是最優的,但是記憶體緩存有一個缺點就是不支持分散式,數據在各個部署節點上各存一份,每份緩存的過期時間不一致,會導致幻讀等各種問題,所以我們實現分散式緩存通常會用上Redis 但如果在高併發的情況下讀取Redis的緩存,會進行 ...


學習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編程系列二十——文件上傳(完) 文章中曾經談過文件上傳功能遺留了二個問題。第一個問題我們已經在上一篇文章中解決了,第二個問題,就是數據刷新問題,這不僅僅是上傳中會碰到,只要是用數據列表或表格呈現數據,都可能會碰到沒有及時刷新,數據不是最新的這個問題。

十、刷新數據

Blazor 綁定(綁定就是刷新)機制有以下幾種

  1. 首次載入時的自動綁定
  2. 調用 StateHasChanged 強制重新綁定(重新綁定即刷新)
  3. 註冊事件自動刷新

Blazor組件在第一次渲染完成之後,ShouldRender 會返回為 false,然後後面調用都返回 false,對於任意一個組件,若出現沒刷新的情況下,請考慮這個因素。
那麼,如何讓Blazor組件進行刷新呢?方法很簡單,手動調用該組件的StateHasChanged 方法,然後綁定數據。

StateHasChanged 方法

        這個方法至關重要,我們來看看這個方法裡面有什麼。如下圖。

    

      數據刷新的流程以上圖來講解,接下來,我們以具體的代碼來實現此功能。

1. 在Visual Studio 2022中的解決方案資源管理器中使用滑鼠左鍵雙擊打開UpFileInfoList.razor文件。在@code代碼塊中聲明一個事件。代碼如下:

 [Parameter]
    public EventCallback RefterData { get; set; }

2.在Visual Studio 2022中的解決方案資源管理器中使用滑鼠左鍵雙擊打開FileUpload1.razor文件。在@code代碼塊中用代碼實現RefterData事件的一個方法 RefterDataHandler,併在UpFileInfoList組件中調用我們剛纔寫的RefterDataHandler方法,在上傳方法中調用RefterDtaHandler方法 。代碼如下:

@page "/FileUpload1"
@using BlazorAppDemo.Models
@using BlazorAppDemo.Utils

@using Microsoft.AspNetCore.Mvc.ModelBinding
@using Microsoft.EntityFrameworkCore
@inject IWebHostEnvironment Environ
@inject IDbContextFactory<BookContext> dbFactory
 
<h3>多文件上傳示例</h3>
<p>
    <label>
        提示信息:@Message
 
    </label>
</p>
<p>
    <label>
        上傳文件最大可以為:<input type="number" @bind="maxFileSize"/>位元組
 
    </label>
</p>
<p>
    <label>
        一次可上傳:<input type="number" @bind="maxAllowedFiles" />個文件
 
    </label>
</p>
<p>
    <label>
        選擇上傳文件:<InputFile OnChange="@LoadFiles" multiple />
 
    </label>
    <BlazorAppDemo.Pages.Descri.UpFileInfoList RefterData="RefterDataHandler" @ref="@upfileList"></BlazorAppDemo.Pages.Descri.UpFileInfoList>

</p>
@if (isLoading)
{
    <p>文件上傳中......</p>
}
else
{
    <ul>
        @foreach (var file in loadedFiles)
        {
            <li>
                <ul>
                    <li>文件名:@file.Name</li>
                    <li>最後修改時間:@file.LastModified.ToString()</li>
                    <li>文件大小(byte):@file.Size</li>
                    <li>文件類型:@file.ContentType</li>
                </ul>
            </li>
           
        }
 
    </ul>
}
 
@code {

    private List<IBrowserFile> loadedFiles = new();
    private long maxFileSize = 1024 * 18;

    private int maxAllowedFiles = 2;
    private bool isLoading;

    private string Message = string.Empty;
    private BlazorAppDemo.Pages.Descri.UpFileInfoList upfileList;

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {

        isLoading = true;
        loadedFiles.Clear();
        foreach (var file in e.GetMultipleFiles(maxAllowedFiles))

        {
            try
            {

                ModelStateDictionary modelState = new ModelStateDictionary();
                loadedFiles.Add(file);

                FileHelpers.db = dbFactory.CreateDbContext();
                string result=  await FileHelpers.ProcessFormFile(file, modelState, Environ, maxFileSize);
                if (string.IsNullOrEmpty(result))
                {
                    Message = "上傳成功!";
                    RefterDataHandler();
 
                }else
                    Message = "上傳失敗!";
            }
            catch (Exception ex)
            {
                Message = ex.Message;
 
            }

        }
        isLoading = false;
    }

    public void RefterDataHandler()
    {
        StateHasChanged();
        upfileList.BindData();
    }


}

 

3.我們在Visual Studio 2022中切換到UpFileInfoList.razor頁面,併在ShowConfirmMsg方法中調用RefterData方法 。具體代碼如下。
@page "/Descri/UpFileInfoList"
@using BlazorAppDemo.Models

@using BlazorAppDemo.Utils
@using Microsoft.EntityFrameworkCore
 
@inject IDbContextFactory<BookContext> dbFactory
@inject IJSRuntime JsRuntime

 
<h3>已上傳文件列表</h3>
<table class="table" width="99%">

    <thead>

      
        <tr>
            <th></th>
            <th>
                @HtmlHelper.GetDisplayName(fileDesc,m=>m.Name)
 
            </th>
            <th>
                @HtmlHelper.GetDisplayName(fileDesc ,m=> m.NewName)
            </th>
 
            <th class="text-center">
                @HtmlHelper.GetDisplayName(fileDesc ,m=>m.UploadDateTime)
            </th>
            <th class="text-center">
                @HtmlHelper.GetDisplayName(fileDesc ,m=> m.FileSize)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in fileDescs)
        {
            <tr>
                <td>

                    <button id="delete" class="btn btn-primary"  @onclick="@(async e => await ShowConfirmMsg(e, @item.ID))">刪除</button>
                </td>
                <td>
                    @item.Name
 
                </td>
                <td>
                    @item.NewName
 
                </td>
                <td class="text-center">
                    @item.UploadDateTime
                </td>
                <td class="text-center">
                    @item.FileSize
                </td>
            </tr>
        }
    </tbody>
</table>
 
@code {
    private static BookContext _context;


    private List<FileDescribe> fileDescs = new List<FileDescribe>();
    private FileDescribe fileDesc = new FileDescribe();
    [Parameter]
    public EventCallback RefterData { get; set; }
    protected override async Task OnInitializedAsync()
    {
 
        BindData();
        await base.OnInitializedAsync();
    }
 
    public void BindData()
    {
        _context = dbFactory.CreateDbContext();
        fileDescs = _context.FileDescribe.ToList();
 
    }


    public void DeleteFile(MouseEventArgs e, int Id)
    {
        List<int> listId = new();
        listId.Add(Id);

        int[] Ids= listId.ToArray();
        var entity = _context.Find<FileDescribe>(Id);

        _context.Remove<FileDescribe>(entity);
        _context.SaveChangesAsync();
    
    }

    public async Task ShowConfirmMsg(MouseEventArgs e,int Id)
    {

        if (await JsRuntime.InvokeAsync<bool>("confirm",$"你是否確認要刪除當前文件?"))
        {
            DeleteFile(e, Id);
         
            await RefterData.InvokeAsync();
        }
    }
 
}
4.在Visual Studio 2022中按F5運行圖書租賃管理應用程式,然後在瀏覽器中點擊“上傳文件”菜單。如下圖。

 

5. 在瀏覽器的“多文件上傳示例”頁面中使用滑鼠左鍵點擊“選擇文件”按鈕,在彈出的對話框中,選擇“1K文件”,文件將被上傳,文件信息會在上傳成功之後,及時更新到“已上傳文件列表”中。如下圖。

 

 

   6.  在已上傳文件列表中,點擊要刪除的上傳文件記錄前面的刪除按鈕。系統會彈出一個“你是否確認要刪除當前文件”的提示信息,如下圖。

 

 

7. 使用滑鼠左鍵點擊“確定”按鈕,系統將把文件信息刪除,同時刷新“已上傳文件列表”信息。如下圖。

 

 

 


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

-Advertisement-
Play Games
更多相關文章
  • 在上一篇博客中我們有提到一個詞叫做常量,現在就來講講它常量:指的是在程式運行過程中值不會發生改變的量其實我們也有寫過,在這個輸出語句中,這個1就是常量簡單來說程式運行下去,這個1它怎麼樣也不會變成3吧變數:指的是在程式運行過程中值會發生改變的量那麼怎麼來定義一個變數呢我們先來試著定義一個x,值就先為 ...
  • Spring基本介紹02 5.簡單模擬Spring基於XML配置的程式 5.1需求說明 自己寫一個簡單的Spring容器,通過讀取beans.xml,獲取第一個Javabean:Monster的對象,給該對象屬性賦值,放入到容器中,並輸出該對象信息 也就是說,不使用spring原生框架,我們自己簡單 ...
  • 前言 C 語言是一門功能強大的專業化編程語言,深受專業程式員和業餘編程愛好者的喜愛,同時 C 語言也是當今最流行的嵌入式開發語言。大多數嵌入式項目的開發都是用 C 語言來編寫的。 既然 C 語言這麼厲害,那學習 C 語言應該用什麼軟體呢? 推薦使用 Dev-Cpp 在這我推薦初學者使用 Dev-Cp ...
  • Go語言上手(一) 這是我參與「第五屆青訓營 -後端場」筆記創作活動的的第一篇筆記。 先上代碼倉庫: WenTesla/GoLang-Study: 一個學習Go的倉庫 (github.com) 這個倉庫下放下我目前學習GO的所有筆記以及代碼,還未整理,最後會將倉庫進行整理。 基礎語法 一:類型 GO ...
  • 1. 生成6位數字隨機驗證碼 import random import string def num_code(length=6): """ 生成長度為length的數字隨機驗證碼 :param length: 驗證碼長度 :return: 驗證碼 """ return ''.join(random ...
  • 本篇主要介紹Java NIO的基本原理和主要組件 Netty是由JBOSS提供的Java開源網路應用程式框架,其底層是基於Java提供的NIO能力實現的。因此為了掌握Netty的底層原理,需要首先瞭解Java NIO的原理。 NIO簡介 電腦主要由CPU、記憶體、外存、IO設備等硬體組成,電腦執行 ...
  • keytool 是 Java 自帶的一個安全相關的工具,用於管理密鑰和證書;本文主要介紹其基本使用;文中所使用到的軟體版本:Java 1.8.0_321。 1、簡介 keytool 命令是一個密鑰和證書管理的工具。它允許用戶使用數字簽名管理自己的公鑰/私鑰對和相關證書,用於自我身份驗證(向其他用戶和 ...
  • 1 簡介 如果要選擇GCP為雲平臺,則經常需要創建GCE(Google Compute Engine),有以下幾種方式: (1) 在瀏覽器創建 (2) 命令 gcloud (3) Terraform 在開始之前,可以查看:《初始化一個GCP項目並用gcloud訪問操作》。 2 GCP Console ...
一周排行
    -Advertisement-
    Play Games
  • 前言 當別人做大數據用Java、Python的時候,我使用.NET做大數據、數據挖掘,這確實是值得一說的事。 寫的並不全面,但都是實際工作中的內容。 .NET在大數據項目中,可以做什麼? 寫腳本(使用控制台程式+頂級語句) 寫工具(使用Winform) 寫介面、寫服務 使用C#寫代碼的優點是什麼? ...
  • 前言 本文寫給想學C#的朋友,目的是以儘快的速度入門 C#好學嗎? 對於這個問題,我以前的回答是:好學!但仔細想想,不是這麼回事,對於新手來說,C#沒有那麼好學。 反而學Java還要容易一些,學Java Web就行了,就是SpringBoot那一套。 但是C#方向比較多,你是學控制台程式、WebAP ...
  • 某一日晚上上線,測試同學在回歸項目黃金流程時,有一個工單項目介面報JSF序列化錯誤,馬上升級對應的client包版本,編譯部署後錯誤消失。 線上問題是解決了,但是作為程式員要瞭解問題發生的原因和本質。但這都是為什麼呢? ...
  • 本文介紹基於Python語言中TensorFlow的Keras介面,實現深度神經網路回歸的方法。 1 寫在前面 前期一篇文章Python TensorFlow深度學習回歸代碼:DNNRegressor詳細介紹了基於TensorFlow tf.estimator介面的深度學習網路;而在TensorFl ...
  • 前段時間因業務需要完成了一個工作流組件的編碼工作。藉著這個機會跟大家分享一下整個創作過程,希望大家喜歡,組件暫且命名為"easyFlowable"。 接下來的文章我將從什麼是工作流、為什麼要自研這個工作流組件、架構設計三個維度跟大家來做個整體介紹。 ...
  • 1 簡介 我們之前使用了dapr的本地托管模式,但在生產中我們一般使用Kubernetes托管,本文介紹如何在GKE(GCP Kubernetes)安裝dapr。 相關文章: dapr本地托管的服務調用體驗與Java SDK的Spring Boot整合 dapr入門與本地托管模式嘗試 2 安裝GKE ...
  • 摘要:在jvm中有很多的參數可以進行設置,這樣可以讓jvm在各種環境中都能夠高效的運行。絕大部分的參數保持預設即可。 本文分享自華為雲社區《為什麼需要對jvm進行優化,jvm運行參數之標準參數》,作者:共飲一杯無。 我們為什麼要對jvm做優化? 在本地開發環境中我們很少會遇到需要對jvm進行優化的需 ...
  • 背景 我們的業務共使用11台(阿裡雲)伺服器,使用SpringcloudAlibaba構建微服務集群,共計60個微服務,全部註冊在同一個Nacos集群 流量轉發路徑: nginx->spring-gateway->業務微服務 使用的版本如下: spring-boot.version:2.2.5.RE ...
  • 基於php+webuploader的大文件分片上傳,帶進度條,支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況)。文件上傳前先檢測該文件是否已上傳,如果已上傳提示“文件已存在”,如果未上傳則直接上傳。視頻上傳時會根據設定的參數(分片大小、分片數量)進行上傳,上傳過程中會在目標文件夾中生成一個臨 ...
  • 基於php大文件分片上傳至七牛雲,使用的是七牛雲js-sdk V2版本,引入js文件,配置簡單,可以暫停,暫停後支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況),可以配置分片大小和分片數量,官方文檔https://developer.qiniu.com/kodo/6889/javascrip ...