記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<div style="flex: 1 1 0%; display: flex; overflow: hidden; flex-direction: column; height: 368px; box-sizing: border-box; padding: 20px 20px 0px; color: rgb(0, 0, 0); font-family: roboto, helvetica, sans-serif; font-size: 14px; 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"><div style="display: flex; flex: 1 1 0%; position: relative; min-width: 0px; height: 256px; flex-direction: column;"><div tabindex="0" style="color: rgba(0, 0, 0, 0.8); padding: 0px; flex: 1 1 0%; font-size: 16px; line-height: 26px; font-weight: 400; overflow: auto; max-height: 420px;"><p data-bm="27" 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;">なるほど、やりたいことは以下の流れですね。</p><ol data-bm="28" 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;"><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;">Create.cshtml</strong> にアクセスした時点で、<br>DB の&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Payments</code> テーブルに&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">SubjectNameId = 14</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;">存在しない場合、SweetAlert2 のモーダルを表示して<br>「繰越金額を入力してください」＋ Yes/No ボタンを出す。</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;">Yes を押したら&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select asp-for=&quot;SubjectNameId&quot;&gt;</code> に&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">14</code> をセットし、<br><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;input asp-for=&quot;Amount&quot;&gt;</code> に金額を入力できるようにする。</li></ol><h2 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: 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;">実装例</h2><h3 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: revert; padding: revert; display: inline-block; font: 400 20px / 22px roboto, helvetica, sans-serif;">1. Controller 側でフラグを渡す</h3><pre data-priority="2" data-bm="31" 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;"><div data-bm="40" 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(248, 244, 241);"><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(60, 81, 180);">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(217, 223, 251); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !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(106, 115, 125);">// PaymentsController.cs</span>
<span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">Create</span>()
{
    <span style="color: rgb(106, 115, 125);">// DBにSubjectNameId=14が存在するかチェック</span>
    <span style="color: rgb(227, 98, 9);">bool</span> needsCarryOver = !_context.Payments.Any(p =&gt; p.SubjectNameId == <span style="color: rgb(0, 92, 197);">14</span>);

    ViewBag.NeedsCarryOver = needsCarryOver;

    <span style="color: rgb(106, 115, 125);">// ViewBag.SubjectNameId のSelectListをセット</span>
    ViewBag.SubjectNameId = <span style="color: rgb(215, 58, 73);">new</span> SelectList(_context.SubjectNames, <span style="color: rgb(3, 47, 98);">&quot;Id&quot;</span>, <span style="color: rgb(3, 47, 98);">&quot;Name&quot;</span>);

    <span style="color: rgb(215, 58, 73);">return</span> View();
}
</code></pre><h3 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; display: inline-block; font: 400 20px / 22px roboto, helvetica, sans-serif;">2. Create.cshtml 側</h3><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;"><div data-bm="41" 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(248, 244, 241);"><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(60, 81, 180);">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(217, 223, 251); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !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
@{
    ViewData[&quot;Title&quot;] = &quot;Create&quot;;
}

&lt;h2&gt;Create&lt;/h2&gt;

