OK — あなたの要件は、
- ASP.NET Core MVC の Create.cshtml
- ページアクセス時に SweetAlert2 で「追加するアイコンを選択してください」Yes/No モーダルを表示
- Yes を押したら
<input type="file" id="upFile"> から画像ファイルを取得 - その画像ファイル情報を
<form asp-action="Create"> 内の <input asp-for="CourseName"> に反映
という流れですね。
以下に 完全動作するサンプル を示します。
Create.cshtml
@model YourNamespace.Models.CourseViewModel
@{
ViewData["Title"] = "Create";
}
<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<h2>Create</h2>
<form asp-action="Create" enctype="multipart/form-data" method="post">
<div class="form-group">
<label asp-for="CourseName" class="control-label"></label>
<input asp-for="CourseName" class="form-control" id="CourseName" />
<span asp-validation-for="CourseName" class="text-danger"></span>
</div>
<div class="form-group">
<label for="upFile">Upload Icon</label>
<input type="file" id="upFile" name="upFile" class="form-control" accept="image/*" />
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
@section Scripts {
<partial name="_ValidationScriptsPartial" />
<script>
document.addEventListener("DOMContentLoaded", function () {
// SweetAlert2 モーダル表示
Swal.fire({
title: '追加するアイコンを選択してください',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Yes',
cancelButtonText: 'No'
}).then((result) => {
if (result.isConfirmed) {
// Yes の場合、ファイル選択ダイアログを開く
document.getElementById("upFile").click();
}
});
// ファイル選択後に CourseName にファイル名を反映
document.getElementById("upFile").addEventListener("change", function () {
if (this.files && this.files.length > 0) {
const fileName = this.files[0].name;
document.getElementById("CourseName").value = fileName;
}
});
});
</script>
}
ViewModel例
namespace YourNamespace.Models
{
public class CourseViewModel
{
public string CourseName { get; set; }
public IFormFile UpFile { get; set; }
}
}
Controller例
using Microsoft.AspNetCore.Mvc;
using YourNamespace.Models;
namespace YourNamespace.Controllers
{
public class CoursesController : Controller
{
[HttpGet]
public IActionResult Create()
{
return View();
}
[HttpPost]
public IActionResult Create(CourseViewModel model)
{
if (ModelState.IsValid)
{
if (model.UpFile != null && model.UpFile.Length > 0)
{
// ファイル保存処理例
var filePath = Path.Combine("wwwroot/uploads", model.UpFile.FileName);
using (var stream = new FileStream(filePath, FileMode.Create))
{
model.UpFile.CopyTo(stream);
}
}
// DB保存などの処理
return RedirectToAction("Index");
}
return View(model);
}
}
}
実装ポイント
- SweetAlert2 は
DOMContentLoaded イベントでページ読み込み直後に表示 - Yes を押すと
#upFile のクリックイベントを発火し、ファイル選択ダイアログを開く - ファイル選択後、
CourseName にファイル名を自動入力 <form> は enctype="multipart/form-data" を必須にしてファイル送信可能に- Controller 側で
IFormFile を受け取り保存可能
もし「ファイル名ではなく画像のBase64データを CourseName に入れたい」場合は、JavaScriptで FileReader を使って変換できます。
希望があれば、その Base64埋め込み版 も作れますが、このままでもファイル名連動は動作します。
このコードを使えば、ページアクセス時にSweetAlert2でYes/Noを選び、Yesならファイル選択→CourseName自動入力まで一連の流れが実現できます。
要望があれば、次は Base64変換してCourseNameに格納するバージョン を作りますが、作成しますか？
Powered by Froala Editor