記事編集

日付

ジャンルのカテゴリ―名

タイトル

内容の要旨

<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;"><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;">検索キーワード</h2><p><a data-fr-linked="true" href="//asp.net" data-pasted="true">asp.net</a> mvc　.net8　「データベースから、カテゴリー分けされた複数のreferenceページへのメニュー」を左Sidebarに作成する方法を教えてください。  modelは、category.csとreferencepage.csです。referencepageクラス内には、&rdquo;string content&quot;フィールドを含めてください、</p><p><br></p><p><br></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;">モデル定義（<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Category</code> と <code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">ReferencePage</code>）</h2><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div 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(240, 243, 255);"><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: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; 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-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">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> System.Collections.Generic;
<span style="color: rgb(215, 58, 73);">using</span> System.ComponentModel.DataAnnotations;

<span style="color: rgb(215, 58, 73);">namespace</span> <span style="color: rgb(111, 66, 193);">YourApp.Models</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);">Category</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(0, 92, 197);">Required, StringLength(100)</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(106, 115, 125);">// ナビゲーションプロパティ</span>
        <span style="color: rgb(215, 58, 73);">public</span> List&lt;ReferencePage&gt; ReferencePages { <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);">new</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);">ReferencePage</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(0, 92, 197);">Required, StringLength(200)</span>]
        <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">string</span> Title { <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> Content { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; } <span style="color: rgb(106, 115, 125);">// 本文</span>

        <span style="color: rgb(106, 115, 125);">// 外部キー</span>
        <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(227, 98, 9);">int</span> CategoryId { <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> Category Category { <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. DbContext 設定</h2><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div 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(240, 243, 255);"><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: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; 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-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">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.EntityFrameworkCore;
<span style="color: rgb(215, 58, 73);">using</span> YourApp.Models;

<span style="color: rgb(215, 58, 73);">namespace</span> <span style="color: rgb(111, 66, 193);">YourApp.Data</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);">AppDbContext</span> : <span style="color: rgb(111, 66, 193);">DbContext</span>
    {
        <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(111, 66, 193);">AppDbContext</span>(DbContextOptions&lt;AppDbContext&gt; options) : <span style="color: rgb(111, 66, 193);">base</span>(options) { }

        <span style="color: rgb(215, 58, 73);">public</span> DbSet&lt;Category&gt; Categories { <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> DbSet&lt;ReferencePage&gt; ReferencePages { <span style="color: rgb(215, 58, 73);">get</span>; <span style="color: rgb(215, 58, 73);">set</span>; }
    }
}
</code></pre><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;"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Program.cs</code> に DbContext 登録：</p><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div 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(240, 243, 255);"><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: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; 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-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">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;">builder.Services.AddDbContext&lt;AppDbContext&gt;(options =&gt;
    options.UseSqlServer(builder.Configuration.GetConnectionString(<span style="color: rgb(3, 47, 98);">&quot;DefaultConnection&quot;</span>)));
</code></pre><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;"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">appsettings.json</code> に接続文字列を設定：</p><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div 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(240, 243, 255);"><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: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; display: inline-block; color: rgb(60, 81, 180);">Json</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-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">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(0, 92, 197);">&quot;ConnectionStrings&quot;</span>: {
  <span style="color: rgb(0, 92, 197);">&quot;DefaultConnection&quot;</span>: <span style="color: rgb(3, 47, 98);">&quot;Server=localhost;Database=YourDb;Trusted_Connection=True;TrustServerCertificate=True;&quot;</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;">3. サイドバー用 ViewComponent 作成</h2><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;">ViewComponent を使うと、どのビューからでも簡単に呼び出せます。</p><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: 20px / 22px Roboto, sans-serif;"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Components/SidebarMenu/SidebarMenuViewComponent.cs</code></h3><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div 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(240, 243, 255);"><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: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; 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-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">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.EntityFrameworkCore;
<span style="color: rgb(215, 58, 73);">using</span> YourApp.Data;

<span style="color: rgb(215, 58, 73);">namespace</span> <span style="color: rgb(111, 66, 193);">YourApp.Components</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);">SidebarMenuViewComponent</span> : <span style="color: rgb(111, 66, 193);">ViewComponent</span>
    {
        <span style="color: rgb(215, 58, 73);">private</span> <span style="color: rgb(215, 58, 73);">readonly</span> AppDbContext _context;

        <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(111, 66, 193);">SidebarMenuViewComponent</span>(AppDbContext context)
        {
            _context = context;
        }

        <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(215, 58, 73);">async</span> Task&lt;IViewComponentResult&gt; <span style="color: rgb(111, 66, 193);">InvokeAsync</span>()
        {
            <span style="color: rgb(106, 115, 125);">// カテゴリーとその中の ReferencePages を取得</span>
            <span style="color: rgb(215, 58, 73);">var</span> categories = <span style="color: rgb(215, 58, 73);">await</span> _context.Categories
                .Include(c =&gt; c.ReferencePages)
                .OrderBy(c =&gt; c.Name)
                .ToListAsync();

            <span style="color: rgb(215, 58, 73);">return</span> View(categories);
        }
    }
}
</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;">4. ViewComponent のビュー作成</h2><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;"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Views/Shared/Components/SidebarMenu/Default.cshtml</code></p><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div 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(240, 243, 255);"><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: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; 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-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">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 IEnumerable&lt;YourApp.Models.Category&gt;

