記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p data-bm="48" data-pasted="true">了解です。<br>では、前回の&nbsp;<strong>ASP.NET Core MVC の CreateView における親子連動 <code>&lt;select&gt;</code> 実装例</strong> を、構造やコードを少し改良したバージョンにして再生成します。<br>今回は <strong>より堅牢な入力検証</strong> と <strong>新規項目追加後の即時反映</strong> を意識した作りにします。</p><hr><h2 data-bm="49">1. モデル</h2><pre data-priority="2" data-bm="50"><div data-bm="57"><h5>Csharp</h5></div><code>public class PaymentType
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class PaymentMethod
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int PaymentTypeId { get; set; }
}

public class PaymentViewModel
{
    public int? PaymentTypeId { get; set; }
    public int? PaymentMethodId { get; set; }
}
</code></pre><hr><h2 data-bm="51">2. コントローラー</h2><pre data-priority="2" data-bm="52"><div data-bm="58"><h5>Csharp</h5></div><code>using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;

public class PaymentsController : Controller
{
    // 仮データ（実際はDBから取得）
    private static readonly List&lt;PaymentType&gt; paymentTypes = new()
    {
        new PaymentType { Id = 1, Name = &quot;Credit Card&quot; },
        new PaymentType { Id = 2, Name = &quot;Bank Transfer&quot; }
    };

    private static readonly List&lt;PaymentMethod&gt; paymentMethods = new()
    {
        new PaymentMethod { Id = 1, Name = &quot;Visa&quot;, PaymentTypeId = 1 },
        new PaymentMethod { Id = 2, Name = &quot;MasterCard&quot;, PaymentTypeId = 1 },
        new PaymentMethod { Id = 3, Name = &quot;Domestic Bank&quot;, PaymentTypeId = 2 },
        new PaymentMethod { Id = 4, Name = &quot;International Bank&quot;, PaymentTypeId = 2 }
    };

    [HttpGet]
    public IActionResult Create()
    {
        PopulatePaymentTypeSelect();
        ViewData[&quot;PaymentMethodId&quot;] = new SelectList(Enumerable.Empty&lt;SelectListItem&gt;());
        return View(new PaymentViewModel());
    }

    [HttpGet]
    public JsonResult GetPaymentMethods(int paymentTypeId)
    {
        var methods = paymentMethods
            .Where(m =&gt; m.PaymentTypeId == paymentTypeId)
            .Select(m =&gt; new { m.Id, m.Name })
            .ToList();

        return Json(methods);
    }

    [HttpPost]
    public IActionResult Create(PaymentViewModel model)
    {
        if (!ModelState.IsValid || model.PaymentTypeId == null || model.PaymentMethodId == null)
        {
            PopulatePaymentTypeSelect(model.PaymentTypeId);
            ViewData[&quot;PaymentMethodId&quot;] = new SelectList(
                paymentMethods.Where(m =&gt; m.PaymentTypeId == model.PaymentTypeId),
                &quot;Id&quot;, &quot;Name&quot;, model.PaymentMethodId
            );
            return View(model);
        }

        // 保存処理（省略）
        return RedirectToAction(&quot;Index&quot;);
    }

    // 新規PaymentType追加用API（例）
    [HttpPost]
    public JsonResult AddPaymentType(string name)
    {
        if (string.IsNullOrWhiteSpace(name))
            return Json(new { success = false, message = &quot;Name is required.&quot; });

        int newId = paymentTypes.Max(t =&gt; t.Id) + 1;
        paymentTypes.Add(new PaymentType { Id = newId, Name = name });

        return Json(new { success = true, id = newId, name });
    }

    private void PopulatePaymentTypeSelect(int? selectedId = null)
    {
        ViewData[&quot;PaymentTypeId&quot;] = new SelectList(paymentTypes, &quot;Id&quot;, &quot;Name&quot;, selectedId);
    }
}
</code></pre><hr><h2 data-bm="53">3. Create.cshtml</h2><pre data-priority="2" data-bm="54"><div data-bm="59"><h5>Razor</h5></div><code>@model PaymentViewModel
@{
    ViewData[&quot;Title&quot;] = &quot;Create Payment&quot;;
}

