常連

### 前提
Blazor webassemblyアプリからSQLServerに接続をしようとしています。
しかし接続文字列を記述するときに、作成したSQLServerの接続情報がわからなくなってしまいました。
SQLServerはSSMSから捜査しています。
### 実現したいこと
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-09-13/344ae5e5-fd39-4267-a160-eaee6de04b65.png)
上記ドラッグしている箇所に当てはまる接続文字列を把握する

### 発生している問題・エラーメッセージ
接続文字列がわからず、
「SSMS　接続文字列　取得」などの検索ワードで取得方法を見ていますが
未だ方法がわかりません。

### 試したこと
以下のサイトに載っている、SQL文から情報を取得する方法を試してみました。
確かに接続文字列は取得できるのですが、
実行してみるとアプリからの接続はできませんでした。
また、ユーザIDやパスワードを使用した形でもなかったので
今は別の方法を模索中です。

https://qastack.jp/dba/20528/how-to-check-connection-string-in-ssms2012
```sql
select
    'data source=' + @@servername +
    ';initial catalog=' + db_name() +
    case type_desc
        when 'WINDOWS_LOGIN' 
            then ';trusted_connection=true'
        else
            ';user id=' + suser_name()
    end
from sys.server_principals
where name = suser_name()
```
SQL実行結果
data source=DA001597;initial catalog=DASample;trusted_connection=true


### 補足情報（FW/ツールのバージョンなど）
SQLServerは15.0.2000.5を使用
SSMSは18を使用

SSMSからSQLServerへ接続するときは以下の情報が表示されます。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-09-13/9ec50e6b-6008-495f-abb2-be61dda6031d.png)


パスワードまでは出せないかもしれないのですが、
宜しくお願い致します。

SQLServerに接続するための接続文字列を確認したい

### 実現したいこと
ASP.NET Core BlazorのVirtualizeコンポーネントで<table>の要素を出力していますが、
画面の初期表示時にスクロール位置を指定したいです。
（たとえば1000行ある中の900行目の位置にスクロールしたい）

一覧から行を選択して詳細画面を開くUIがあり、詳細画面から戻った際に
スクロール位置を詳細画面を表示する直前の位置に戻したいです。

### 発生している問題・分からないこと
そういったことが可能なのか、可能なのであればどのように実装すべきか
ご教示いただきたいです。



### 該当のソースコード

