記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<p data-bm="11" 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">なるほど、やりたいことはこうですね。<ol data-bm="12" 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;">Paymentテーブルの中で <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Amount</code> が <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">0</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><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 data-bm="13" 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;jQuery + SweetAlert2 を使ったサンプルコードです。 （ASP.NET Core MVC 側では、<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">/Payment/UpdateAmount</code> のような POST アクションを用意しておく必要があります）<p data-bm="14" 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;">例: jQueryコード（Index.cshtml内）<pre data-priority="2" data-bm="15" 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(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);">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(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>


</pre><pre style="font-family:'ＭＳ ゴシック';font-size:9pt;color:#000000;" data-pasted="true"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);" data-pasted="true">.payment-row</code> に <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;tr&gt;</code> や <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;div&gt;</code> に <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">data-payment-id</code> と <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">data-amount</code> を持たせておく
@foreach (var item in Model) {

 &lt;tr class=&quot;payment-row&quot; data-amount=&quot;@item.Amount&quot; data-payment-id=&quot;@item.PaymentId&quot; &gt;

 &lt;td&gt;@item.PaymentId&lt;/td&gt;

 &lt;td&gt;@item.Posted.ToShortDateString()&lt;/td&gt;

 &lt;td&gt;@(item.InOut ? &quot;入金&quot; : &quot;出金&quot;)&lt;/td&gt;

 &lt;td&gt;@item.SubjectNameNavigation?.CourseName&lt;/td&gt;

 &lt;td&gt;@item.ItemName&lt;/td&gt;

 &lt;td&gt;@item.PaymentName&lt;/td&gt;

 &lt;td&gt;@item.PaymentTypeNavigation?.TypeName&lt;/td&gt;

 &lt;td&gt;@item.PaymentMethodNavigation?.MethodName&lt;/td&gt;

 &lt;td&gt;@item.IncomeCategoryNavigation?.CategoryName&lt;/td&gt;

 &lt;td&gt;@item.IncomeTypeNavigation?.TypeName&lt;/td&gt;

 &lt;td class=&quot;text-center&quot;&gt; @item.Amount&lt;/td&gt;

 &lt;td class=&quot;text-center&quot; style=&quot;color:gray;&quot;&gt;

 @String.Format(System.Globalization.CultureInfo.CurrentCulture, &quot;{0:C}&quot;, @item.Balance) 

 &lt;/td&gt; 

 &lt;td&gt; 

 &lt;a asp-action=&quot;Edit&quot; asp-route-id=&quot;@item.PaymentId&quot;&gt;編集&lt;/a&gt; |

 &lt;a asp-action=&quot;Details&quot; asp-route-id=&quot;@item.PaymentId&quot;&gt;詳細&lt;/a&gt; |

 &lt;a asp-action=&quot;Delete&quot; asp-route-id=&quot;@item.PaymentId&quot;&gt;削除&lt;/a&gt;

 &lt;/td&gt;

 &lt;/tr&gt;</pre><pre data-priority="2" data-bm="15" 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;">
<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;script&gt;
$(document).ready(function () {
 // Amountが0の行を探す
 $(&quot;.payment-row&quot;).each(function () {
 var amount = $(this).data(&quot;amount&quot;);
 var paymentId = $(this).data(&quot;payment-id&quot;);

 if (amount === 0) {
 Swal.fire({
 title: &#39;金額を入力してください&#39;,
 html: &#39;&lt;input id=&quot;swalAmount&quot; type=&quot;number&quot; class=&quot;form-control&quot; placeholder=&quot;金額を入力&quot;&gt;&#39;,
 showCancelButton: true,
 confirmButtonText: &#39;更新&#39;,
 cancelButtonText: &#39;キャンセル&#39;,
 preConfirm: () =&gt; {
 const value = document.getElementById(&#39;swalAmount&#39;).value;
 if (!value || value &lt;= 0) {
 Swal.showValidationMessage(&#39;1以上の金額を入力してください&#39;);
 return false;
 }
 return value;
 }
 }).then((result) =&gt; {
 if (result.isConfirmed) {
 var newAmount = result.value;

 // Ajaxでサーバーに送信
 $.ajax({
 url: &#39;/Payment/UpdateAmount&#39;,
 type: &#39;POST&#39;,
 data: {
 paymentId: paymentId,
 amount: newAmount
 },
 success: function (res) {
 Swal.fire(&#39;更新完了&#39;, &#39;金額が更新されました&#39;, &#39;success&#39;)
 .then(() =&gt; location.reload());
 },
 error: function () {
 Swal.fire(&#39;エラー&#39;, &#39;更新に失敗しました&#39;, &#39;error&#39;);
 }
 });
 }
 });

 // 最初の0円行だけ処理する場合は break
 return false;
 }
 });
});
&lt;/script&gt;
</code></pre><p data-bm="16" 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;">ASP.NET Core MVC 側の例（Controller）<pre data-priority="2" data-bm="17" 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(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;">[HttpPost]
public IActionResult UpdateAmount(int paymentId, decimal amount)
{
 var payment = _context.Payments.FirstOrDefault(p =&gt; p.PaymentId == paymentId);
 if (payment == null) return NotFound();

 payment.Amount = amount;
 _context.SaveChanges();

 return Ok();
}
</code></pre><p data-bm="18" 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;">💡 ポイント<ul 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; 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);">.payment-row</code> は <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;tr&gt;</code> や <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">&lt;div&gt;</code> に <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">data-payment-id</code> と <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">data-amount</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 の <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">preConfirm</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);">location.reload()</code> で画面を再読み込みするか、該当行だけ書き換えることも可能です。</li></ul><p data-bm="20" 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;「最初の0円行だけ」ではなく「全ての0円行を順番に処理する」 形にもできますが、どうしますか？ そうすれば複数の未入力金額を一度に更新できます。Powered by <a href="https://www.froala.com/wysiwyg-editor?pb=1" title="Froala Editor">Froala Editor</a>

添付画像

画像を変更

Back to List

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