SkyoceanHome
Home
Privacy
ダウンロード
SkyShop
Updated Information
チュートリアルコード集
References
記事編集
日付
ジャンルのカテゴリ―名
名前を選択して下さい。
Contexts
Controllers
Databases
Htmls
JavaScripts
Models
MVCTutorials
Others
Styles
Views
タイトル
内容の要旨
<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 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>では、先ほどの <strong style="font-weight: 700;">ASP.NET Core MVC の Create ビューで親 <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><select></code> と子 <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><select></code> に新規項目を追加し、その場で DB 保存する</strong> 実装例を、<br>より実用的に改良したバージョンを提示します。</p><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;">今回は <strong style="font-weight: 700;">Bootstrap モーダルフォーム</strong> を使って入力する形に変更し、<br>バリデーションや UX を改善しています。</p><h2 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;">1. モデル例（変更なし）</h2><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;"><div data-bm="62" 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(215, 58, 73);">public</span> <span style="color: rgb(215, 58, 73);">class</span> <span style="color: rgb(111, 66, 193);">PaymentType</span> { <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">int</span> Id { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; } <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">string</span> Name { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; } } <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);">PaymentMethod</span> { <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">int</span> Id { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; } <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">string</span> Name { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; } <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">int</span> PaymentTypeId { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; } } </code></pre><h2 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;">2. コントローラー例（CSRF 対策付き）</h2><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;"><div data-bm="63" 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(215, 58, 73);">using</span> Microsoft.AspNetCore.Mvc; <span style="color: rgb(215, 58, 73);">using</span> Microsoft.AspNetCore.Mvc.Rendering; <span style="color: rgb(215, 58, 73);">using</span> YourApp.Data; <span style="color: rgb(215, 58, 73);">using</span> YourApp.Models; <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);">PaymentsController</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);">public</span> <span style="color: rgb(111, 66, 193);">PaymentsController</span>(ApplicationDbContext context) { _context = context; } <span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">Create</span>() { ViewData[<span style="color: rgb(3, 47, 98);">"PaymentTypeId"</span>] = <span style="color: rgb(215, 58, 73);">new</span> SelectList(_context.PaymentTypes, <span style="color: rgb(3, 47, 98);">"Id"</span>, <span style="color: rgb(3, 47, 98);">"Name"</span>); ViewData[<span style="color: rgb(3, 47, 98);">"PaymentMethodId"</span>] = <span style="color: rgb(215, 58, 73);">new</span> SelectList(Enumerable.Empty<PaymentMethod>(), <span style="color: rgb(3, 47, 98);">"Id"</span>, <span style="color: rgb(3, 47, 98);">"Name"</span>); <span style="color: rgb(215, 58, 73);">return</span> View(); } [<span style="color: rgb(0, 92, 197);">HttpPost</span>] [<span style="color: rgb(0, 92, 197);">ValidateAntiForgeryToken</span>] <span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">AddPaymentType</span>(<span style="color: rgb(227, 98, 9);">string</span> name) { <span style="color: rgb(215, 58, 73);">if</span> (<span style="color: rgb(227, 98, 9);">string</span>.IsNullOrWhiteSpace(name)) <span style="color: rgb(215, 58, 73);">return</span> BadRequest(<span style="color: rgb(3, 47, 98);">"Name is required"</span>); <span style="color: rgb(215, 58, 73);">var</span> type = <span style="color: rgb(215, 58, 73);">new</span> PaymentType { Name = name.Trim() }; _context.PaymentTypes.Add(type); _context.SaveChanges(); <span style="color: rgb(215, 58, 73);">return</span> Json(<span style="color: rgb(215, 58, 73);">new</span> { id = type.Id, name = type.Name }); } [<span style="color: rgb(0, 92, 197);">HttpPost</span>] [<span style="color: rgb(0, 92, 197);">ValidateAntiForgeryToken</span>] <span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">AddPaymentMethod</span>(<span style="color: rgb(227, 98, 9);">string</span> name, <span style="color: rgb(227, 98, 9);">int</span> paymentTypeId) { <span style="color: rgb(215, 58, 73);">if</span> (<span style="color: rgb(227, 98, 9);">string</span>.IsNullOrWhiteSpace(name)) <span style="color: rgb(215, 58, 73);">return</span> BadRequest(<span style="color: rgb(3, 47, 98);">"Name is required"</span>); <span style="color: rgb(215, 58, 73);">var</span> method = <span style="color: rgb(215, 58, 73);">new</span> PaymentMethod { Name = name.Trim(), PaymentTypeId = paymentTypeId }; _context.PaymentMethods.Add(method); _context.SaveChanges(); <span style="color: rgb(215, 58, 73);">return</span> Json(<span style="color: rgb(215, 58, 73);">new</span> { id = method.Id, name = method.Name }); } [<span style="color: rgb(0, 92, 197);">HttpGet</span>] <span style="color: rgb(215, 58, 73);">public</span> IActionResult <span style="color: rgb(111, 66, 193);">GetPaymentMethods</span>(<span style="color: rgb(227, 98, 9);">int</span> paymentTypeId) { <span style="color: rgb(215, 58, 73);">var</span> methods = _context.PaymentMethods .Where(m => m.PaymentTypeId == paymentTypeId) .Select(m => <span style="color: rgb(215, 58, 73);">new</span> { id = m.Id, name = m.Name }) .ToList(); <span style="color: rgb(215, 58, 73);">return</span> Json(methods); } } </code></pre><h2 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;">3. Create.cshtml（モーダル対応版）</h2><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;"><div data-bm="64" 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);">Razor</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 YourApp.Models.Payment <div class="form-group"> <label asp-for="PaymentTypeId"></label> <select asp-for="PaymentTypeId" class="form-control" asp-items="@(ViewData["PaymentTypeId"] as SelectList)" id="paymentTypeSelect"></select> <button type="button" class="btn btn-sm btn-primary mt-1" data-bs-toggle="modal" data-bs-target="#addPaymentTypeModal">＋ 新規追加</button> </div> <div class="form-group"> <label asp-for="PaymentMethodId"></label> <select asp-for="PaymentMethodId" class="form-control" asp-items="@(ViewData["PaymentMethodId"] as SelectList)" id="paymentMethodSelect"></select> <button type="button" class="btn btn-sm btn-primary mt-1" data-bs-toggle="modal" data-bs-target="#addPaymentMethodModal">＋ 新規追加</button> </div> <!-- 親追加モーダル --> <div class="modal fade" id="addPaymentTypeModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><h5 class="modal-title">支払種別の追加</h5></div> <div class="modal-body"> <input type="text" id="newPaymentTypeName" class="form-control" placeholder="支払種別名"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button> <button type="button" class="btn btn-primary" id="savePaymentTypeBtn">保存</button> </div> </div> </div> </div> <!-- 子追加モーダル --> <div class="modal fade" id="addPaymentMethodModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"><h5 class="modal-title">支払方法の追加</h5></div> <div class="modal-body"> <input type="text" id="newPaymentMethodName" class="form-control" placeholder="支払方法名"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button> <button type="button" class="btn btn-primary" id="savePaymentMethodBtn">保存</button> </div> </div> </div> </div> @section Scripts { <script> $(function () { // 親選択時に子リスト更新 $('#paymentTypeSelect').change(function () { var typeId = $(this).val(); $.getJSON('/Payments/GetPaymentMethods', { paymentTypeId: typeId }, function (data) { var $child = $('#paymentMethodSelect').empty(); $.each(data, function (i, item) { $child.append($('<option>', { value: item.id, text: item.name })); }); }); }); // 親保存 $('#savePaymentTypeBtn').click(function () { var name = $('#newPaymentTypeName').val().trim(); if (!name) { alert('名前を入力してください'); return; } $.post('/Payments/AddPaymentType', { name: name, __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() }, function (data) { $('#paymentTypeSelect').append($('<option>', { value: data.id, text: data.name, selected: true })).trigger('change'); $('#addPaymentTypeModal').modal('hide'); $('#newPaymentTypeName').val(''); }); }); // 子保存 $('#savePaymentMethodBtn').click(function () { var typeId = $('#paymentTypeSelect').val(); if (!typeId) { alert('先に支払種別を選択してください'); return; } var name = $('#newPaymentMethodName').val().trim(); if (!name) { alert('名前を入力してください'); return; } $.post('/Payments/AddPaymentMethod', { name: name, paymentTypeId: typeId, __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val() }, function (data) { $('#paymentMethodSelect').append($('<option>', { value: data.id, text: data.name, selected: true })); $('#addPaymentMethodModal').modal('hide'); $('#newPaymentMethodName').val(''); }); }); }); </script> } </code></pre></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" title="Undo" tabindex="0" 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;">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;"></button></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コードをコピーさせる