Add skeleton to use components + prerendering

This adds the skeleton needed for components + prerendring development in the MVC sandbox. We don't currently have a sample app for quick and dirty testing.
dotnet · Mar 17, 2019 · 31da0de · 31da0de
1 parent 8349109
commit 31da0de
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 6 deletions.
diff --git a/src/Mvc/samples/MvcSandbox/Components/App.razor b/src/Mvc/samples/MvcSandbox/Components/App.razor
@@ -0,0 +1,2 @@
+
+<Router AppAssembly="@typeof(MvcSandbox.Startup).Assembly" FallbackComponent="@typeof(NotFound)" />
diff --git a/src/Mvc/samples/MvcSandbox/Components/NotFound.razor b/src/Mvc/samples/MvcSandbox/Components/NotFound.razor
@@ -0,0 +1,4 @@
+@using MvcSandbox.Components.Shared
+@layout MainLayout
+<h1>Not Found</h1>
+<h2>Sorry, nothing was found.</h2>
diff --git a/src/Mvc/samples/MvcSandbox/Components/Pages/Index.razor b/src/Mvc/samples/MvcSandbox/Components/Pages/Index.razor
@@ -0,0 +1,2 @@
+@page "/"
+<h3>Hi from components</h3>
diff --git a/src/Mvc/samples/MvcSandbox/Components/Pages/_ViewImports.cshtml b/src/Mvc/samples/MvcSandbox/Components/Pages/_ViewImports.cshtml
@@ -0,0 +1,2 @@
+@using MvcSandbox.Components.Shared
+@layout MainLayout
diff --git a/src/Mvc/samples/MvcSandbox/Components/Shared/MainLayout.razor b/src/Mvc/samples/MvcSandbox/Components/Shared/MainLayout.razor
@@ -0,0 +1,16 @@
+@using Microsoft.AspNetCore.Components.Layouts
+@inherits LayoutComponentBase
+
+<div class="sidebar">
+    <NavMenu />
+</div>
+
+<div class="main">
+    <div class="top-row px-4">
+        <a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank" class="ml-md-auto">About</a>
+    </div>
+
+    <div class="content px-4">
+        @Body
+    </div>
+</div>
diff --git a/src/Mvc/samples/MvcSandbox/Components/Shared/NavMenu.razor b/src/Mvc/samples/MvcSandbox/Components/Shared/NavMenu.razor
@@ -0,0 +1,29 @@
+@using Microsoft.AspNetCore.Components.Routing
+
+<div class="top-row pl-4 navbar navbar-dark">
+    <a class="navbar-brand" href="">MvcSandbox</a>
+    <button class="navbar-toggler" onclick="@ToggleNavMenu">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+</div>
+
+<div class="@NavMenuCssClass" onclick="@ToggleNavMenu">
+    <ul class="nav flex-column">
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> Home
+            </NavLink>
+        </li>
+    </ul>
+</div>
+
+@functions {
+    bool collapseNavMenu = true;
+
+    string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}
diff --git a/src/Mvc/samples/MvcSandbox/Components/_ViewImports.cshtml b/src/Mvc/samples/MvcSandbox/Components/_ViewImports.cshtml
@@ -0,0 +1 @@
+@namespace MvcSandbox.Components
diff --git a/src/Mvc/samples/MvcSandbox/MvcSandbox.csproj b/src/Mvc/samples/MvcSandbox/MvcSandbox.csproj
@@ -2,12 +2,14 @@
 
   <PropertyGroup>
     <TargetFramework>netcoreapp3.0</TargetFramework>
+    <_RazorComponentInclude>Components\**\*.cshtml</_RazorComponentInclude>
   </PropertyGroup>
 
   <ItemGroup>
     <Reference Include="Microsoft.AspNetCore.Mvc" />
     <Reference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" />
     <Reference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" />
+    <Reference Include="Microsoft.AspNetCore.Components.Server" />
     <Reference Include="Microsoft.AspNetCore.Diagnostics" />
     <Reference Include="Microsoft.AspNetCore.Server.IISIntegration" />
     <Reference Include="Microsoft.AspNetCore.Server.Kestrel" />

