記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p data-bm="29" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" data-pasted="true">わかりました。<br>あなたのケースでは、ASP.NET Core MVC の <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> に「＋項目を追加」を入れておき、選択されたら <strong style="font-weight: 700;">SweetAlert2</strong> のモーダルフォームを表示 &rarr; AJAX で新しい項目を追加 &rarr; 成功後に <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> のリストを再読み込みする、という流れになります。</p><p data-bm="30" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">以下に&nbsp;<strong style="font-weight: 700;">完全な実装例</strong> を示します。<br>ポイントは以下です：</p><ol data-bm="31" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">Controller</strong> に新規項目追加用の <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">AddSubjectName</code> アクションを作る（AJAX用）。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">SweetAlert2</strong> モーダル内でフォームを作り、画像ファイルも送信できるように <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">FormData</code> を使う。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">成功後に再度 <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">SubjectNameId</code> のリストを取得して <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> を更新する（ページ遷移なし）。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;">画像は <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">wwwroot/Images</code> に保存し、DB にも登録。</li></ol><h2 data-bm="32" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">1. View（Create.cshtml）</h2><pre data-priority="2" data-bm="33" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div data-bm="42" style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(243, 249, 254);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; font-size: 16px; display: inline-block; color: rgb(11, 73, 127);">Cshtml</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px roboto, helvetica, sans-serif; background-color: rgb(225, 240, 253); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;">@model YourNamespace.Models.Payment

&lt;form asp-action=&quot;Create&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label asp-for=&quot;SubjectNameId&quot;&gt;&lt;/label&gt;
        &lt;select asp-for=&quot;SubjectNameId&quot; class=&quot;form-control&quot;
                asp-items=&quot;@(ViewData[&quot;SubjectNameId&quot;] as SelectList)&quot;
                id=&quot;SubjectNameId&quot;&gt;
        &lt;/select&gt;
    &lt;/div&gt;

    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;登録&lt;/button&gt;
&lt;/form&gt;