```Index.razor
@page "/index"

<PageTitle>Index</PageTitle>

<div style="height: 100%; overflow-y: auto;">
    <table>
        <thead>
            <tr>
                <th>sample1</th>
                <th>sample2</th>
                <th>sample3</th>
            </tr>
        </thead>
        <tbody>
            <Virtualize Context="sample" Items="@sampleList">
                <tr>
                    <td>@sample.Sample1</td>
                    <td>@sample.Sample2</td>
                    <td>@sample.Sample3</td>
                </tr>
            </Virtualize>
        </tbody>
    </table>
</div>

@code {
    private List<Sample> sampleList = [];

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            for (var i = 0; i <= 1000; i++)
            {
                sampleList.Add(new Sample
                    {
                        Sample1 = $"Sample1-{i}",
                        Sample2 = $"Sample2-{i}",
                        Sample3 = $"Sample3-{i}",
                    });
            }
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public class Sample
    {
        public string Sample1 { get; set; } = string.Empty;

        public string Sample2 { get; set; } = string.Empty;

        public string Sample3 { get; set; } = string.Empty;
    }
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
・「Blazor Virtualize スクロール位置」で検索しましたがヒットしませんでした。

・js（jquery）のscrollTop()でスクロール位置をセットしようとしましたが
　スクロール位置が想定より上のほうになってしまい上手くいきませんでした。
　※Virtualizeではなくforeachを利用していたときはこの方法で実現できていました。

### 補足
特になし

ASP.NET Core BlazorのVirtualizeコンポーネントでスクロール位置を指定したい

### 実現したいこと
[実現したい事]※BlazorとAsp.netが初心者です
blazor webassemblyアプリケーションで、
1.ログインしていない時、未認証状態にする。
2.ログインが成功した時にAuthorizeViewを認証状態にする。
[実装した内容]
<前準備>
1.AuthenticationStateProviderを継承したクラスを作成。(CustomeAuthticateProviderという名前で作成)
2.Program.csにbuilder.Services.AddScopedを使用して、手順1で作成したクラスを登録。
   (この時、AddAuthorizationCoreやAddCascadingAuthenticationStateも呼び出しています)
<ログインから認証状態の流れ>
1.画面表示。
  (この状態では未認証。最初の画面表示時、自作したCustomeAuthticateProviderクラスのGetAuthenticationStateAsyncが呼び出され、未認証状態なので、空のAuthenticationStateを返しておく)
2.ログインする。ログイン時に、自作で作成したWEB APIを呼び出し、呼び出し結果からWEB API側で作成した、JWTのトークンを取得する。
3.ログイン時に使用したユーザーIDとJWTのトークンを、ブラウザ側のセッションストレージに保存する。
4.CustomeAuthticateProviderクラスから、NotifyAuthenticationStateChangedメソッドを実行する。
この時、引数には手順3でセッションストレージに保存したユーザーIDをClaimsIdentityに含めた、AuthenticationStateを渡す。
(NotifyAuthenticationStateChangedメソッドは、継承元のAuthenticationStateProviderクラスで定義されているメソッド)
5.認証状態に変更なし(AuthorizeViewを使用しているどのページに移動しても変化なし)

### 発生している問題・分からないこと
[わからない事]
AuthorizeView認証状態の更新方法がわかりません。
[発生している問題]
AuthenticationStateProviderのNotifyAuthenticationStateChangedメソッドを呼び出しても、認証状態が更新されないです。
[デバッグ時の状況]
AuthenticationStateProviderクラスのNotifyAuthenticationStateChangedを何度も実行しても、AuthenticationStateProviderのGetAuthenticationStateAsyncがAuthorizeView側から呼ばれません。(この時、AuthenticationStateProviderクラスのAuthenticationStateChangedイベントは呼ばれますが、肝心のAuthorizeViewの状態は更新されません。)



### 該当のソースコード

```C# Program.cs
using BlazorApp1;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Blazored.SessionStorage;
using Microsoft.AspNetCore.Authorization;
using Microsoft.Extensions.Options;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// ブラウザ側のセッションストレージを使用する為に
// NuGetでインストールしたBlazored.SessionStorage(2.4.0)を使用
builder.Services.AddBlazoredSessionStorage();

// 自作で作成したAuthenticationStateProviderを継承したクラスを登録
builder.Services.AddScoped<AuthenticationStateProvider, CustomeAuthticateProvider>();

// 自作で定義したインターフェースの登録。
builder.Services.AddScoped<ICustomeAuthticateProvider, CustomeAuthticateProvider>();
// 自作のサービスクラスを登録
builder.Services.AddScoped<IAuthService, CustomeAuthService>();

builder.Services.AddAuthorizationCore();

builder.Services.AddCascadingAuthenticationState();

await builder.Build().RunAsync();

```

```c# CustomeAuthticateProvider.cs
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components;
using System.Security.Claims;
using System.Net.Http.Headers;
using Blazored.SessionStorage;

namespace BlazorApp1;

public interface ICustomeAuthticateProvider
{
    public Task MarkUserAsAuthenticated(string userID, string authToken);

    public Task MarkUserAsLoggedOut();

    public void ExecuteNotifyAuthenticationStateChanged();
}

internal class CustomeAuthticateProvider : AuthenticationStateProvider, ICustomeAuthticateProvider
{
    private readonly HttpClient _httpClient;

    private readonly ISessionStorageService _sessionStorageService;

    public CustomeAuthticateProvider(HttpClient httpClient, ISessionStorageService sessionStorageService)
    {
        _httpClient = httpClient;
        _sessionStorageService = sessionStorageService;
        base.AuthenticationStateChanged += CustomeAuthticateProvider_AuthenticationStateChanged;
    }

    private async void CustomeAuthticateProvider_AuthenticationStateChanged(Task<AuthenticationState> task)
    {
        var state = await task;
        if (state != null)
        {
            string name = state.User.Identity?.Name ?? "";
            Console.WriteLine($"呼ばれたよ！！======= name={name}");
        }
    }

