Skip to content

Commit f303a55

Browse files
rynowakrynowak
committed
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.
1 parent a3c8bd1 commit f303a55

File tree

12 files changed

+236
-6
lines changed

12 files changed

+236
-6
lines changed

‎src/Mvc/samples/MvcSandbox/Components/App.razor

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
<Router AppAssembly="@typeof(MvcSandbox.Startup).Assembly" FallbackComponent="@typeof(NotFound)" />

‎src/Mvc/samples/MvcSandbox/Components/NotFound.razor

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@using MvcSandbox.Components.Shared
2+
@layout MainLayout
3+
<h1>Not Found</h1>
4+
<h2>Sorry, nothing was found.</h2>

‎src/Mvc/samples/MvcSandbox/Components/Pages/Index.razor

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@page "/"
2+
<h3>Hi from components</h3>

‎src/Mvc/samples/MvcSandbox/Components/Pages/_ViewImports.cshtml

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@using MvcSandbox.Components.Shared
2+
@layout MainLayout

‎src/Mvc/samples/MvcSandbox/Components/Shared/MainLayout.razor

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@using Microsoft.AspNetCore.Components.Layouts
2+
@inherits LayoutComponentBase
3+
4+
<div class="sidebar">
5+
<NavMenu />
6+
</div>
7+
8+
<div class="main">
9+
<div class="top-row px-4">
10+
<a href="https://docs.microsoft.com/en-us/aspnet/" target="_blank" class="ml-md-auto">About</a>
11+
</div>
12+
13+
<div class="content px-4">
14+
@Body
15+
</div>
16+
</div>

‎src/Mvc/samples/MvcSandbox/Components/Shared/NavMenu.razor

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@using Microsoft.AspNetCore.Components.Routing
2+
3+
<div class="top-row pl-4 navbar navbar-dark">
4+
<a class="navbar-brand" href="">MvcSandbox</a>
5+
<button class="navbar-toggler" onclick="@ToggleNavMenu">
6+
<span class="navbar-toggler-icon"></span>
7+
</button>
8+
</div>
9+
10+
<div class="@NavMenuCssClass" onclick="@ToggleNavMenu">
11+
<ul class="nav flex-column">
12+
<li class="nav-item px-3">
13+
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
14+
<span class="oi oi-home" aria-hidden="true"></span> Home
15+
</NavLink>
16+
</li>
17+
</ul>
18+
</div>
19+
20+
@functions {
21+
bool collapseNavMenu = true;
22+
23+
string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
24+
25+
void ToggleNavMenu()
26+
{
27+
collapseNavMenu = !collapseNavMenu;
28+
}
29+
}

‎src/Mvc/samples/MvcSandbox/Components/_ViewImports.cshtml

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@namespace MvcSandbox.Components

‎src/Mvc/samples/MvcSandbox/MvcSandbox.csproj

+2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@
22

33
<PropertyGroup>
44
<TargetFramework>netcoreapp3.0</TargetFramework>
5+
<_RazorComponentInclude>Components\**\*.cshtml</_RazorComponentInclude>
56
</PropertyGroup>
67

78
<ItemGroup>
89
<Reference Include="Microsoft.AspNetCore.Mvc" />
910
<Reference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" />
1011
<Reference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" />
12+
<Reference Include="Microsoft.AspNetCore.Components.Server" />
1113
<Reference Include="Microsoft.AspNetCore.Diagnostics" />
1214
<Reference Include="Microsoft.AspNetCore.Server.IISIntegration" />
1315
<Reference Include="Microsoft.AspNetCore.Server.Kestrel" />

‎src/Mvc/samples/MvcSandbox/Pages/Components.cshtml

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@page
2+
@model MvcSandbox.Pages.ComponentsModel
3+
@{
4+
Layout = null;
5+
}
6+
7+
<!DOCTYPE html>
8+
<html>
9+
<head>
10+
<meta charset="utf-8" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
12+
<title>MvcSandbox - Components</title>
13+
<base href="~/" />
14+
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css" />
15+
<link href="css/site.css" rel="stylesheet" />
16+
</head>
17+
<body>
18+
<app>@(await Html.RenderComponentAsync<MvcSandbox.Components.App>())</app>
19+
20+
<script src="_framework/components.server.js"></script>
21+
</body>
22+
</html>

‎src/Mvc/samples/MvcSandbox/Pages/Components.cshtml.cs

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Threading.Tasks;
5+
using Microsoft.AspNetCore.Mvc;
6+
using Microsoft.AspNetCore.Mvc.RazorPages;
7+
8+
namespace MvcSandbox.Pages
9+
{
10+
public class ComponentsModel : PageModel
11+
{
12+
public void OnGet()
13+
{
14+
}
15+
}
16+
}