&lt;form asp-action=&quot;Create&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label asp-for=&quot;SubjectNameId&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
        &lt;select asp-for=&quot;SubjectNameId&quot; class=&quot;form-control&quot; asp-items=&quot;ViewBag.SubjectNameId&quot;&gt;&lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;label asp-for=&quot;Amount&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
        &lt;input asp-for=&quot;Amount&quot; class=&quot;form-control&quot; /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;input type=&quot;submit&quot; value=&quot;Create&quot; class=&quot;btn btn-primary&quot; /&gt;
    &lt;/div&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.addEventListener(&quot;DOMContentLoaded&quot;, function () {
            var needsCarryOver = @((ViewBag.NeedsCarryOver ?? false).ToString().ToLower());

            if (needsCarryOver) {
                Swal.fire({
                    title: &#39;&ldquo;繰越金額&rdquo;を入力して下さい&#39;,
                    icon: &#39;info&#39;,
                    showCancelButton: true,
                    confirmButtonText: &#39;Yes&#39;,
                    cancelButtonText: &#39;No&#39;
                }).then((result) =&gt; {
                    if (result.isConfirmed) {
                        // SubjectNameId を 14 にセット
                        document.querySelector(&#39;[name=&quot;SubjectNameId&quot;]&#39;).value = 14;
                        // Amount フィールドにフォーカス
                        document.querySelector(&#39;[name=&quot;Amount&quot;]&#39;).focus();
                    }
                });
            }
        });
    &lt;/script&gt;
}
</code></pre><h3 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; display: inline-block; font: 400 20px / 22px roboto, helvetica, sans-serif;">3. ポイント</h3><ul data-bm="35" 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;"><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;">DBチェックは必ずサーバー側で行う</strong><br>&rarr; クライアント側だけで判定すると改ざんされる可能性があるため。</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;">SweetAlert2 の&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">then</code> 内で&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> の値を&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">14</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);">&lt;input asp-for=&quot;Amount&quot;&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;">Yes を押さなかった場合は何も変更せず通常のフォーム状態。</li></ul><h3 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; display: inline-block; font: 400 20px / 22px roboto, helvetica, sans-serif;">4. 動作イメージ</h3><ul data-bm="37" 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;"><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);">Payments</code> に&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">SubjectNameId = 14</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;">Yes &rarr;&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;select&gt;</code> が自動的に「14」に切り替わり、金額入力欄にカーソルが移動。</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;">No &rarr; 何もせず通常の入力。</li></ul><p 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: 4px; padding: revert; -webkit-line-clamp: revert;">もし希望があれば、この SweetAlert2 のモーダルで&nbsp;<strong style="font-weight: 700;">金額入力欄も直接モーダル内に表示して、そのままフォームに反映する</strong> バージョンも作れます。<br>そうするとページ遷移なしでモーダル内で金額を入力できます。</p><p 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: 4px; padding: revert; -webkit-line-clamp: revert;">このままページ内で入力させる方法と、モーダル内で直接入力させる方法、どちらで進めますか？<br>後者だとユーザー体験がよりスムーズになります。</p></div></div></div><div style="color: rgba(0, 0, 0, 0.6); border-top: 0px; margin: 0px 20px; padding: 0px 0px 20px; height: 36px; display: flex; align-items: center; position: relative; font-family: roboto, helvetica, sans-serif; font-size: 14px; 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;"><div style="flex: 1 1 0%; display: flex; gap: 8px; align-items: center;"><button type="button" tabindex="-1" title="Undo" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 700 13px / 20px roboto, helvetica, sans-serif; background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: not-allowed; color: rgb(60, 81, 180) !important; text-decoration: none !important; opacity: 0.3; block-size: 38px; gap: 4px; padding-inline: 0px; aspect-ratio: 1 / 1; justify-content: center; border-radius: 8px;"><div data-visually-hidden="" 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); block-size: 1px; inline-size: 1px; border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); position: absolute; padding-inline: 4px;">Undo</div></button><button type="button" tabindex="-1" title="Redo" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 700 13px / 20px roboto, helvetica, sans-serif; background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: not-allowed; color: rgb(60, 81, 180) !important; text-decoration: none !important; opacity: 0.3; block-size: 38px; gap: 4px; padding-inline: 0px; aspect-ratio: 1 / 1; justify-content: center; border-radius: 8px;"><div data-visually-hidden="" 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); block-size: 1px; inline-size: 1px; border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); position: absolute; padding-inline: 4px;">Redo</div></button><button type="button" title="Copy" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 700 13px / 20px roboto, helvetica, sans-serif; background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; block-size: 38px; gap: 4px; padding-inline: 0px; aspect-ratio: 1 / 1; justify-content: center; border-radius: 8px;"><div data-visually-hidden="" 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); block-size: 1px; inline-size: 1px; border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); position: absolute; padding-inline: 4px;">Copy</div></button><button type="button" title="Export" style="box-sizing: border-box; margin: 0px; padding: 0px; font: 700 13px / 20px roboto, helvetica, sans-serif; background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0); display: grid; grid-auto-flow: column; align-items: center; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; block-size: 38px; gap: 4px; padding-inline: 0px; aspect-ratio: 1 / 1; justify-content: center; border-radius: 8px;"><div data-visually-hidden="" 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); block-size: 1px; inline-size: 1px; border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); position: absolute; padding-inline: 4px;">Export</div></button><div style="display: flex; z-index: 10; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; color: rgba(0, 0, 0, 0.6); width: 300px; min-height: 40px; max-height: 120px; position: absolute; box-sizing: border-box; bottom: 18px; border: 1px solid rgba(0, 0, 0, 0.1); background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 247, 247); left: 172px;"><br></div></div></div><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コードをコピーさせる