@section Scripts {
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/sweetalert2@11&quot;&gt;&lt;/script&gt;
    &lt;script&gt;
        document.getElementById(&#39;SubjectNameId&#39;).addEventListener(&#39;change&#39;, function () {
            if (this.value === &#39;add&#39;) { // 「＋項目を追加」が選択された場合
                Swal.fire({
                    title: &#39;新しい科目を追加&#39;,
                    html: `
                        &lt;input id=&quot;courseName&quot; class=&quot;swal2-input&quot; placeholder=&quot;科目名&quot;&gt;
                        &lt;input type=&quot;file&quot; id=&quot;imageFile&quot; class=&quot;swal2-file&quot;&gt;
                    `,
                    focusConfirm: false,
                    showCancelButton: true,
                    confirmButtonText: &#39;追加&#39;,
                    preConfirm: () =&gt; {
                        const courseName = document.getElementById(&#39;courseName&#39;).value;
                        const imageFile = document.getElementById(&#39;imageFile&#39;).files[0];

                        if (!courseName) {
                            Swal.showValidationMessage(&#39;科目名を入力してください&#39;);
                            return false;
                        }

                        const formData = new FormData();
                        formData.append(&#39;CourseName&#39;, courseName);
                        if (imageFile) formData.append(&#39;ImageFile&#39;, imageFile);

                        return fetch(&#39;/SubjectNames/AddSubjectName&#39;, {
                            method: &#39;POST&#39;,
                            body: formData
                        })
                        .then(response =&gt; {
                            if (!response.ok) throw new Error(response.statusText);
                            return response.json();
                        })
                        .catch(error =&gt; {
                            Swal.showValidationMessage(`リクエスト失敗: ${error}`);
                        });
                    }
                }).then((result) =&gt; {
                    if (result.isConfirmed) {
                        Swal.fire(&#39;追加成功&#39;, &#39;&#39;, &#39;success&#39;);
                        reloadSubjectList(result.value.id);
                    }
                });
            }
        });

        function reloadSubjectList(selectedId) {
            fetch(&#39;/SubjectNames/GetSubjectList&#39;)
                .then(res =&gt; res.json())
                .then(data =&gt; {
                    const select = document.getElementById(&#39;SubjectNameId&#39;);
                    select.innerHTML = &#39;&#39;;
                    data.forEach(item =&gt; {
                        const opt = document.createElement(&#39;option&#39;);
                        opt.value = item.subjectNameId;
                        opt.textContent = item.courseName;
                        select.appendChild(opt);
                    });
                    // 「＋項目を追加」も再追加
                    const addOpt = document.createElement(&#39;option&#39;);
                    addOpt.value = &#39;add&#39;;
                    addOpt.textContent = &#39;＋項目を追加&#39;;
                    select.appendChild(addOpt);

                    // 新しく追加した項目を選択状態に
                    select.value = selectedId;
                });
        }
    &lt;/script&gt;
}
</code></pre><h2 data-bm="34" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">2. Controller（SubjectNamesController）</h2><pre data-priority="2" data-bm="35" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div data-bm="43" style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(243, 249, 254);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; font-size: 16px; display: inline-block; color: rgb(11, 73, 127);">Csharp</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px roboto, helvetica, sans-serif; background-color: rgb(225, 240, 253); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;"><span style="color: rgb(215, 58, 73);">using</span> Microsoft.AspNetCore.Mvc;
<span style="color: rgb(215, 58, 73);">using</span> Microsoft.AspNetCore.Http;
<span style="color: rgb(215, 58, 73);">using</span> Microsoft.EntityFrameworkCore;
<span style="color: rgb(215, 58, 73);">using</span> YourNamespace.Data;
<span style="color: rgb(215, 58, 73);">using</span> YourNamespace.Models;
<span style="color: rgb(215, 58, 73);">using</span> System.IO;
<span style="color: rgb(215, 58, 73);">using</span> System.Threading.Tasks;

<span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(215, 58, 73);">class</span> <span style="color: rgb(111, 66, 193);">SubjectNamesController</span> : <span style="color: rgb(111, 66, 193);">Controller</span>
{
    <span style="color: rgb(215, 58, 73);">private</span> <span style="color: rgb(215, 58, 73);">readonly</span> ApplicationDbContext _context;
    <span style="color: rgb(215, 58, 73);">private</span> <span style="color: rgb(215, 58, 73);">readonly</span> IWebHostEnvironment _env;

    <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(111, 66, 193);">SubjectNamesController</span>(ApplicationDbContext context, IWebHostEnvironment env)
    {
        _context = context;
        _env = env;
    }

    [<span style="color: rgb(0, 92, 197);">HttpPost</span>]
    <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(215, 58, 73);">async</span> Task&lt;IActionResult&gt; <span style="color: rgb(111, 66, 193);">AddSubjectName</span>([FromForm] <span style="color: rgb(227, 98, 9);">string</span> CourseName, [FromForm] IFormFile ImageFile)
    {
        <span style="color: rgb(215, 58, 73);">if</span> (<span style="color: rgb(227, 98, 9);">string</span>.IsNullOrWhiteSpace(CourseName))
            <span style="color: rgb(215, 58, 73);">return</span> BadRequest(<span style="color: rgb(3, 47, 98);">&quot;CourseName is required&quot;</span>);

        <span style="color: rgb(227, 98, 9);">string</span> imagePath = <span style="color: rgb(0, 92, 197);">null</span>;
        <span style="color: rgb(215, 58, 73);">if</span> (ImageFile != <span style="color: rgb(0, 92, 197);">null</span> &amp;&amp; ImageFile.Length &gt; <span style="color: rgb(0, 92, 197);">0</span>)
        {
            <span style="color: rgb(215, 58, 73);">var</span> fileName = Path.GetFileName(ImageFile.FileName);
            <span style="color: rgb(215, 58, 73);">var</span> savePath = Path.Combine(_env.WebRootPath, <span style="color: rgb(3, 47, 98);">&quot;Images&quot;</span>, fileName);

            <span style="color: rgb(215, 58, 73);">using</span> (<span style="color: rgb(215, 58, 73);">var</span> stream = <span style="color: rgb(215, 58, 73);">new</span> FileStream(savePath, FileMode.Create))
            {
                <span style="color: rgb(215, 58, 73);">await</span> ImageFile.CopyToAsync(stream);
            }
            imagePath = <span style="color: rgb(3, 47, 98);">&quot;/Images/&quot;</span> + fileName;
        }

        <span style="color: rgb(215, 58, 73);">var</span> subject = <span style="color: rgb(215, 58, 73);">new</span> SubjectName
        {
            CourseName = CourseName,
            ImageUrl = imagePath
        };

        _context.SubjectNames.Add(subject);
        <span style="color: rgb(215, 58, 73);">await</span> _context.SaveChangesAsync();

        <span style="color: rgb(215, 58, 73);">return</span> Json(<span style="color: rgb(215, 58, 73);">new</span> { id = subject.SubjectNameId });
    }

    [<span style="color: rgb(0, 92, 197);">HttpGet</span>]
    <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(215, 58, 73);">async</span> Task&lt;IActionResult&gt; <span style="color: rgb(111, 66, 193);">GetSubjectList</span>()
    {
        <span style="color: rgb(215, 58, 73);">var</span> list = <span style="color: rgb(215, 58, 73);">await</span> _context.SubjectNames
            .Select(s =&gt; <span style="color: rgb(215, 58, 73);">new</span> { subjectNameId = s.SubjectNameId, courseName = s.CourseName })
            .ToListAsync();

        <span style="color: rgb(215, 58, 73);">return</span> Json(list);
    }
}
</code></pre><h2 data-bm="36" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">3. Createアクション（PaymentController）</h2><pre data-priority="2" data-bm="37" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><div data-bm="44" style="display: flex; height: 28px; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(243, 249, 254);"><h5 style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 0px; padding: revert; font-style: normal !important; font-variant: normal !important; font-weight: 400 !important; font-stretch: 100% !important; line-height: 18px; font-family: roboto, helvetica, sans-serif !important; font-optical-sizing: auto !important; font-size-adjust: none !important; font-kerning: auto !important; font-feature-settings: normal !important; font-variation-settings: normal !important; font-language-override: normal !important; font-size: 16px; display: inline-block; color: rgb(11, 73, 127);">Csharp</h5><div style="height: 28px;"><button type="button" tabindex="" title="Copy code" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 400 13px / 20px roboto, helvetica, sans-serif; background-color: rgb(225, 240, 253); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(0, 0, 0) !important; text-decoration: none !important; border-radius: 9999px; block-size: 28px; gap: 2px; padding-inline: 10px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: clip; max-block-size: calc(1lh); padding-inline: 2px;">Copy code</div></button></div></div><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 16px 16px;"><span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">Create</span>()
{
    <span style="color: rgb(215, 58, 73);">var</span> subjects = _context.SubjectNames.ToList();
    subjects.Add(<span style="color: rgb(215, 58, 73);">new</span> SubjectName { SubjectNameId = <span style="color: rgb(0, 92, 197);">0</span>, CourseName = <span style="color: rgb(3, 47, 98);">&quot;＋項目を追加&quot;</span> });

    ViewData[<span style="color: rgb(3, 47, 98);">&quot;SubjectNameId&quot;</span>] = <span style="color: rgb(215, 58, 73);">new</span> SelectList(subjects, <span style="color: rgb(3, 47, 98);">&quot;SubjectNameId&quot;</span>, <span style="color: rgb(3, 47, 98);">&quot;CourseName&quot;</span>);
    <span style="color: rgb(215, 58, 73);">return</span> View();
}
</code></pre><h2 data-bm="38" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; font: 22px / 24px roboto, helvetica, sans-serif; height: 32px; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; color: rgba(0, 0, 0, 0.8); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">実装の流れ</h2><ol data-bm="39" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: revert; padding: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">初期表示</strong><br><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> に既存科目 + 「＋項目を追加」を表示。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">「＋項目を追加」選択時</strong><br>SweetAlert2 モーダルフォームを表示。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">AJAX送信</strong><br><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">AddSubjectName</code> に <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">FormData</code> で送信（画像含む）。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">成功後</strong><br><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">GetSubjectList</code> で最新リストを取得し <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> を更新。</li><li style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin-top: revert; margin-right: revert; margin-bottom: 8px; margin-left: revert; padding: revert;"><strong style="font-weight: 700;">ページ遷移なし</strong><br>新しい項目が即座に選択状態になる。</li></ol><p data-bm="40" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">💡 この方法なら、ページ遷移せずに項目追加が可能で、画像もアップロードできます。<br>もし希望があれば、<strong style="font-weight: 700;">SweetAlert2 のモーダル内にプレビュー表示</strong>や<strong style="font-weight: 700;">バリデーション強化</strong>も追加できます。</p><p data-bm="41" style="border: 0px; border-collapse: collapse; border-spacing: 0px; list-style-position: initial; list-style-image: initial; list-style-type: revert; margin: 4px; padding: revert; -webkit-line-clamp: revert; color: rgba(0, 0, 0, 0.8); font-family: roboto, helvetica, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">次に、必要ならこのコードを <strong style="font-weight: 700;">部分ビュー化して再利用</strong> できる形に</p><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コードをコピーさせる