    public async override Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        // ローカルストレージからトークンとユーザ名を取得
        var savedToken = await _sessionStorageService.GetItemAsync<string>("authToken");
        var userID = await _sessionStorageService.GetItemAsync<string>("userID");        

        if (string.IsNullOrWhiteSpace(savedToken))
        {
            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
        }

        _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", savedToken);

        var identity = new ClaimsIdentity(
        [
            new Claim(ClaimTypes.Name, userID),
        ], "Test");
        var principal = new ClaimsPrincipal(identity);
        var authenticationState = new AuthenticationState(principal);
        return authenticationState;
        
    }

    public async Task MarkUserAsAuthenticated(string userID, string authToken)
    {
        // ローカルストレージに認証情報を保持して変更通知を行う
        await _sessionStorageService.SetItemAsync("userID", userID);
        await _sessionStorageService.SetItemAsync("authToken", authToken);

        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }

    public async Task MarkUserAsLoggedOut()
    {
        // ローカルストレージの認証情報を削除して変更通知を行う
        await _sessionStorageService.RemoveItemAsync("userID");
        await _sessionStorageService.RemoveItemAsync("authToken");
        if (_httpClient.DefaultRequestHeaders.Authorization != null)
        {
            _httpClient.DefaultRequestHeaders.Authorization = null;
        }
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }

    public void ExecuteNotifyAuthenticationStateChanged()
    {
        NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
    }
}
```

```c# TestAuthHandler .cs
using Microsoft.AspNetCore.Authorization;

namespace BlazorApp1
{
    public class TestAuthHandler : AuthorizationHandler<TestRequirement>
    {
        protected override Task HandleRequirementAsync(AuthorizationHandlerContext context, TestRequirement requirement)
        {
            //context.Succeed(requirement);
            //context.Fail();

            var identityName = context.User.Identity?.Name;
            if (identityName is null)
            {
                context.Fail();
                return Task.CompletedTask;
            }

            context.Succeed(requirement);

            return Task.CompletedTask;
        }
    }
}


```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
[他に試したこと]
ポリシーを追加して、そのポリシーに対応したIAuthorizationHandlerを実装したクラスのHandleRequirementAsyncメソッドの引数のAuthorizationHandlerContextに、どのような値が入ってきているか確認
<手順>
1.前準備として、Program.csの中で、builder.Services.AddAuthorizationCoreの引数のアクション内で、"Test"という名前でconfigure.AddPolicyメソッドを実行しポリシーを作成し。
2.builder.Services.AddScoped<IAuthorizationHandler, TestAuthHandler>();という一行を追加して、TestAuthHandlerクラスが、AuthorizeViewでポリシーに"Test"を設定している場合、表示時に呼ばれるように設定。
<確認内容>
1.AuthorizeViewの初期画面表示時は、AuthorizationHandlerContextに何も設定されていないものが設定されていた。
2.ログインしてブラウザ側のセッションストレージにユーザーIDなどを保存し、AuthenticationStateProviderクラスのNotifyAuthenticationStateChangedを呼び出しても、AuthenticationStateProviderクラスのGetAuthenticationStateAsyncメソッドが呼び出されない為、AuthorizationHandlerContextの中身は空のままです。

### 補足
[使用しているツールやバージョン]
Microsoft Visual Studio Community 2022 (64 ビット) (Version 17.12.3)
プロジェクトの.netのターゲット：net9.0

blazor webassemblyでAuthorizeViewを使用した時の認証状態変更について

### 実現したいこと
C＃BlazorアプリケーションからSQLServer上のDBへ接続をして、データを引っ張ってきたい。

### 発生している問題・エラーメッセージ
問題：SQLServerへ接続ができない。（接続させる手順が参考サイト通りにいかない）

実行する以前の段階で躓いているのでエラー文等は出ていないです。
現在参考にしているサイトは以下です。
https://blazor-master.com/entity-framework-sqlserver/

上記のサイト中段にある「接続文字列の設定」を行うときに必要となる接続文字列を調べるために以下のサイトを参考にしました。
https://it-skill-memo.work/2020/07/31/%e3%80%90c%e3%80%91visual-studio%e3%81%a7sql-server%e3%81%ae%e6%8e%a5%e7%b6%9a%e6%96%87%e5%ad%97%e5%88%97%e3%82%92%e5%8f%96%e5%be%97%e3%81%99%e3%82%8b/


このときVisualStudioのデータソースウィンドウを開いて操作するのですが、
私のPCのVisualStudioではデータソースウィンドウには何も表示されず、各ボタンも非活性になっているため操作できません。

データソースウィンドウが効かない状態をクリアすべく以下のサイトを参考にしました。
https://social.msdn.microsoft.com/Forums/ja-JP/993181e7-48f6-428b-88b8-d901f3d2d374?threadDisplayName=12487125401247912477125401247312454124511253112489124541236420

このサイトに書かれている通りに操作したのですが、結果は変わらずデータソースウィンドウが使えません。
上記捜査後には、VisualStudioを一度落として開きなおしたのですが、変わりません。

解決方法がわかりますでしょうか？
もしくは、より簡単にSQLServerへ接続する別の方法があればご教授願いたいです。

### 該当のソースコード
接続情報クラス

```C#
using Microsoft.EntityFrameworkCore;