&lt;div class=&quot;sidebar&quot;&gt;
    &lt;ul class=&quot;list-group&quot;&gt;
        @foreach (var category in Model)
        {
            &lt;li class=&quot;list-group-item&quot;&gt;
                &lt;strong&gt;@category.Name&lt;/strong&gt;
                &lt;ul class=&quot;list-unstyled ms-3&quot;&gt;
                    @foreach (var page in category.ReferencePages)
                    {
                        &lt;li&gt;
                            &lt;a asp-controller=&quot;ReferencePages&quot; asp-action=&quot;Details&quot; asp-route-id=&quot;@page.Id&quot;&gt;
                                @page.Title
                            &lt;/a&gt;
                        &lt;/li&gt;
                    }
                &lt;/ul&gt;
            &lt;/li&gt;
        }
    &lt;/ul&gt;
&lt;/div&gt;
</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;">5. レイアウトに組み込み</h2><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;"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Views/Shared/_Layout.cshtml</code> のサイドバー部分に追加：</p><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div 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(240, 243, 255);"><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: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; 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-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">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;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-3&quot;&gt;
        @await Component.InvokeAsync(&quot;SidebarMenu&quot;)
    &lt;/div&gt;
    &lt;div class=&quot;col-9&quot;&gt;
        @RenderBody()
    &lt;/div&gt;
&lt;/div&gt;
</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;">6. ReferencePagesController（詳細ページ表示用）</h2><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div 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(240, 243, 255);"><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: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; 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-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">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.EntityFrameworkCore;
<span style="color: rgb(215, 58, 73);">using</span> YourApp.Data;

<span style="color: rgb(215, 58, 73);">namespace</span> <span style="color: rgb(111, 66, 193);">YourApp.Controllers</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);">ReferencePagesController</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> AppDbContext _context;

        <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(111, 66, 193);">ReferencePagesController</span>(AppDbContext context)
        {
            _context = context;
        }

        <span style="color: rgb(215, 58, 73);">public</span> <span style="color: rgb(215, 58, 73);">async</span> Task&lt;IActionResult&gt; <span style="color: rgb(111, 66, 193);">Details</span>(<span style="color: rgb(227, 98, 9);">int</span> id)
        {
            <span style="color: rgb(215, 58, 73);">var</span> page = <span style="color: rgb(215, 58, 73);">await</span> _context.ReferencePages
                .Include(r =&gt; r.Category)
                .FirstOrDefaultAsync(r =&gt; r.Id == id);

            <span style="color: rgb(215, 58, 73);">if</span> (page == <span style="color: rgb(0, 92, 197);">null</span>)
                <span style="color: rgb(215, 58, 73);">return</span> NotFound();

            <span style="color: rgb(215, 58, 73);">return</span> View(page);
        }
    }
}
</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;">7. 詳細ページビュー</h2><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;"><code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">Views/ReferencePages/Details.cshtml</code></p><pre data-priority="2" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgb(245, 245, 245); border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; border-radius: 8px; overflow: hidden;"><div 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(240, 243, 255);"><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: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; line-height: 18px; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; 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-color: rgba(0, 0, 0, 0); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; cursor: pointer; color: rgb(60, 81, 180) !important; text-decoration: none !important; border-radius: 9999px; padding-block: 3px; padding-inline: 8px;"><div style="box-sizing: border-box; margin: 0px; padding: 0px; min-inline-size: 0px; max-inline-size: 100%; white-space: nowrap; overflow: clip; text-overflow: ellipsis; max-block-size: calc(1lh);">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.ReferencePage

&lt;h2&gt;@Model.Title&lt;/h2&gt;
&lt;div&gt;
    @Html.Raw(Model.Content) &lt;!-- HTMLを含む場合 --&gt;
&lt;/div&gt;
&lt;p&gt;&lt;a asp-action=&quot;Index&quot; asp-controller=&quot;Home&quot;&gt;戻る&lt;/a&gt;&lt;/p&gt;
</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;">8. ポイント</h2><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;"><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;">ViewComponent</strong> を使うことで、サイドバーをどのページにも簡単に再利用可能。</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;"><strong style="font-weight: 700;">Include</strong> で関連データ（ReferencePages）を一括取得。</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;"><strong style="font-weight: 700;">Content</strong> フィールドは HTML を含む場合&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">@Html.Raw()</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;">Bootstrap の&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">list-group</code> や&nbsp;<code style="border-radius: 8px; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);">ms-3</code> で簡単に階層メニューを作成。</li></ul><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;">DBのカテゴリー &rarr; その中の複数のReferenceページリンク</strong> が左サイドバーに表示され、クリックすると詳細ページが表示されます。</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;">もし希望があれば、このサイドバーを&nbsp;<strong style="font-weight: 700;">アコーディオン形式（折りたたみ）</strong> にして、カテゴリーをクリックするとページ一覧が展開されるようにもできます。<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;"><div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; color: rgba(0, 0, 0, 0.6); width: 300px; min-height: 40px; position: absolute; box-sizing: border-box; bottom: 18px; border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; border-image: none 100% / 1 / 0 stretch; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(247, 249, 254); 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コードをコピーさせる