From f303a55a8edf632738eb6e15312aac443cdf21b1 Mon Sep 17 00:00:00 2001 From: Ryan Nowak Date: Sun, 17 Mar 2019 13:32:03 -0700 Subject: [PATCH] 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. --- .../samples/MvcSandbox/Components/App.razor | 2 + .../MvcSandbox/Components/NotFound.razor | 4 + .../MvcSandbox/Components/Pages/Index.razor | 2 + .../Components/Pages/_ViewImports.cshtml | 2 + .../Components/Shared/MainLayout.razor | 16 +++ .../Components/Shared/NavMenu.razor | 29 ++++ .../MvcSandbox/Components/_ViewImports.cshtml | 1 + src/Mvc/samples/MvcSandbox/MvcSandbox.csproj | 2 + .../MvcSandbox/Pages/Components.cshtml | 22 +++ .../MvcSandbox/Pages/Components.cshtml.cs | 16 +++ src/Mvc/samples/MvcSandbox/Startup.cs | 13 +- .../samples/MvcSandbox/wwwroot/css/site.css | 133 ++++++++++++++++++ 12 files changed, 236 insertions(+), 6 deletions(-) create mode 100644 src/Mvc/samples/MvcSandbox/Components/App.razor create mode 100644 src/Mvc/samples/MvcSandbox/Components/NotFound.razor create mode 100644 src/Mvc/samples/MvcSandbox/Components/Pages/Index.razor create mode 100644 src/Mvc/samples/MvcSandbox/Components/Pages/_ViewImports.cshtml create mode 100644 src/Mvc/samples/MvcSandbox/Components/Shared/MainLayout.razor create mode 100644 src/Mvc/samples/MvcSandbox/Components/Shared/NavMenu.razor create mode 100644 src/Mvc/samples/MvcSandbox/Components/_ViewImports.cshtml create mode 100644 src/Mvc/samples/MvcSandbox/Pages/Components.cshtml create mode 100644 src/Mvc/samples/MvcSandbox/Pages/Components.cshtml.cs create mode 100644 src/Mvc/samples/MvcSandbox/wwwroot/css/site.css diff --git a/src/Mvc/samples/MvcSandbox/Components/App.razor b/src/Mvc/samples/MvcSandbox/Components/App.razor new file mode 100644 index 0000000000..704bb423f5 --- /dev/null +++ b/src/Mvc/samples/MvcSandbox/Components/App.razor @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/Mvc/samples/MvcSandbox/Components/NotFound.razor b/src/Mvc/samples/MvcSandbox/Components/NotFound.razor new file mode 100644 index 0000000000..369bfb8dde --- /dev/null +++ b/src/Mvc/samples/MvcSandbox/Components/NotFound.razor @@ -0,0 +1,4 @@ +@using MvcSandbox.Components.Shared +@layout MainLayout +

Not Found

+

Sorry, nothing was found.

\ No newline at end of file diff --git a/src/Mvc/samples/MvcSandbox/Components/Pages/Index.razor b/src/Mvc/samples/MvcSandbox/Components/Pages/Index.razor new file mode 100644 index 0000000000..114f4100c8 --- /dev/null +++ b/src/Mvc/samples/MvcSandbox/Components/Pages/Index.razor @@ -0,0 +1,2 @@ +@page "/" +

Hi from components

\ No newline at end of file diff --git a/src/Mvc/samples/MvcSandbox/Components/Pages/_ViewImports.cshtml b/src/Mvc/samples/MvcSandbox/Components/Pages/_ViewImports.cshtml new file mode 100644 index 0000000000..98b5832d4b --- /dev/null +++ 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 new file mode 100644 index 0000000000..50a044f56d --- /dev/null +++ b/src/Mvc/samples/MvcSandbox/Components/Shared/MainLayout.razor @@ -0,0 +1,16 @@ +@using Microsoft.AspNetCore.Components.Layouts +@inherits LayoutComponentBase + +
+ +
+ +
+
+ About +
+ +
+ @Body +
+
diff --git a/src/Mvc/samples/MvcSandbox/Components/Shared/NavMenu.razor b/src/Mvc/samples/MvcSandbox/Components/Shared/NavMenu.razor new file mode 100644 index 0000000000..b879ed0b22 --- /dev/null +++ b/src/Mvc/samples/MvcSandbox/Components/Shared/NavMenu.razor @@ -0,0 +1,29 @@ +@using Microsoft.AspNetCore.Components.Routing + +
+ MvcSandbox + +
+ +
+
    +
  • + + Home + +
    • +
+
+ +@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 new file mode 100644 index 0000000000..eb0ea6f502 --- /dev/null +++ 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 index 510f26e32e..697cdb83eb 100644 --- a/src/Mvc/samples/MvcSandbox/MvcSandbox.csproj +++ b/src/Mvc/samples/MvcSandbox/MvcSandbox.csproj @@ -2,12 +2,14 @@ netcoreapp3.0 + <_RazorComponentInclude>Components\**\*.cshtml + diff --git a/src/Mvc/samples/MvcSandbox/Pages/Components.cshtml b/src/Mvc/samples/MvcSandbox/Pages/Components.cshtml new file mode 100644 index 0000000000..a0bde342d6 --- /dev/null +++ b/src/Mvc/samples/MvcSandbox/Pages/Components.cshtml @@ -0,0 +1,22 @@ +@page +@model MvcSandbox.Pages.ComponentsModel +@{ + Layout = null; +} + + + + + + + MvcSandbox - Components + + + + + + @(await Html.RenderComponentAsync()) + + + + diff --git a/src/Mvc/samples/MvcSandbox/Pages/Components.cshtml.cs b/src/Mvc/samples/MvcSandbox/Pages/Components.cshtml.cs new file mode 100644 index 0000000000..fce8214cb5 --- /dev/null +++ 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() + { + } + } +} \ No newline at end of file diff --git a/src/Mvc/samples/MvcSandbox/Startup.cs b/src/Mvc/samples/MvcSandbox/Startup.cs index 17962a48ec..6b81682f80 100644 --- a/src/Mvc/samples/MvcSandbox/Startup.cs +++ b/src/Mvc/samples/MvcSandbox/Startup.cs @@ -26,6 +26,7 @@ namespace MvcSandbox { options.ConstraintMap["slugify"] = typeof(SlugifyParameterTransformer); }); + services.AddRazorComponents(); services.AddMvc() .AddRazorRuntimeCompilation() .SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Latest); @@ -34,11 +35,14 @@ namespace MvcSandbox // 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 @@ namespace MvcSandbox builder.MapControllers(); builder.MapRazorPages(); - - builder.MapFallbackToController("Index", "Home"); + builder.MapComponentHub("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 new file mode 100644 index 0000000000..ec4e04d447 --- /dev/null +++ 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; + } +}