namespace ***.Client.Data
{
    public class SampleDbContext : DbContext
    {
        public SampleDbContext(DbContextOptions<SampleDbContext> options)
        :base(options)
            {
            }
        public virtual DbSet<Report> Reports { get; set; }

}

}

```
接続サービスクラス
```C#
using System.Linq;
using System.Threading.Tasks;
using ***.Client.Data;
using Microsoft.EntityFrameworkCore;

namespace ***.Server.Data
{
    public class SampleDbService
    {
        SampleDbContext _Context { get; }

        public SampleDbService(SampleDbContext context) => 
            _Context = context;

        public Task<List<Report>> GetReportsAsync() =>
            _Context.Reports
                .OrderBy(x => x.Report_id)
                .ToListAsync();
    }
}

```
SELECTしたデータを表示させたいクラス
```C#
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace ***.Client.Data
{
    [Table("DASample", Schema = "dbo")]
    public class Report
    {
        [Key]
        [Column("id")]
        public int Report_id { get; set; }

        [Column("report_name")]
        public string Report_name { get; set; }
    }
}

```

### 試したこと

上記のサイトをもとに試行錯誤中です。

宜しくお願い致します。

### 追加情報
DBに関して今の自分の情報を追記します。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-17/40c4282c-a2d4-4349-bfbd-a82f48b17e08.png)

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-17/4a6c86fa-3cb5-4479-ab5e-bd51774aea7d.png)

これらが今のLocal上でのDB情報です。
今はまず、LocalDBへの接続を試みている状況です。


C#BlazorアプリからSQLServerへの接続ができない

### 前提・実現したいこと

Blazor WebAssembly において Modal 表示を行いたい

### 発生している問題・エラーメッセージ

単純に方法がわかりません。
たとえば Pages/Index.razor にどのように書けば Modal 表示ができるのかをご教授いただきたいと思っています。またはどこか参考サイトがあれば教えていただきたく思います。

### 試したこと
１．
[Bootstrap Modal](https://getbootstrap.jp/docs/4.2/components/modal/)
こちらのページのコードをそのまま貼り付けたりしてみましたが何も表示されません。
たとえば以下などをIndex.razorに貼り付けても何も表示されません。
```html
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
```
２．
[Templated Components in Blazor WebAssembly (Modal Popup) [Blazor Topics] | AK Academy](https://www.youtube.com/watch?v=g3vH-KYmsHQ)
[GitHub](https://github.com/aksoftware98/blazor-modal-popup)
こちらの動画および GitHub を参考に作成すると Modal 表示に成功したのですが、単純な仕組みを知りたいので Component としてではなく Page として書ける最小単位での記述法を探しています。

### 補足情報（FW/ツールのバージョンなど）

Visual Studio 2019
Microsoft.AspNetCore.Components.WebAssembly v5.0.6
.Net5

BlazorWebAssembly にて Modal 表示する

##環境
VS2019
Blazor Server

##質問
Blazorでクッキーを扱うにはどうすればよいのでしょうか。

##調査した事
セッション、クッキーを操作する為にはHttpContextを使う必要があり、
MVC.Core以降ではHttpContextを使うにはControllerの中でないとHttpContextが使えなくなっているようです。
それはBlazorでも同様です。

なので、クッキー・セッションを操作したければ、BlazorにControllerを実装する必要があるのだと思いましたが、razorのコードビハインドにロジックを持たせられているなら、BlazorでのContollerの役割が分からず、実装する気になりません。
もし、BlazorでControllerを実装する意味があるのならば教えて頂きたいです。（ブログなどで散見されるので作成する意味はやはりあるのでしょうか。）


代わりに、以下のようなクッキーサービスクラスを作成したいと考えております。
※razorファイルのコードビハインドで動作することは確認済みです。クッキーの操作はアプリケーション全体で行う想定なので、サービスクラスを作成しようとしています。

```C#
public class CookieService
{
    #region プロパティ

