記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<h2 data-bm="15" 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;" data-pasted="true">モデル定義</h2><pre data-priority="2" data-bm="16" 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="21" 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;">// 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><h2 data-bm="17" 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. コントローラー（AJAX 用 API エンドポイント付き）</h2><pre data-priority="2" data-bm="18" 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="22" 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;">// 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;
 }

 // Create GET
 public IActionResult Create()
 {
 ViewData[&quot;PaymentTypeId&quot;] = new SelectList(_context.PaymentTypes, &quot;Id&quot;, &quot;Name&quot;);
 ViewData[&quot;PaymentMethodId&quot;] = new SelectList(_context.PaymentMethods, &quot;Id&quot;, &quot;Name&quot;);
 return View();
 }

 // Create POST
 [HttpPost]
 [ValidateAntiForgeryToken]
 public async Task&lt;IActionResult&gt; Create(Payment payment)
 {
 if (ModelState.IsValid)
 {
 _context.Add(payment);
 await _context.SaveChangesAsync();
 return RedirectToAction(nameof(Index));
 }
 ViewData[&quot;PaymentTypeId&quot;] = new SelectList(_context.PaymentTypes, &quot;Id&quot;, &quot;Name&quot;, payment.PaymentTypeId);
 ViewData[&quot;PaymentMethodId&quot;] = new SelectList(_context.PaymentMethods, &quot;Id&quot;, &quot;Name&quot;, payment.PaymentMethodId);
 return View(payment);
 }

 // AJAX: 親追加
 [HttpPost]
 public async Task&lt;IActionResult&gt; AddPaymentType([FromBody] PaymentType model)
 {
 if (string.IsNullOrWhiteSpace(model.Name))
 return BadRequest(&quot;Name is required&quot;);

 _context.PaymentTypes.Add(model);
 await _context.SaveChangesAsync();

 return Json(new { id = model.Id, name = model.Name });
 }

 // AJAX: 子追加
 [HttpPost]
 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;);

 _context.PaymentMethods.Add(model);
 await _context.SaveChangesAsync();

 return Json(new { id = model.Id, name = model.Name });
 }
}
</code></pre><h2 data-bm="19" 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 ビュー（SweetAlert2 + AJAX）</h2><pre data-priority="2" data-bm="20" 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="23" 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 Payment

@{
 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;/select&gt;
 &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot; id=&quot;btnAddPaymentType&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;div class=&quot;input-group&quot;&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;/select&gt;
 &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot; id=&quot;btnAddPaymentMethod&quot;&gt;＋&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;Save&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(&quot;btnAddPaymentType&quot;).addEventListener(&quot;click&quot;, function () {
 Swal.fire({
 title: &#39;新しい支払タイプ&#39;,
 input: &#39;text&#39;,
 inputPlaceholder: &#39;タイプ名を入力&#39;,
 showCancelButton: true,
 confirmButtonText: &#39;追加&#39;,
 preConfirm: (name) =&gt; {
 if (!name) {
 Swal.showValidationMessage(&#39;名前を入力してください&#39;);
 return false;
 }
 return fetch(&#39;@Url.Action(&quot;AddPaymentType&quot;)&#39;, {
 method: &#39;POST&#39;,
 headers: { &#39;Content-Type&#39;: &#39;application/json&#39; },
 body: JSON.stringify({ name: name })
 })
 .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 &amp;&amp; result.value) {
 const select = document.querySelector(&#39;[name=&quot;PaymentTypeId&quot;]&#39;);
 const option = new Option(result.value.name, result.value.id, true, true);
 select.add(option);
 Swal.fire(&#39;追加しました&#39;, &#39;&#39;, &#39;success&#39;);
 }
 });
 });

 // 子追加
 document.getElementById(&quot;btnAddPaymentMethod&quot;).addEventListener(&quot;click&quot;, function () {
 const paymentTypeId = document.querySelector(&#39;[name=&quot;PaymentTypeId&quot;]&#39;).value;
 if (!paymentTypeId) {
 Swal.fire(&#39;先に支払タイプを選択してください&#39;, &#39;&#39;, &#39;warning&#39;);
 return;
 }

 Swal.fire({
 title: &#39;新しい支払方法&#39;,
 input: &#39;text&#39;,
 inputPlaceholder: &#39;方法名を入力&#39;,
 showCancelButton: true,
 confirmButtonText: &#39;追加&#39;,
 preConfirm: (name) =&gt; {
 if (!name) {
 Swal.showValidationMessage(&#39;名前を入力してください&#39;);
 return false;
 }
 return fetch(&#39;@Url.Action(&quot;AddPaymentMethod&quot;)&#39;, {
 method: &#39;POST&#39;,
 headers: { &#39;Content-Type&#39;: &#39;application/json&#39; },
 body: JSON.stringify({ name: name, paymentTypeId: parseInt(paymentTypeId) })
 })
 .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 &amp;&amp; result.value) {
 const select = document.querySelector(&#39;[name=&quot;PaymentMethodId&quot;]&#39;);
 const option = new Option(result.value.name, result.value.id, true, true);
 select.add(option);
                    Swal.fire(&#39;追加しました&#39;, &#39;&#39;, &#39;success</code></pre>Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a>

添付画像

画像を変更

Back to List

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