MattHat
Explore posts from serversBlazor index page captures static files
I am trying to learn .NET Blazor. My aim is to create an question taking app where the correct questionare is rendered by either the root domain ("default questionare" depending on the domain used to access the service), id or slug.
I have
Questionare.razor:
Thanks for the help!
app.UseStaticFiles() in my pipeline before app.MapRzorComponents<App>() but the component is still triggered by static files.
Program.cs
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents();
...
app.UseStaticFiles();
...
app.MapRazorComponents<App>();
...
app.Run();
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents();
...
app.UseStaticFiles();
...
app.MapRazorComponents<App>();
...
app.Run();
@page "/"
@page "/{IdOrSlug}"
...
//markup
...
@code {
[Parameter]
public string IdOrSlug { get; set; }
private Questionnaire _questionnaire;
private Response _response = new();
private Dictionary<string, Answer> _answers = new();
private bool _loading = true;
protected override async Task OnInitializedAsync()
{
_questionnaire = await DatabaseService.GetQuestionnaireByIdOrSlug(IdOrSlug);
if (_questionnaire == null)
{
var uri = new Uri(NavigationManager.Uri);
Console.WriteLine(uri); // this prints all css assets, favicon.png too etc.
_questionnaire = await DatabaseService.GetQuestionnaireByDomain(uri.Host);
}
if (_questionnaire != null)
{
_response.QuestionnaireId = _questionnaire.Id;
foreach (var question in _questionnaire.Questions)
{
_answers[question.Id] = new Answer { QuestionId = question.Id };
}
}
_loading = false;
}
private void HandleRatingChange(string questionId, int rating)
{
_answers[questionId].RatingAnswer = rating;
}
private async Task HandleSubmit()
}
@page "/"
@page "/{IdOrSlug}"
...
//markup
...
@code {
[Parameter]
public string IdOrSlug { get; set; }
private Questionnaire _questionnaire;
private Response _response = new();
private Dictionary<string, Answer> _answers = new();
private bool _loading = true;
protected override async Task OnInitializedAsync()
{
_questionnaire = await DatabaseService.GetQuestionnaireByIdOrSlug(IdOrSlug);
if (_questionnaire == null)
{
var uri = new Uri(NavigationManager.Uri);
Console.WriteLine(uri); // this prints all css assets, favicon.png too etc.
_questionnaire = await DatabaseService.GetQuestionnaireByDomain(uri.Host);
}
if (_questionnaire != null)
{
_response.QuestionnaireId = _questionnaire.Id;
foreach (var question in _questionnaire.Questions)
{
_answers[question.Id] = new Answer { QuestionId = question.Id };
}
}
_loading = false;
}
private void HandleRatingChange(string questionId, int rating)
{
_answers[questionId].RatingAnswer = rating;
}
private async Task HandleSubmit()
}
1 replies
How to use a common header with solid-router nested layouts
Hi,
If i have a nested layout like bellow what is the best way for routes that share the layout to change the title shown in the shared layout?
function PageWrapper(props) {
return (
<div>
<header><h1>Tittle</h1></header>
{props.children}
<A href="/">Back Home</A>
</div>
);
}
<Route path="/" component={PageWrapper}>
<Route path="/" component={Home} /> // title"You are home"
<Route path="/order" component={Order} /> // title "Make an order"
<Route path="/order/:orderId" component={Status} /> // title "Order 123"
</Route>
function PageWrapper(props) {
return (
<div>
<header><h1>Tittle</h1></header>
{props.children}
<A href="/">Back Home</A>
</div>
);
}
<Route path="/" component={PageWrapper}>
<Route path="/" component={Home} /> // title"You are home"
<Route path="/order" component={Order} /> // title "Make an order"
<Route path="/order/:orderId" component={Status} /> // title "Order 123"
</Route>
1 replies
Creating a <ProtectedRoute/> component to use with solid router
Hi,
Currently i have this which results in a
Index.tsx:
Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.
ProtectedRoute.tsx:
...
import { useAuth } from "@/components/AuthContext";
export const ProtectedRoute: Component<ProtectedRouteProps> = (props) => {
const { component: ProtectedComponent, path } = props;
const auth = useAuth();
const location = useLocation();
return (
<Route
path={path}
component={(routeProps: RouteProps<string>) => {
return (
<Switch fallback={<Navigate href="/login" state={{ from: location.pathname }} />}>
<Match when={auth.isLoading()}>
<div>Loading...</div>
</Match>
<Match when={auth.isAuthenticated()}>
<ProtectedComponent {...routeProps} />
</Match>
</Switch>
);
}}
/>
);
};
...
import { useAuth } from "@/components/AuthContext";
export const ProtectedRoute: Component<ProtectedRouteProps> = (props) => {
const { component: ProtectedComponent, path } = props;
const auth = useAuth();
const location = useLocation();
return (
<Route
path={path}
component={(routeProps: RouteProps<string>) => {
return (
<Switch fallback={<Navigate href="/login" state={{ from: location.pathname }} />}>
<Match when={auth.isLoading()}>
<div>Loading...</div>
</Match>
<Match when={auth.isAuthenticated()}>
<ProtectedComponent {...routeProps} />
</Match>
</Switch>
);
}}
/>
);
};
const queryClient = new QueryClient();
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<Route path="/login/:orgUsername?" component={Login} />
<Route path="*" component={NotFound} />
<Layout>
<ProtectedRoute path="/" component={Home} />
<ProtectedRoute path="/order" component={Order} />
<ProtectedRoute path="/order/:id" component={Status} />
</Layout>
<ToastRegion>
<ToastList />
</ToastRegion>
</AuthProvider>
</QueryClientProvider>
</Suspense>
</Router>
);
const queryClient = new QueryClient();
const App = () => (
<Router>
<Suspense fallback={<div>Loading...</div>}>
<QueryClientProvider client={queryClient}>
<AuthProvider>
<Route path="/login/:orgUsername?" component={Login} />
<Route path="*" component={NotFound} />
<Layout>
<ProtectedRoute path="/" component={Home} />
<ProtectedRoute path="/order" component={Order} />
<ProtectedRoute path="/order/:id" component={Status} />
</Layout>
<ToastRegion>
<ToastList />
</ToastRegion>
</AuthProvider>
</QueryClientProvider>
</Suspense>
</Router>
);
8 replies