記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p data-pasted="true">以下は、前回のサンプルを改良した&nbsp;<strong>ASP.NET Core MVC + SweetAlert2 + AJAX</strong> 実装例です。<br>主な変更点は以下です。</p><ul><li><strong>コード構造の整理</strong>（<code>[ValidateAntiForgeryToken]</code> の追加、エラーハンドリング強化）</li><li><strong>SelectList 更新処理の改善</strong>（既存項目重複チェック）</li><li><strong>SweetAlert2 の UX 改善</strong>（入力バリデーション、ローディング表示）</li><li><strong>子セレクトの動的ロード API</strong> を追加（親変更時に自動更新）</li></ul><hr><h2>1. モデル</h2><pre data-priority="2"><div data-bm="28"><h5>Csharp</h5></div><code>// Models/PaymentType.cs
public class PaymentType
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public ICollection&lt;PaymentMethod&gt; PaymentMethods { get; set; } = new List&lt;PaymentMethod&gt;();
}

// Models/PaymentMethod.cs
public class PaymentMethod
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public int PaymentTypeId { get; set; }
    public PaymentType? PaymentType { get; set; }
}
</code></pre><hr><h2>2. コントローラ</h2><pre data-priority="2"><div data-bm="29"><h5>Csharp</h5></div><code>// Controllers/PaymentsController.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;

public class PaymentsController : Controller
{
    private readonly AppDbContext _context;

    public PaymentsController(AppDbContext context)
    {
        _context = context;
    }

