了解しました。
先ほどのサンプルを、より実用的で堅牢な形に改良して再提示します。
以下では、ASP.NET Core MVC + Entity Framework Core を使い、View 側の <script> から Ajax で Controller の更新アクションを呼び出す構成です。
前回よりも バリデーション強化、エラー処理の詳細化、SweetAlert2 との統合例 を追加しています。
1. Controller 側（更新用アクション）
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.Threading.Tasks;
using YourAppNamespace.Data; // DbContext の名前空間
using YourAppNamespace.Models; // Payment モデルの名前空間
public class PaymentsController : Controller
{
private readonly ApplicationDbContext _context;
public PaymentsController(ApplicationDbContext context)
{
_context = context;
}
/// <summary>
/// Ajax から呼び出される Payment 更新アクション
/// </summary>
[HttpPost]
[ValidateAntiForgeryToken] // CSRF 対策
public async Task<IActionResult> UpdatePayment([FromBody] PaymentUpdateDto dto)
{
if (dto == null || dto.PaymentId <= 0)
{
return BadRequest(new { message = "不正なデータです。" });
}
var payment = await _context.Payments.FirstOrDefaultAsync(p => p.PaymentId == dto.PaymentId);
if (payment == null)
{
return NotFound(new { message = "指定された支払いデータが見つかりません。" });
}
// 値の更新
payment.IncomeCategoryId = dto.IncomeCategoryId;
payment.Amount = dto.Amount;
try
{
await _context.SaveChangesAsync();
return Ok(new { message = "更新が完了しました。" });
}
catch (DbUpdateException ex)
{
return StatusCode(500, new { message = "データベース更新に失敗しました。", error = ex.Message });
}
}
}
/// <summary>
/// Ajax で受け取る更新用 DTO
/// </summary>
public class PaymentUpdateDto
{
public int PaymentId { get; set; }
public int IncomeCategoryId { get; set; }
public decimal Amount { get; set; }
}
2. View 側 JavaScript（SweetAlert2 + Ajax 呼び出し）
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// 例: SweetAlert2 の confirm 後に Ajax 更新
}).then((result) => {
if (result.isConfirmed && paymentId && paymentId > 0) {
const data = {
paymentId: paymentId,
incomeCategoryId: result.value.incomeCategoryId,
amount: result.value.amount
};
$.ajax({
url: '/Payments/UpdatePayment',
type: 'POST',
contentType: 'application/json',
headers: {
'RequestVerificationToken': $('input[name="__RequestVerificationToken"]').val() // CSRF 対策
},
data: JSON.stringify(data),
success: function (response) {
Swal.fire({
icon: 'success',
title: '成功',
text: response.message
}).then(() => {
location.reload(); // 必要に応じて画面更新
});
},
error: function (xhr) {
Swal.fire({
icon: 'error',
title: 'エラー',
text: xhr.responseJSON?.message || '不明なエラーが発生しました。'
});
}
});
}
});
</script>
3. 改良ポイント
- [ValidateAntiForgeryToken] と
RequestVerificationToken ヘッダーで CSRF 対策を追加。 - SweetAlert2 の
isConfirmed を使って「Yes」クリック時のみ実行。 - エラー時のメッセージを SweetAlert2 で表示。
- 成功後に
location.reload() で画面更新（必要に応じて削除可）。 - DTO を使って Controller 側で受け取るデータを明確化。
もしご希望であれば、このコードを Index.cshtml に完全統合した動作例 としてまとめることも可能です。
そうすれば、View にそのまま貼り付けて動作確認できます。
この統合版も作成しますか？
そうすると、あなたの環境ですぐ動く形になります。
Powered by Froala Editor