‎src/Mvc/samples/MvcSandbox/Startup.cs

+7-6
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ public void ConfigureServices(IServiceCollection services)
2626
{
2727
options.ConstraintMap["slugify"] = typeof(SlugifyParameterTransformer);
2828
});
29+
services.AddRazorComponents();
2930
services.AddMvc()
3031
.AddRazorRuntimeCompilation()
3132
.SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Latest);
@@ -34,11 +35,14 @@ public void ConfigureServices(IServiceCollection services)
3435
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
3536
public void Configure(IApplicationBuilder app)
3637
{
38+
app.UseDeveloperExceptionPage();
39+
app.UseStaticFiles();
40+
3741
app.UseRouting(builder =>
3842
{
3943
builder.MapGet(
4044
requestDelegate: WriteEndpoints,
41-
pattern: "/endpoints").WithDisplayName("Home");
45+
pattern: "/endpoints").WithDisplayName("Endpoints");
4246

4347
builder.MapControllerRoute(
4448
name: "default",
@@ -66,13 +70,10 @@ public void Configure(IApplicationBuilder app)
6670

6771
builder.MapControllers();
6872
builder.MapRazorPages();
69-
70-
builder.MapFallbackToController("Index", "Home");
73+
builder.MapComponentHub<MvcSandbox.Components.App>("app");
74+
builder.MapFallbackToPage("/Components");
7175
});
7276

73-
app.UseDeveloperExceptionPage();
74-
app.UseStaticFiles();
75-
7677
app.UseEndpoint();
7778
}
7879

‎src/Mvc/samples/MvcSandbox/wwwroot/css/site.css

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
html, body {
2+
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
3+
}
4+
5+
app {
6+
position: relative;
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
11+
.top-row {
12+
height: 3.5rem;
13+
display: flex;
14+
align-items: center;
15+
}
16+
17+
.main {
18+
flex: 1;
19+
}
20+
21+
.main .top-row {
22+
background-color: #e6e6e6;
23+
border-bottom: 1px solid #d6d5d5;
24+
}
25+
26+
.sidebar {
27+
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
28+
}
29+
30+
.sidebar .top-row {
31+
background-color: rgba(0,0,0,0.4);
32+
}
33+
34+
.sidebar .navbar-brand {
35+
font-size: 1.1rem;
36+
}
37+
38+
.sidebar .oi {
39+
width: 2rem;
40+
font-size: 1.1rem;
41+
vertical-align: text-top;
42+
top: -2px;
43+
}
44+
45+
.nav-item {
46+
font-size: 0.9rem;
47+
padding-bottom: 0.5rem;
48+
}
49+
50+
.nav-item:first-of-type {
51+
padding-top: 1rem;
52+
}
53+
54+
.nav-item:last-of-type {
55+
padding-bottom: 1rem;
56+
}
57+
58+
.nav-item a {
59+
color: #d7d7d7;
60+
border-radius: 4px;
61+
height: 3rem;
62+
display: flex;
63+
align-items: center;
64+
line-height: 3rem;
65+
}
66+
67+
.nav-item a.active {
68+
background-color: rgba(255,255,255,0.25);
69+
color: white;
70+
}
71+
72+
.nav-item a:hover {
73+
background-color: rgba(255,255,255,0.1);
74+
color: white;
75+
}
76+
77+
.content {
78+
padding-top: 1.1rem;
79+
}
80+
81+
.navbar-toggler {
82+
background-color: rgba(255, 255, 255, 0.1);
83+
}
84+
85+
.valid.modified:not([type=checkbox]) {
86+
outline: 1px solid #26b050;
87+
}
88+
89+
.invalid {
90+
outline: 1px solid red;
91+
}
92+
93+
.validation-message {
94+
color: red;
95+
}
96+
97+
@media (max-width: 767.98px) {
98+
.main .top-row {
99+
display: none;
100+
}
101+
}
102+
103+
@media (min-width: 768px) {
104+
app {
105+
flex-direction: row;
106+
}
107+
108+
.sidebar {
109+
width: 250px;
110+
height: 100vh;
111+
position: sticky;
112+
top: 0;
113+
}
114+
115+
.main .top-row {
116+
position: sticky;
117+
top: 0;
118+
}
119+
120+
.main > div {
121+
padding-left: 2rem !important;
122+
padding-right: 1.5rem !important;
123+
}
124+
125+
.navbar-toggler {
126+
display: none;
127+
}
128+
129+
.sidebar .collapse {
130+
/* Never collapse the sidebar for wide screens */
131+
display: block;
132+
}
133+
}

0 commit comments

Comments
 (0)