Blazor Bootstrap ๋ฌธ์˜

์•ˆ๋…•ํ•˜์„ธ์š”. ์ฐจํŠธ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•ด์„œ ์ฐพ์•„๋ณด๋‹ค blazor bootstrap์ด ์žˆ๋‹ค๋Š”๊ฑธ ์•Œ์•˜์Šต๋‹ˆ๋‹ค.

ํŒจํ‚ค์ง€๋ฅผ ์„ค์น˜ํ•˜์—ฌ ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋Š”๋ฐ

์‚ฌ์ดํŠธ ์˜ˆ์ œ๋Œ€๋กœ MainLayout๋ฅผ ์ˆ˜์ •ํ•˜๊ณ  ์‹ ๊ทœ ๋ ˆ์ด์ € ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด ๋“ฑ๋กํ•˜๊ณ  ํ…Œ์ŠคํŠธ๋ฅผ ํ•˜๋ฉด 404 ์—๋Ÿฌ๊ฐ€ ์ผ์–ด๋‚ฉ๋‹ˆ๋‹ค.

NavMenu๋ฅผ ์ด์šฉํ•˜์ง€ ์•Š๋Š”๊ฑฐ ๊ฐ™์€๋ฐ ํ•ด๋‹น ๊ฒฝ๋กœ๋ฅผ ์ถ”๊ฐ€๋ฅผ ํ•ด๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ 404์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

์‹ ๊ทœ ์ถ”๊ฐ€๋œ page ์ด๋ฆ„์ด ์ œ๋Œ€๋กœ ๋กœ๋“œ๊ฐ€ ์•ˆ๋˜๋Š”๊ฑฐ ๊ฐ™์€๋ฐ ์•„์‹œ๋Š”๋ถ„ ๊ณ„์‹ค๊นŒ์š”??

Blazor Bootstrap MainLayout

@inherits LayoutComponentBase

<div class="bb-page">

    <Sidebar @ref="sidebar"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-end">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">@Body</div>
        </article>
    </main>

</div>

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
                   {
                       new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
                       new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
                       new NavItem { Id = "3", Href = "/weather", IconName = IconName.Table, Text = "Fetch Data"},
                       new NavItem { Id = "4", Href = "/attendance", IconName = IconName.Table, Text = "Attendance" } ,
                       new NavItem { Id = "5", Href = "/component", IconName = IconName.Table, Text = "NEW" } ,
                       new NavItem { Id = "6", Href = "/summury", IconName = IconName.Table, Text = "Summury" } 

            };

        return navItems;
    }
}


<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">๐Ÿ—™</a>
</div>

Summury๋ผ๋Š” ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์—ˆ๊ณ  ๋ฉ”์ธ๋ ˆ์ด์•„์›ƒ์— ์„ค์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.
Summury ํŽ˜์ด์ง€๋Š” ํ…์Šค๋งŒ ์žˆ๋Š” ๋‹จ์ˆœํŽ˜์ด์ง€ ์ด๊ณ  ๋ฉ”์ธ๋ ˆ์ด์•„์›ƒ์—์„œ summury๋งํฌ๋ฅผ ํด๋ฆญํ•˜๋ฉด ํŒŒ๋ผ๋ฉ”ํ„ฐ ์„ค์ •์„ ํ•˜์ง€ ์•Š์•˜๋Š”๋ฐ url์— localhost:7000/summury? ๋กœ ๋„˜์–ด๊ฐ€๋„ค์š”;;

์ž๋ฌธ์ž๋‹ต์ด๋„ค์š”ใ…Žใ…Ž;; ํ•ด๋‹น Summury ๋ ˆ์ด์ € ํŒŒ์ผ์˜ ๋นŒ๋“œ์ž‘์—…์ด ์—†์Œ์œผ๋กœ ๋˜์–ด ์žˆ์–ด์„œ ๋นŒ๋“œํ• ๋•Œ ๋ฐ˜์˜์ด ์•ˆ๋˜์—ˆ๋‚˜ ๋ณด๋„ค์š”. Bootstrap์„ ์ ์šฉ์‹œํ‚ค๋ฉด ์‹ ๊ทœ ๋ ˆ์ด์ € ํŒŒ์ผ ์ƒ์„ฑ์‹œ ๋นŒ๋“œ์ž‘์—…์ด ์—†์Œ์œผ๋กœ ์ƒ์„ฑ๋˜๋„ค์š”.

1๊ฐœ์˜ ์ข‹์•„์š”