記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p 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">以下は、前回のコードをさらに改良した&nbsp;ASP.NET Core MVC + jQuery + SweetAlert2 実装例です。 今回の変更点は以下の通りです。<ul 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;">重複チェック機能を追加（既存カテゴリ名と同じ場合は保存しない）</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;ローディング表示を追加（保存中や一覧再取得中にユーザー操作を防止）</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;">コード構造を整理し、関数化で可読性向上</li></ul><pre data-priority="2" 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="77" 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);">Html</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;">&lt;!-- CreateView の一部 --&gt;
&lt;select asp-for=&quot;IncomeCategoryId&quot;
 class=&quot;form-control&quot;
 id=&quot;IncomeCategoryId&quot;
 asp-items=&quot;@(ViewData[&quot;IncomeCategoryId&quot;] as SelectList)&quot;&gt;
 &lt;option value=&quot;add&quot;&gt;+ 項目を追加&lt;/option&gt;
&lt;/select&gt;

&lt;!-- SweetAlert2 CDN --&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/sweetalert2@11&quot;&gt;&lt;/script&gt;
&lt;!-- jQuery CDN --&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
$(function () {
 const $select = $(&quot;#IncomeCategoryId&quot;);

 $select.on(&quot;change&quot;, function () {
 if ($(this).val() === &quot;add&quot;) {
 openAddCategoryDialog();
 }
 });

 function openAddCategoryDialog() {
 Swal.fire({
 title: &#39;新しい項目を追加&#39;,
 text: &#39;追加するカテゴリ名を入力してください&#39;,
 input: &#39;text&#39;,
 inputPlaceholder: &#39;例: 家賃, 光熱費&#39;,
 icon: &#39;question&#39;,
 showCancelButton: true,
 confirmButtonText: &#39;保存&#39;,
 cancelButtonText: &#39;キャンセル&#39;,
 inputAttributes: { autofocus: &#39;autofocus&#39; },
 inputValidator: (value) =&gt; {
 if (!value || !value.trim()) {
 return &#39;カテゴリ名は必須です&#39;;
 }
 }
 }).then((result) =&gt; {
 if (result.isConfirmed) {
 let newCategoryName = result.value.trim();
 checkDuplicateAndSave(newCategoryName);
 } else {
 $select.val(&quot;&quot;);
 }
 });
 }

 function checkDuplicateAndSave(name) {
 Swal.showLoading();
 $.getJSON(&#39;/IncomeCategory/Exists&#39;, { name: name }, function (exists) {
 if (exists) {
 Swal.fire(&#39;重複エラー&#39;, &#39;同じカテゴリ名が既に存在します&#39;, &#39;warning&#39;);
 $select.val(&quot;&quot;);
 } else {
 saveCategory(name);
 }
 }).fail(function () {
 Swal.fire(&#39;通信エラー&#39;, &#39;重複チェックに失敗しました&#39;, &#39;error&#39;);
 $select.val(&quot;&quot;);
 });
 }

 function saveCategory(name) {
 Swal.showLoading();
 $.ajax({
 url: &#39;/IncomeCategory/CreateAjax&#39;,
 type: &#39;POST&#39;,
 data: { name: name },
 success: function (response) {
 if (response.success) {
 refreshCategoryList(response.id);
 Swal.fire(&#39;保存しました&#39;, &#39;&#39;, &#39;success&#39;);
 } else {
 Swal.fire(&#39;エラー&#39;, response.message || &#39;保存に失敗しました&#39;, &#39;error&#39;);
 $select.val(&quot;&quot;);
 }
 },
 error: function (xhr) {
 Swal.fire(&#39;通信エラー&#39;, `ステータス: ${xhr.status}`, &#39;error&#39;);
 $select.val(&quot;&quot;);
 }
 });
 }

 function refreshCategoryList(selectedId) {
 Swal.showLoading();
 $.getJSON(&#39;/IncomeCategory/GetAll&#39;, function (data) {
 $select.empty();
 $.each(data, function (i, item) {
 $select.append($(&quot;&lt;option&gt;&quot;, {
 value: item.id,
 text: item.name
 }));
 });
 $select.append($(&quot;&lt;option&gt;&quot;, { value: &quot;add&quot;, text: &quot;+ 項目を追加&quot; }));
 if (selectedId) {
 $select.val(selectedId);
 }
 }).fail(function () {
 Swal.fire(&#39;通信エラー&#39;, &#39;カテゴリ一覧の取得に失敗しました&#39;, &#39;error&#39;);
 });
 }
});
&lt;/script&gt;
</code></pre><h3 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; 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;">サーバー側（ASP.NET Core MVC）例</h3><pre data-priority="2" 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="78" 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;">[HttpGet]
public IActionResult Exists(string name)
{
 bool exists = _context.IncomeCategories
 .Any(c =&gt; c.Name.Trim() == name.Trim());
 return Json(exists);
}

[HttpPost]
public IActionResult CreateAjax(string name)
{
 if (string.IsNullOrWhiteSpace(name))
 {
 return Json(new { success = false, message = &quot;カテゴリ名は必須です。&quot; });
 }

 var category = new IncomeCategory { Name = name.Trim() };
 _context.IncomeCategories.Add(category);
 _context.SaveChanges();

 return Json(new { success = true, id = category.Id, name = category.Name });
}

[HttpGet]
public IActionResult GetAll()
{
 var list = _context.IncomeCategories
 .Select(c =&gt; new { id = c.Id, name = c.Name })
 .ToList();

 return Json(list);
}
</code></pre><h3 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; 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;">改良ポイント</h3><ol 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;">重複チェック (<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">/IncomeCategory/Exists</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 のローディング表示で保存中や取得中の操作を防止。</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;">関数分割で可読性・保守性を向上。</li></ol><p 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;">この形なら、 「+ 項目を追加」&rarr; モーダル入力 &rarr; 重複チェック &rarr; 保存 &rarr; 最新一覧反映 という流れが安全かつ安定して動作します。<p 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;カテゴリ名の部分一致検索付きオートコンプリート に拡張して、入力時に候補を表示することも可能です。 そうすれば既存カテゴリの再利用がさらに簡単になります。<p 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;">このオートコンプリート版も作りますか？Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a>

添付画像

画像を変更

Back to List

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