了解です。
以下に ASP.NET Core MVC の Create.cshtml で、
- ページアクセス時に SweetAlert2 の「追加するアイコンを選択してください」Yes/No モーダルを表示
- Yes の場合、
#upFile の画像ファイル名からCourseName に拡張子を除いた名前を設定ImageUrl に /Images/ + ファイル名を設定
- No の場合、フォーム送信を無効化
する jQuery + SweetAlert2 のサンプルコードを示します。
Create.cshtml（抜粋）
@model YourNamespace.Models.Course
@{
ViewData["Title"] = "Create";
}
<!-- SweetAlert2 CSS & JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<form asp-action="Create" id="createForm">
<div class="form-group">
<label asp-for="CourseName"></label>
<input asp-for="CourseName" class="form-control" />
</div>
<div class="form-group">
<label asp-for="ImageUrl"></label>
<input asp-for="ImageUrl" class="form-control" />
</div>
<div class="form-group">
<label for="upFile">画像ファイル</label>
<input type="file" id="upFile" name="upFile" class="form-control" accept="image/*" />
</div>
<button type="submit" class="btn btn-primary">登録</button>
</form>
@section Scripts {
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
let allowSubmit = false; // No選択時に送信を止めるフラグ
// ページロード時にSweetAlert2表示
Swal.fire({
title: '追加するアイコンを選択してください',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No'
}).then((result) => {
if (result.isConfirmed) {
allowSubmit = true;
// ファイル選択イベントでCourseNameとImageUrlを設定
$('#upFile').on('change', function () {
const file = this.files[0];
if (file) {
const fileName = file.name;
const baseName = fileName.substring(0, fileName.lastIndexOf('.')) || fileName;
$('#CourseName').val(baseName);
$('#ImageUrl').val('/Images/' + fileName);
}
});
} else {
allowSubmit = false;
Swal.fire({
icon: 'info',
title: 'キャンセルされました',
text: 'フォーム送信は無効化されます。'
});
}
});
// フォーム送信時の制御
$('#createForm').on('submit', function (e) {
if (!allowSubmit) {
e.preventDefault();
Swal.fire({
icon: 'warning',
title: '送信できません',
text: 'Noを選択したため送信は無効です。'
});
}
});
});
</script>
}
ポイント解説
- SweetAlert2 の Yes/No
showCancelButton: true でキャンセルボタンを No として利用result.isConfirmed が Yes 選択時
- ファイル名から拡張子を除去
const baseName = fileName.substring(0, fileName.lastIndexOf('.')) || fileName;
- フォーム送信制御
allowSubmit フラグで Yes/No の選択結果を保持- No の場合は
e.preventDefault() で送信を阻止
- ImageUrl の設定
✅ このコードを使えば、
- ページアクセス時に必ずモーダルが出て
- Yes の場合のみファイル選択で自動入力
- No の場合は送信不可
が実現できます。
もし「ページアクセス時ではなく、ファイル選択時にモーダルを出す」仕様に変更したい場合も簡単にできますが、このままアクセス時表示で進めますか？
Powered by Froala Editor