記事詳細

投稿日

2026年08月31日00時04分

タイトル

ASP.NET Core MVC: Create.cshtmlにアクセス時、「追加するアイコンを選択してください」Yes,No,というSweetAlert2 を使ったモーダルダイアログを表示し、<input type="file" id="upFile" class="form-control" />の画像ファイル情報から、<form asp-action="Create">内にある<input asp-for="CourseName" class="form-control" />に画像の「拡張子を除いた名前」を設定し、 <input asp-for="ImageUrl" class="form-control" />には、“/Images/”＋　画像ファイル名を設定するjqueryのコードを教えてください。

内容

了解しました。
ご要望は以下の流れですね。

Create.cshtml にアクセスしたら SweetAlert2 のモーダルを表示（Yes / No）。
Yes を押したら <input type="file" id="upFile"> で選択された画像ファイルの情報を取得。
拡張子を除いたファイル名を <input asp-for="CourseName"> に設定。
/Images/ + ファイル名（拡張子付き） を <input asp-for="ImageUrl"> に設定。

実装例（jQuery + SweetAlert2）

Html
@* Create.cshtml *@
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<form asp-action="Create" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label asp-for="CourseName"></label>
        <input asp-for="CourseName" class="form-control" id="CourseName" />
    </div>
    <div class="form-group">
        <label asp-for="ImageUrl"></label>
        <input asp-for="ImageUrl" class="form-control" id="ImageUrl" />
    </div>
    <div class="form-group">
        <label>画像ファイル</label>
        <input type="file" id="upFile" class="form-control" accept="image/*" />
    </div>
    <button type="submit" class="btn btn-primary">登録</button>
</form>

<!-- SweetAlert2 & jQuery -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function () {
    // ページアクセス時にモーダル表示
    Swal.fire({
        title: '追加するアイコンを選択してください',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Yes',
        cancelButtonText: 'No'
    }).then((result) => {
        if (result.isConfirmed) {
            // Yes の場合、ファイル選択ダイアログを開く
            $('#upFile').trigger('click');
        }
    });

    // ファイル選択時の処理
    $('#upFile').on('change', function () {
        const file = this.files[0];
        if (!file) {
            return; // ファイル未選択
        }

        // ファイル名と拡張子を分離
        const fileName = file.name;
        const dotIndex = fileName.lastIndexOf('.');
        const nameWithoutExt = dotIndex > 0 ? fileName.substring(0, dotIndex) : fileName;

        // CourseName に拡張子なしの名前を設定
        $('#CourseName').val(nameWithoutExt);

        // ImageUrl に /Images/ + ファイル名 を設定
        $('#ImageUrl').val('/Images/' + fileName);
    });
});
</script>

補足

accept="image/*" を付けることで画像ファイルのみ選択可能にしています。
SweetAlert2 の Yes/No は showCancelButton と confirmButtonText / cancelButtonText で実現。
ファイル名の拡張子除去は lastIndexOf('.') を使っています。
ファイル選択後に自動でフォームの入力欄に値を反映します。

もしご希望であれば、このコードに 「No を押した場合はフォーム送信を無効化」 する処理も追加できますが、
このままでも Yes → ファイル選択 → 自動入力 の流れは動作します。

このコードを使えば、ページアクセス時に SweetAlert2 が出て、Yes を押すとファイル選択 → 自動入力まで完結します。
必要なら、次に サーバー側でファイル保存処理 のコードもお渡しできますが、追加しますか？

添付画像

画像はありません

Genreのカテゴリ-名

Views

編集 | 記事一覧