記事詳細


投稿日
2026年09月20日09時59分
タイトル

ASP.NET Core MVC: ViewのIndexに下記の<script>コードがあります。 }).then((result) => { // ユーザーが「Yes」をクリックした場合処理 if(paymentId != null && paymentId != undefined && paymentId != 0){ document.querySelector('[id="IncomeCategoryId"]').value = result.value.incomeCategoryId; document.querySelector('[id="Amount"]').value = result.value.amount; } コントローラー側に、

内容

了解しました。
ご質問の内容は、ASP.NET Core MVC で View 側の JavaScript(<script>)から Ajax を使って Controller のアクションを呼び出し、Payments テーブルの paymentId に該当する行を更新するサンプル構文ですね。

以下に、Controller 側 と JavaScript 側 の両方のサンプルコードを示します。
(Entity Framework Core を使用する想定)

1. Controller 側(Ajax 受け取り用アクション)

Csharp
using Microsoft.AspNetCore.Mvc; using System.Threading.Tasks; using YourAppNamespace.Data; // DbContext の名前空間 using YourAppNamespace.Models; // Payment モデルの名前空間 using Microsoft.EntityFrameworkCore; public class PaymentsController : Controller { private readonly ApplicationDbContext _context; public PaymentsController(ApplicationDbContext context) { _context = context; } // Ajax から呼び出す更新用アクション [HttpPost] public async Task<IActionResult> UpdatePayment([FromBody] PaymentUpdateDto dto) { if (dto == null || dto.PaymentId <= 0) { return BadRequest(new { message = "Invalid data." }); } var payment = await _context.Payments.FirstOrDefaultAsync(p => p.PaymentId == dto.PaymentId); if (payment == null) { return NotFound(new { message = "Payment not found." }); } // 更新処理 payment.IncomeCategoryId = dto.IncomeCategoryId; payment.Amount = dto.Amount; try { await _context.SaveChangesAsync(); return Ok(new { message = "Payment updated successfully." }); } catch (DbUpdateException ex) { return StatusCode(500, new { message = "Database update failed.", error = ex.Message }); } } } // Ajax で受け取るデータ用 DTO public class PaymentUpdateDto { public int PaymentId { get; set; } public int IncomeCategoryId { get; set; } public decimal Amount { get; set; } }

2. View 側 JavaScript(Ajax 呼び出し部分)

Html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> // 例: SweetAlert2 の then 内で呼び出す }).then((result) => { if (paymentId != null && paymentId !== undefined && paymentId !== 0) { const data = { paymentId: paymentId, incomeCategoryId: result.value.incomeCategoryId, amount: result.value.amount }; $.ajax({ url: '/Payments/UpdatePayment', // Controller のアクションURL type: 'POST', contentType: 'application/json', data: JSON.stringify(data), success: function (response) { alert(response.message); }, error: function (xhr) { alert("Error: " + xhr.responseJSON?.message ?? "Unknown error"); } }); } }); </script>

3. ポイント

  • DTO(Data Transfer Object) を使って、必要なデータだけを Controller に渡す。
  • [FromBody] を付けることで、JSON を直接受け取れる。
  • contentType: 'application/json'JSON.stringify(data) をセットで使う。
  • エラー時も BadRequestNotFound を返すことで、フロント側で適切に処理できる。
  • await _context.SaveChangesAsync() で非同期更新。

もしご希望であれば、このサンプルを SweetAlert2 の then 内に完全統合した形 にしてお渡しできます。
そうすれば、今の View の <script> にそのまま組み込めます。

この統合版を作成しますか?
そうすれば、あなたの Index.cshtml にコピペで動く形になります。

Powered by Froala Editor

添付画像

画像はありません
Genreのカテゴリ-名
Views
編集 | 記事一覧