&lt;h2&gt;Create Payment&lt;/h2&gt;

&lt;form asp-action=&quot;Create&quot; method=&quot;post&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label asp-for=&quot;PaymentTypeId&quot;&gt;&lt;/label&gt;
        &lt;div class=&quot;input-group&quot;&gt;
            &lt;select asp-for=&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;-- Select Payment Type --&lt;/option&gt;
            &lt;/select&gt;
            &lt;button type=&quot;button&quot; id=&quot;btnAddType&quot; class=&quot;btn btn-outline-secondary&quot;&gt;+&lt;/button&gt;
        &lt;/div&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; class=&quot;form-control&quot;
                asp-items=&quot;@(ViewData[&quot;PaymentMethodId&quot;] as SelectList)&quot;&gt;
            &lt;option value=&quot;&quot;&gt;-- Select Payment Method --&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;

    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Save&lt;/button&gt;
&lt;/form&gt;

&lt;!-- モーダル（新規PaymentType追加用） --&gt;
&lt;div id=&quot;addTypeModal&quot; style=&quot;display:none;&quot;&gt;
    &lt;label&gt;New Payment Type Name:&lt;/label&gt;
    &lt;input type=&quot;text&quot; id=&quot;newTypeName&quot; class=&quot;form-control&quot; /&gt;
    &lt;button id=&quot;saveNewType&quot; class=&quot;btn btn-success mt-2&quot;&gt;Save&lt;/button&gt;
&lt;/div&gt;

@section Scripts {
    &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        $(function () {
            // 親変更時に子を更新
            $(&#39;#PaymentTypeId&#39;).change(function () {
                var typeId = $(this).val();
                var $methodSelect = $(&#39;#PaymentMethodId&#39;);

                $methodSelect.empty().append(&#39;&lt;option value=&quot;&quot;&gt;-- Loading --&lt;/option&gt;&#39;);

                if (typeId) {
                    $.getJSON(&#39;@Url.Action(&quot;GetPaymentMethods&quot;, &quot;Payments&quot;)&#39;, { paymentTypeId: typeId })
                        .done(function (data) {
                            $methodSelect.empty().append(&#39;&lt;option value=&quot;&quot;&gt;-- Select Payment Method --&lt;/option&gt;&#39;);
                            $.each(data, function (i, method) {
                                $methodSelect.append($(&#39;&lt;option&gt;&#39;, {
                                    value: method.id,
                                    text: method.name
                                }));
                            });
                        })
                        .fail(function () {
                            $methodSelect.empty().append(&#39;&lt;option value=&quot;&quot;&gt;-- Error --&lt;/option&gt;&#39;);
                        });
                } else {
                    $methodSelect.empty().append(&#39;&lt;option value=&quot;&quot;&gt;-- Select Payment Method --&lt;/option&gt;&#39;);
                }
            });

            // 新規PaymentType追加
            $(&#39;#btnAddType&#39;).click(function () {
                $(&#39;#addTypeModal&#39;).show();
            });

            $(&#39;#saveNewType&#39;).click(function () {
                var name = $(&#39;#newTypeName&#39;).val().trim();
                if (!name) {
                    alert(&#39;Name is required.&#39;);
                    return;
                }

                $.post(&#39;@Url.Action(&quot;AddPaymentType&quot;, &quot;Payments&quot;)&#39;, { name: name })
                    .done(function (res) {
                        if (res.success) {
                            $(&#39;#PaymentTypeId&#39;).append($(&#39;&lt;option&gt;&#39;, {
                                value: res.id,
                                text: res.name
                            })).val(res.id).trigger(&#39;change&#39;);
                            $(&#39;#addTypeModal&#39;).hide();
                            $(&#39;#newTypeName&#39;).val(&#39;&#39;);
                        } else {
                            alert(res.message || &#39;Error adding type.&#39;);
                        }
                    });
            });
        });
    &lt;/script&gt;
}
</code></pre><hr><h2 data-bm="55">改良点</h2><ol data-bm="56"><li><strong>新規PaymentType追加API</strong> を追加し、ページリロードなしで親 <code>&lt;select&gt;</code> に反映。</li><li>**入力</li></ol><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コードをコピーさせる