常連

### 前提・実現したいこと

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 表示する

### 実現したいこと

- [ ] ASP.NET Core BlazorにてSqlserver接続をしデータを表示したい

### 前提

ASP.NET Core Blazorの勉強中です。環境を構築しSqlserverに接続し、社員名簿テーブルの中身を表示する作りになっています。
VisualStudio上の「デバッグ開始」から実行すると、社員名簿データが正常に表示されます。

### 発生している問題・エラーメッセージ
ただ、発行を行って「```https://localhost:10001```」でブラウザ上から接続すると
```
ExpectedStartOfValueNotFound, < Path: $ | LineNumber: 0 | BytePositionInLine: 0.
```
上記のようなエラーメッセージが表示されSqlserverへの接続が出来ない状況です。

### 試したこと

IISの設定や発行の方法などは以下のサイトを参考にしました。
https://shinta0806be.ldblog.jp/archives/10326909.html

参考になるサイト等でも構いませんのでご教授よろしくお願いいたします。

ASP.NET Core Blazorにて発行後にSqlserver接続でエラーになる

### 前提
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に接続するための接続文字列を確認したい

### したいこと
- カスタム検証(融点(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でフォームの再検証を行うには？

### 実現したいこと
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 でローカルのフォルダやファイルの一覧を表示したいです。

セキュリティ上の制約として、ブラウザ側からローカルのファイルを直接覗けないようになっているということは知識としては知っていますが、例えば Jupyter Notebook ではブラウザからローカルのファイルシステムをがっつり読み書きしているので、Blazor でも同じことができるんじゃないかと考えています。

できれば C# コードのみで実装したいですが、JavaScript と連携する方法でも十分と考えています。

### 前提
.NET6 Hosted Blazor WebAssembly を使用して、Windows10 Pro 64bit 22H2 上で動かしています。

### 試したこと

C#/Blazor のほうは情報が拾えずまったく手が出せない状態です。

JavaScript 方面はよわよわなので、何をどう試せばよいのかがわからずここに投稿しています。


コードを一つも掲載できずに申し訳ありませんが、何か糸口になる情報を得られればと思いますのでご協力よろしくお願いします。

Hosted Blazor WebAssembly でクライアントのローカルフォルダやファイルの一覧を web ページ上に表示したい

### 実現したいこと
C#のBlazorを使用して、URLからそのページのソースコードを取得出来るようにする。

### 前提

ここに質問の内容を詳しく書いてください。
Blazorを使って、URLからソースコードを取得するプログラムを作成していますが、
ソースコードを取得するボタンをクリックするとエラーメッセージがブラウザ上に表示されます。
解決方法が分かる方はご教示お願いします。

### 発生している問題・エラーメッセージ

```
「An unhandled error has occurred.」
```

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

```ここに言語名を入力
@page "/"
@using System.Runtime.InteropServices;

<h3>Fetch Source Code</h3>

<p>
    <label for="urlInput">URL:</label>
    <input type="text" id="urlInput" @bind="@url" />
</p>

<button @onclick="FetchSourceCode">Fetch</button>

@if (!string.IsNullOrEmpty(sourceCode))
{
    <pre>@sourceCode</pre>
}

@code {
    private string url;
    private string sourceCode;

    private async Task FetchSourceCode()
    {
        if (!string.IsNullOrEmpty(url))
        {
            using (HttpClient client = new HttpClient())
            {
                sourceCode = await client.GetStringAsync(url);
            }
        }
    }
}
```

**ボールドテキスト**


C#のBlazorを使って、指定したURLからHTMLのソースコードを取得しようとするとエラーが発生する

### 実現したいこと
HttpContextのSessionクラスへSetStringメソッドを用いた書込みの実現


### 前提
現在BlazorServerを使ったアプリケーション開発を行っております。
その中で、各セッションごとにユーザー情報などを管理するために
HttpContextのSessionクラスへ、SetStringを用いた書込み処理を実装しておりますが、
下記のエラーが発生しており書込みに失敗しております。
なお、当エラーについては同じソースコードで発生する環境とそうでない環境があるため、
何らかの設定が起因しているものと推測しております。
エラーメッセージから原因を推測しておりますが、
ブラウザの設定などいろいろと見直してみたものの解決に至っておりません。
御助力いただけますと幸いです。


### 発生している問題・エラーメッセージ
（一部マスキング）
System.InvalidOperationException
  HResult=0x80131509
  Message=The session cannot be established after the response has started.
  Source=Microsoft.AspNetCore.Session
  スタック トレース:
   場所 Microsoft.AspNetCore.Session.DistributedSession.Set(String key, Byte[] value)
   場所 Microsoft.AspNetCore.Http.SessionExtensions.SetString(ISession session, String key, String value)
   場所 ○○○○.Data.SessionControl.SetSessionInfo(String key, Object value)(C:\visualstudiopj\source\○○○○\○○○○\Data\SessionControl.cs):行 ○○
   場所 ○○○○.Pages.SessionID.<SetSessionInfo>d__14.MoveNext()(C:\visualstudiopj\source\○○○○\○○○○\Pages\SessionID.razor):行 ○○
  この例外は、最初にこの呼び出し履歴 
    [外部コード]
    ○○○○.Data.SessionControl.SetSessionInfo(string, object) (SessionControl.cs 内)
    ○○○○.Pages.SessionID.SetSessionInfo() (SessionID.razor 内) でスローされました

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

```C#
public void SetSessionInfo(string key, object value)
        {
            HttpContext httpContext = _httpContextAccessor.HttpContext;
            ISession session = httpContext.Session;
            // 格納するデータをJSON文字列にシリアライズして取得
            string jsonValue = JsonSerializer.Serialize(value);
            // セッションに指定されたキーでJSON文字列を格納
            session.SetString(key, jsonValue);
        }
```

### 試したこと

●環境
・ブラウザで履歴データ（Cookie含む）削除
・ブラウザのプライバシー設定変更（Cookieなどブロックしないように設定）
・サイトlocalhostのセキュリティ例外に追加
・強化型トラッキング防止機能の例外にlocalhostを追加（Firefox）
・Ignite UIのアンインストール
●PG
・Program.csの書き換え
　builder.Services.AddDistributedMemoryCache();
　builder.Services.AddSession(options =>
　{
　　options.IdleTimeout = TimeSpan.FromSeconds(10);
　　options.Cookie.HttpOnly = true;
　　options.Cookie.IsEssential = true;
　});
・セッションインタフェースのキャスト（ISession→DistributedSession）
・IHttpContextAccessorをコンストラクタではなくメソッドのパラメタでで引き渡し

### 補足情報（FW/ツールのバージョンなど）
・FW
　Blazor Server
・言語
　C#、razor
・IDE
　VisualStudio2022