    private readonly IJSRuntime _jsRuntime;
    #endregion

    #region コンストラクタ
    public CookieService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }
    #endregion

    public async Task WriteCookieAsync(string key, string value)
    {
        await _jsRuntime.InvokeVoidAsync("blazorExtensions.WriteCookie", key, value);
    }

    public async Task<string> ReadCookieAsync()
    {
        return await _jsRuntime.InvokeAsync<string>("blazorExtensions.ReadCookie");
    }
}
```

ただし、このコードでも分からない点があります。
BlazorでJavaScriptを操作する為には、IJSRuntimeクラスをDIする必要があります。
このサービスクラスでrazorファイルと同様にInject属性を付けてもDIされず、nullのままとなっていました。


[サービスで DI を使用する](https://docs.microsoft.com/ja-jp/aspnet/core/blazor/fundamentals/dependency-injection?view=aspnetcore-3.1#use-di-in-services)にも書いてありますが、コンストラクタインジェクションしか受け付けないようです。

であれば、上記の書き方でよいと考えたのですが、これを実行すると以下のような例外が出力されてしまいます。
![イメージ説明](7b74bf4f3d53e219531c7d4919e5ba27.jpeg)


どのようにすれば、Blazorでクッキーを扱う事ができるのでしょうか。

Blazorでクッキーを扱うにはどうすればよいのでしょうか。

### したいこと
- カスタム検証(融点(Melting point)<=沸点(Boiling point))を定義したクラスがあり、この入力フォームを作成しています。
- このクラスの入力フォームを作ったときMelting point入力→Boiling pointとするとMelting pointの検証エラーが消えません。
- Boiling point入力時にMelting pointの再検証を行うにはどうすればよいでしょうか？
- ASP.NET MVCだと「TryValidateModel」というのがあるようなのですが、BlazorのRazorコンポーネントでは@modelは使えそうにありません。
- 参考URL：[ASP.NET Core MVC および Razor Pages でのモデルの検証 - 検証を再実行する](https://learn.microsoft.com/ja-jp/aspnet/core/mvc/models/validation?view=aspnetcore-7.0#rerun-validation)
- MudBlazorを利用した状態でのコードが知りたいところではありますが、標準のEditFormならこうする、という情報でも頂けるとありがたいです。

### 開発環境
- Visual Studio 2022
- .NET 6.0 (※LTSなので使っているだけなので、7.0ならこう解決できる、というのがあれば教えて欲しいと思っています)
- Blazor Server
- 利用コンポーネント ライブラリ：MudBlazor

### ソースコード
```C#
  public class Element
  {
    [Required(ErrorMessage = "Name is required")]
    public string Name { get; set; } = "";

    [Required(ErrorMessage = "Melting point is required")]
    [CheckMeltByBoil(ErrorMessage = "Boiling point must be higher than melting point.")]
    public double MeltingPoint { get; set; } = 0.0;

    [Required(ErrorMessage = "Boiling point is required")]
    [CheckBoilByMelt(ErrorMessage = "Boiling point must be higher than melting point.")]
    public double BoilingPoint { get; set; } = 0.0;
  }
  //サンプル：new Element { Name = "Hydrogen", MeltingPoint = -259.14, BoilingPoint = -252.87 },

  [AttributeUsage(AttributeTargets.Property)]
  public class CheckMeltByBoilAttribute : ValidationAttribute
  {
    protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
    {
      var model = validationContext.ObjectInstance as Element;
      if (model is null || value is null)
      {
        throw new NullReferenceException();
      }

      if ((double)value <= model.BoilingPoint)
      {
        return ValidationResult.Success;
      }
      else
      {
        return new ValidationResult(null);
      }
    }
  }

  [AttributeUsage(AttributeTargets.Property)]
  public class CheckBoilByMeltAttribute : ValidationAttribute
  {
    protected override ValidationResult? IsValid(object? value, ValidationContext validationContext)
    {
      var model = validationContext.ObjectInstance as Element;
      if (model is null || value is null)
      {
        throw new NullReferenceException();
      }

      if (model.MeltingPoint <= (double)value)
      {
        return ValidationResult.Success;
      }
      else
      {
        return new ValidationResult(null);
      }
    }
  }