diff --git a/src/Mvc/samples/MvcSandbox/Pages/Components.cshtml b/src/Mvc/samples/MvcSandbox/Pages/Components.cshtml
@@ -0,0 +1,22 @@
+@page
+@model MvcSandbox.Pages.ComponentsModel
+@{ 
+    Layout = null;
+}
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MvcSandbox - Components</title>
+    <base href="~/" />
+    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
+    <link href="css/site.css" rel="stylesheet" />
+</head>
+<body>
+    <app>@(await Html.RenderComponentAsync<MvcSandbox.Components.App>())</app>
+
+    <script src="_framework/components.server.js"></script>
+</body>
+</html>
diff --git a/src/Mvc/samples/MvcSandbox/Pages/Components.cshtml.cs b/src/Mvc/samples/MvcSandbox/Pages/Components.cshtml.cs
@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace MvcSandbox.Pages
+{
+    public class ComponentsModel : PageModel
+    {
+        public void OnGet()
+        {
+        }
+    }
+}
diff --git a/src/Mvc/samples/MvcSandbox/Startup.cs b/src/Mvc/samples/MvcSandbox/Startup.cs
@@ -26,6 +26,7 @@ public void ConfigureServices(IServiceCollection services)
             {
                 options.ConstraintMap["slugify"] = typeof(SlugifyParameterTransformer);
             });
+            services.AddRazorComponents();
             services.AddMvc()
                 .AddRazorRuntimeCompilation()
                 .SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Latest);
@@ -34,11 +35,14 @@ public void ConfigureServices(IServiceCollection services)
         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
         public void Configure(IApplicationBuilder app)
         {
+            app.UseDeveloperExceptionPage();
+            app.UseStaticFiles();
+
             app.UseRouting(builder =>
             {
                 builder.MapGet(
                     requestDelegate: WriteEndpoints,
-                    pattern: "/endpoints").WithDisplayName("Home");
+                    pattern: "/endpoints").WithDisplayName("Endpoints");
 
                 builder.MapControllerRoute(
                     name: "default",
@@ -66,13 +70,10 @@ public void Configure(IApplicationBuilder app)
 
                 builder.MapControllers();
                 builder.MapRazorPages();
-
-                builder.MapFallbackToController("Index", "Home");
+                builder.MapComponentHub<MvcSandbox.Components.App>("app");
+                builder.MapFallbackToPage("/Components");
             });
 
-            app.UseDeveloperExceptionPage();
-            app.UseStaticFiles();
-
             app.UseEndpoint();
         }
 

diff --git a/src/Mvc/samples/MvcSandbox/wwwroot/css/site.css b/src/Mvc/samples/MvcSandbox/wwwroot/css/site.css
@@ -0,0 +1,133 @@
+html, body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+app {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.top-row {
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+.main {
+    flex: 1;
+}
+
+    .main .top-row {
+        background-color: #e6e6e6;
+        border-bottom: 1px solid #d6d5d5;
+    }
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+    .sidebar .top-row {
+        background-color: rgba(0,0,0,0.4);
+    }
+
+    .sidebar .navbar-brand {
+        font-size: 1.1rem;
+    }
+
+    .sidebar .oi {
+        width: 2rem;
+        font-size: 1.1rem;
+        vertical-align: text-top;
+        top: -2px;
+    }
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+    .nav-item:first-of-type {
+        padding-top: 1rem;
+    }
+
+    .nav-item:last-of-type {
+        padding-bottom: 1rem;
+    }
+
+    .nav-item a {
+        color: #d7d7d7;
+        border-radius: 4px;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        line-height: 3rem;
+    }
+
+        .nav-item a.active {
+            background-color: rgba(255,255,255,0.25);
+            color: white;
+        }
+
+        .nav-item a:hover {
+            background-color: rgba(255,255,255,0.1);
+            color: white;
+        }
+
+.content {
+    padding-top: 1.1rem;
+}
+
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid red;
+}
+
+.validation-message {
+    color: red;
+}
+
+@media (max-width: 767.98px) {
+    .main .top-row {
+        display: none;
+    }
+}
+
+@media (min-width: 768px) {
+    app {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .main .top-row {
+        position: sticky;
+        top: 0;
+    }
+
+    .main > div {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+
+    .navbar-toggler {
+        display: none;
+    }
+
+    .sidebar .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@

		<Router AppAssembly="@typeof(MvcSandbox.Startup).Assembly" FallbackComponent="@typeof(NotFound)" />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@using MvcSandbox.Components.Shared
		@layout MainLayout