    public IActionResult Create()
    {
        ViewData[&quot;PaymentTypeId&quot;] = new SelectList(_context.PaymentTypes.AsNoTracking(), &quot;Id&quot;, &quot;Name&quot;);
        ViewData[&quot;PaymentMethodId&quot;] = new SelectList(Enumerable.Empty&lt;SelectListItem&gt;());
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task&lt;IActionResult&gt; Create(Payment payment)
    {
        if (ModelState.IsValid)
        {
            _context.Add(payment);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(payment);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task&lt;IActionResult&gt; AddPaymentType([FromBody] PaymentType model)
    {
        if (string.IsNullOrWhiteSpace(model.Name))
            return BadRequest(&quot;Name is required&quot;);

        if (await _context.PaymentTypes.AnyAsync(x =&gt; x.Name == model.Name))
            return Conflict(&quot;既に存在します&quot;);

        _context.PaymentTypes.Add(model);
        await _context.SaveChangesAsync();

        return Json(new { id = model.Id, name = model.Name });
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task&lt;IActionResult&gt; AddPaymentMethod([FromBody] PaymentMethod model)
    {
        if (string.IsNullOrWhiteSpace(model.Name) || model.PaymentTypeId &lt;= 0)
            return BadRequest(&quot;Invalid data&quot;);

        if (await _context.PaymentMethods.AnyAsync(x =&gt; x.Name == model.Name &amp;&amp; x.PaymentTypeId == model.PaymentTypeId))
            return Conflict(&quot;既に存在します&quot;);

        _context.PaymentMethods.Add(model);
        await _context.SaveChangesAsync();

        return Json(new { id = model.Id, name = model.Name });
    }

    [HttpGet]
    public async Task&lt;IActionResult&gt; GetPaymentMethodsByTypeId(int typeId)
    {
        var methods = await _context.PaymentMethods
            .Where(m =&gt; m.PaymentTypeId == typeId)
            .Select(m =&gt; new { id = m.Id, name = m.Name })
            .ToListAsync();

        return Json(methods);
    }
}
</code></pre><hr><h2>3. Create.cshtml</h2><pre data-priority="2"><div data-bm="30"><h5>Razor</h5></div><code>@model Payment

&lt;div class=&quot;form-group&quot;&gt;
    &lt;label asp-for=&quot;PaymentTypeId&quot;&gt;&lt;/label&gt;
    &lt;select asp-for=&quot;PaymentTypeId&quot; id=&quot;PaymentTypeId&quot; class=&quot;form-control&quot; asp-items=&quot;@(ViewData[&quot;PaymentTypeId&quot;] as SelectList)&quot;&gt;
        &lt;option value=&quot;&quot;&gt;-- 選択 --&lt;/option&gt;
    &lt;/select&gt;
    &lt;button type=&quot;button&quot; id=&quot;btnAddPaymentType&quot; class=&quot;btn btn-sm btn-primary mt-1&quot;&gt;＋ 新規追加&lt;/button&gt;
&lt;/div&gt;

&lt;div class=&quot;form-group&quot;&gt;
    &lt;label asp-for=&quot;PaymentMethodId&quot;&gt;&lt;/label&gt;
    &lt;select asp-for=&quot;PaymentMethodId&quot; id=&quot;PaymentMethodId&quot; class=&quot;form-control&quot; asp-items=&quot;@(ViewData[&quot;PaymentMethodId&quot;] as SelectList)&quot;&gt;
        &lt;option value=&quot;&quot;&gt;-- 選択 --&lt;/option&gt;
    &lt;/select&gt;
    &lt;button type=&quot;button&quot; id=&quot;btnAddPaymentMethod&quot; class=&quot;btn btn-sm btn-primary mt-1&quot;&gt;＋ 新規追加&lt;/button&gt;
&lt;/div&gt;

@section Scripts {
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/sweetalert2@11&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        const token = &#39;@Antiforgery.GetTokens(HttpContext).RequestToken&#39;;

        // 親変更時に子をロード
        document.getElementById(&quot;PaymentTypeId&quot;).addEventListener(&quot;change&quot;, function () {
            let typeId = this.value;
            let methodSelect = document.getElementById(&quot;PaymentMethodId&quot;);
            methodSelect.innerHTML = &#39;&lt;option value=&quot;&quot;&gt;-- 選択 --&lt;/option&gt;&#39;;

            if (!typeId) return;

            fetch(`@Url.Action(&quot;GetPaymentMethodsByTypeId&quot;)?typeId=${typeId}`)
                .then(res =&gt; res.json())
                .then(data =&gt; {
                    data.forEach(m =&gt; {
                        methodSelect.add(new Option(m.name, m.id));
                    });
                });
        });

        // PaymentType 追加
        document.getElementById(&quot;btnAddPaymentType&quot;).addEventListener(&quot;click&quot;, function () {
            Swal.fire({
                title: &#39;新しい支払タイプ&#39;,
                input: &#39;text&#39;,
                inputPlaceholder: &#39;タイプ名を入力&#39;,
                inputValidator: value =&gt; !value &amp;&amp; &#39;必須項目です&#39;,
                showCancelButton: true,
                confirmButtonText: &#39;追加&#39;
            }).then((result) =&gt; {
                if (result.isConfirmed) {
                    Swal.showLoading();
                    fetch(&#39;@Url.Action(&quot;AddPaymentType&quot;)&#39;, {
                        method: &#39;POST&#39;,
                        headers: {
                            &#39;Content-Type&#39;: &#39;application/json&#39;,
                            &#39;RequestVerificationToken&#39;: token
                        },
                        body: JSON.stringify({ name: result.value })
                    })
                    .then(res =&gt; {
                        if (res.status === 409) throw new Error(&quot;既に存在します&quot;);
                        return res.json();
                    })
                    .then(data =&gt; {
                        let select = document.getElementById(&quot;PaymentTypeId&quot;);
                        if (![...select.options].some(o =&gt; o.value == data.id)) {
                            select.add(new Option(data.name, data.id, true, true));
                        }
                        Swal.fire(&#39;追加しました&#39;, &#39;&#39;, &#39;success&#39;);
                    })
                    .catch(err =&gt; Swal.fire(&#39;エラー&#39;, err.message, &#39;error&#39;));
                }
            });
        });

        // PaymentMethod 追加
        document.getElementById(&quot;btnAddPaymentMethod&quot;).addEventListener(&quot;click&quot;, function () {
            let paymentTypeId = document.getElementById(&quot;PaymentTypeId&quot;).value;
            if (!paymentTypeId) {
                Swal.fire(&#39;先に支払タイプを選択してください&#39;, &#39;&#39;, &#39;warning&#39;);
                return;
            }

            Swal.fire({
                title: &#39;新しい支払方法&#39;,
                input: &#39;text&#39;,
                inputPlaceholder: &#39;</code></pre><p data-f-id="pbf" style="text-align: center; font-size: 14px; margin-top: 30px; opacity: 0.65; font-family: sans-serif;">Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a></p>

添付画像

画像を変更

Back to List

//検索文：Editor内でHTMLコードをコピーさせる