```

```Razor
@using System.Globalization
@using MudDataGridSample.Data

<MudDialog>
    <TitleContent>
        <MudText Typo="Typo.h6">
            @(IsEdit ? "Edit" : "Create")
        </MudText>
    </TitleContent>
    <DialogContent>
        <MudForm @ref="form" @bind-IsValid="@success">
            <MudStack Spacing="1">
                <MudTextField Label="Name" HelperText="(HelperText)" @bind-Value="EditData.Name" For="@(() => EditData.Name)" />
                <MudNumericField Label="MeltingPoint" HelperText="(HelperText)" Format="N4" Culture="@CultureInfo.GetCultureInfo("en-US")" T="double" @bind-Value="EditData.MeltingPoint" For="@(() => EditData.MeltingPoint)" TextChanged="(string _val) => OnValueChangeHandler1(_val)" />
                <MudNumericField Label="BoilingPoint" HelperText="(HelperText)" Format="N4" Culture="@CultureInfo.GetCultureInfo("en-US")" T="double" @bind-Value="EditData.BoilingPoint" For="@(() => EditData.BoilingPoint)" TextChanged="(string _val) => OnValueChangeHandler2(_val)" />
            </MudStack>
        </MudForm>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="Color.Primary" Disabled="@(!success)" OnClick="Submit">Ok</MudButton>
    </DialogActions>
</MudDialog>

@code {
    bool success = false;
    MudForm? form;

    [CascadingParameter] MudDialogInstance? MudDialog { get; set; }

    [Parameter] public bool IsEdit { get; set; } = false;
    [Parameter] public Element EditData { get; set; } = new();


    protected async Task OnValueChangeHandler1(string newValue)
    {
        double set_val = 0.0;
        if (!double.TryParse(newValue, out set_val))
        {
            return;
        }

        //入れ直してStateHasChangedしても効果無し
        EditData.MeltingPoint = set_val;
        double tmp = EditData.BoilingPoint;
        EditData.BoilingPoint = EditData.BoilingPoint + 1.0;
        await InvokeAsync(StateHasChanged); 
        EditData.BoilingPoint = tmp;
        await InvokeAsync(StateHasChanged);
    }

    protected async Task OnValueChangeHandler2(string newValue)
    {
        double set_val = 0.0;
        if (!double.TryParse(newValue, out set_val))
        {
            return;
        }

        //入れ直してStateHasChangedしても効果無し
        EditData.BoilingPoint = set_val;
        double tmp = EditData.MeltingPoint;
        EditData.MeltingPoint = EditData.MeltingPoint + 1.0;
        await InvokeAsync(StateHasChanged);
        EditData.MeltingPoint = tmp;
        await InvokeAsync(StateHasChanged);
    }

    void Submit() => MudDialog?.Close(DialogResult.Ok(true));
    void Cancel() => MudDialog?.Cancel();
}
```

MudBlazorを使わずEditFormを使うなら以下のようになるでしょうか？
この場合はフォーカス移動だけで無く、値を入れ直さないとバリデーションチェックが走りませんでした。
操作例：
1.Melting pointに1を設定してフォーカスをBoiling pointに移動
　→Melting pointのバリデーションメッセージ表示
2.Boiling pointに-255を設定してフォーカスをMelting pointに移動
　→Boiling pointのバリデーションメッセージ表示
3.Melting pointに-999を設定してフォーカスをBoiling pointに移動
　→Melting pointのバリデーションメッセージ表示が消えるがBoiling pointのバリデーションメッセージはそのまま。
4.Boiling pointの値を変えずにSaveボタンにフォーカスを移動
　→変化無し
5.Boiling pointに-255を設定してSaveボタンにフォーカスを移動
　→Boiling pointのバリデーションメッセージ表示が消える。

```Razor
@using System.Globalization
@using MudDataGridSample.Data

<EditForm Model="@EditData" @ref="form" OnValidSubmit="@Submit">
    <DataAnnotationsValidator />
    <div>
        <label>Name</label>
        <InputText @bind-Value="EditData.Name"></InputText>
        &nbsp;<ValidationMessage For="@(() => EditData.Name)" />
    </div>
    <br />
    <div>
        <label>Melting point</label>
        <InputNumber TValue="Double" @bind-Value="EditData.MeltingPoint" />
        &nbsp;<ValidationMessage For="@(() => EditData.MeltingPoint)" />
    </div>
    <br />
    <div >
        <label >Boiling point</label>
        <InputNumber TValue="Double" @bind-Value="EditData.BoilingPoint" />
        &nbsp;<ValidationMessage For="@(() => EditData.BoilingPoint)" />
    </div>
    <br />
    <div >
        <input type="submit" value="Save" />
    </div>
</EditForm>

@code {
    EditForm? form;

    public Element EditData { get; set; } = new Element { Name = "Hydrogen", MeltingPoint = -259.14, BoilingPoint = -252.87 };

    private async Task Submit()
    {

        await InvokeAsync(StateHasChanged);
    }
}
```

### 試したこと
- TextChangedイベントで値を入れ直してStateHasChangedを呼んでも効果はありませんでした。

Blazorでフォームの再検証を行うには？

Swiper（https://swiperjs.com/get-started/）という、cssとjsのみ画像スライダーを実現するコードを使用したいのですが、
jsファイルの読み込み方法がわかりません。
サムネイル付き画像スライダーを表現する、Swiperのカスタムjsファイル「topimages.js」はwwwroot/js/topimages.jsに配置しています。

Pages/_Host.cshtml内に、

@*My-Swiper jsとcssのCDN(1)*@
<head>に上記サイトの載っているSwiperのcssとjsのCDNタグを付けました。

@*My-Swiper Swiperのカスタムjsファイル(2)*@
<script src="~/js/topimages.js"></script>タグも付けても変わらず。

@*My-Swiper(3)*@
<script>タグでtopimages.jsの内容をそのまま張り付けてもみたのですが変わらず。

@*My-Swiper(4)*@
<app>タグの中に<script>を入れるのは良くないというのを読んだので試しに外側に。

```Blazor

Pages/_Host.cshtml

@page "/"
@namespace BlazorApp2.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BlazorApp2</title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />

    @*My-Swiper jsとcssのCDN(1)*@
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

    @*My-Swiper Swiperのカスタムjsファイル(2)*@
    <script src="~/js/topimages.js"></script>

    @*My-Swiper(3)*@
    <script>
        var slider = new Swiper('#slider', {
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev'
        })
        var thumbs = new Swiper('#thumbs', {
            centeredSlides: true,
            spaceBetween: 10,
            slidesPerView: "auto",
            touchRatio: 0.2,
            slideToClickedSlide: true
        });
        slider.params.control = thumbs;
        thumbs.params.control = slider;
    </script>

</head>
<body>

    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>
    <script src="_framework/blazor.server.js"></script>

    @*My-Swiper(4)*@
    <script type="text/javascript" src="~/js/topimages.js"></script>

</body>
</html>

```

jsファイルを読み込ませたい先のPages/MyPages/TopImages.razorのコードになります。
```Blazor

Pages/MyPages/TopImages.razor

@page "/topimages"

@inject IJSRuntime JSRuntime

@inherits ArticleItem

<h3>TopImages</h3>

@foreach (var build in builds)
{
    <div id="slider" class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/Images/Builds/@build.ArtImageUrl" style="width:300px; height:auto;"></div>
        </div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
    </div>

    <div id="thumbs" class="swiper-container mb60">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/Images/Builds/@build.ArtImageUrl" style="width:100px; height:auto;"></div>
        </div>
    </div>
}

@code {
}

```

海外サイトを翻訳かけつつ調べてみたのですが、ファイル自体の読み込む方法がわからずでして・・・。
どなたかご教示頂けないでしょうか、
どうぞ宜しくお願いいたします・・・。