<div id="Counter">
#(await Html.RenderComponentAsync<Counter>(new { IncrementAmount = 10 }))
</div>
why would i use this when i can just use
<counter IncrementAmount="10"/>
"When the page or view is rendered, components are prerendered at the same time."
https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0
thanks
The code sample you’ve quoted is used when you want to include a Blazor component into a MVC view or a Razor page. If you’re just writing a standard Blazor app then you wouldn’t need this syntax.
When using this syntax the component is going to be prerendered on the server and will become interactive once a SignalR connection has been established with the client browser.
Related
I know I can render blazor component anywhere inside razor page using
Html.RenderComponentAsync() or <component type="typeof(Client.App)" render-mode="Static">
What I would like to achieve is being able to use regular blazor tag components with their ability to nest them with RenderFragment, for example:
<OutsideComponent>
<InsideComponent>
<div>Some content</div>
</InsideComponent>
</OutsideComponent>
At the same time I would like to keep all razor page functions like OnGet(), OnPost() handles.
Is that at all possible to merge those two approaches? I use render-mode="Static" and don't care about blazor interactivity, I just want my code separated to nestable components.
In Next.js you can have one component Static Side Rendered or Server Side Rendered and another component Client Side Rendered on the same page. Can you do the same in Nuxt.js? It seems I cannot find a proper answer.
Your components are by default rendered on both: server + client (if your app is not SPA only of course).
For client side rendering only, you can use <client-only> as a wrapper as explained here: https://nuxtjs.org/docs/2.x/features/nuxt-components/#the-client-only-component
There is nothing like <server-only> but you can prevent hydration with something like this: https://github.com/maoberlehner/vue-lazy-hydration
Hybrid Rendering is coming soon to Nuxt 3, as the documentation mentions now: https://v3.nuxtjs.org/guide/concepts/rendering/#hybrid-rendering
And there is also a GitHub discussion about that topic as well: https://github.com/nuxt/framework/discussions/560
For login, registration pages I'm using MVC .cshtml views. I have a Blazor component as my layout for Blazor pages and I want to apply it for mvc pages as well and avoid duplicate my layout.
Is that possible? if not what's the solution?
I َAppreciate any help and solution
This is covered in the docs for using razor components alongside MVC. Simply put, you don't use Blazor-style layouts. Rather, your MVC layout is utilized by the _Host.cshtml, and your routeable razor components are loaded within that.
Chris guided us to the doc to refer to (Thank you, Chris!). For those who still wish to try using Blazor-style layouts in MVC or Razor page projects, follow all instructions in the doc Chris pointed out and you can get a view like:
The above is rendered with a Blazor layout component (CustomLayout1.razor):
#inherits LayoutComponentBase
<div class="container-fluid border border-primary p-3">
<p>CustomLayout1</p>
<div class="container-fluid border border-danger p-3">
#Body
</div>
</div>
and a routable Blazor component which uses the custom layout (LayoutTest_Body.razor):
#page "/test"
#layout Views.Shared.CustomLayout1
<p>LayoutTest_Body</p>
As a sample for nested layouts, I added another Blazor layout component (CustomLayout2.razor) which is embedded into CustomLayout1:
#inherits LayoutComponentBase
#layout Views.Shared.CustomLayout1
<div class="container-fluid border border-warning p-3">
<p>CustomLayout2</p>
<div class="container-fluid border border-info p-3">
#Body
</div>
</div>
and changed the #layout of LayoutTest_Body.razor from CustomLayout1 to CustomLayout2:
#page "/test"
#layout Views.Shared.CustomLayout2
<p>LayoutTest_Body</p>
to get:
Please note that:
Blazor layouts can only be applied to routable components (see doc) like LayoutTest_Body.razor at the first line of which holds #page directive followed by a unique route string.
Above samples are based on AspNetCore5.0.
Only MVC images are shown, but the same for Razor pages except for a few differences in configurations and settings described in the doc Chris pointed out. Be careful to follow all the instructions.
As is often the case, templates provided by Visual Studio do not necessarily follow the way the Microsoft docs show (e.g. doc: app.MapBlazorHub(); , template: app.UseEndpoints(endpoints => { endpoints.MapBlazorHub(); });).
Passing parameters to layouts can be done through App.razor. In case of MVC project, (i) Create the parameter data and let public IActionResult Blazor() to pass it to _Host.cshtml via ViewBag, (ii) Let _Host.cshtml to pass the parameter data to App.razor by setting param-[paramname]="#ViewBag.xxxx", (iii) Receive the parameter at App.razor which in turn passes it to descendants as CascadingValue and finally (iv) Let any descendants to consume it as CascadingParameter. Passing non-serializable parameter to Blazor components is not allowed at the time of this posting, but creating a dictionary for layout settings and passing it in JSON format could be one solution for a centralized management of various layouts.
I am trying to hide/show a div if a form-input has a value. This works just fine with a regular form but if I implement it with netlify-forms I get the following error:
Unhandled promise rejection TypeError: "setting getter-only property "message""
<form name="newsletter" method="POST" data-netlify="true">
<input #input="email = $event.target.value" type="email" name="email">
<div :class="{'hidden': email === ''}">
<div data-netlify-recaptcha="true" />
</div>
</form>
I also tried #focus and #blur instead of #input but the error is always the same.
Without the data-netlify="true" it works as expected so I suspect it to have something to do with Netlify injecting something into the form.
In Netlify's guide on Netlify Forms + Vue, they say that the way SPAs are rendered can prevent Netlify's bots from HTML-editing the form to link it with their services.
By default Vue renders client side but the Netlify post processing bots expect HTML on site deploy. Any netlify form attribute tags included in a Vue app would only be inserted into the DOM client-side, rather than in the HTML and thereby runs the risk of being totally overlooked by the build bots.
To handle this, you have two options. You can either pre-render your application or add the netlify form to your static HTML file in your public folder.
So either pre-render your HTML (which gives an added speed and SEO bonus), or give netlify a static form to attach itself to, which you can then hide and replace with your nice Vue form on the client.
Is it possible to add an Aurelia top level component without the router?
The goal is to create a component without the router since my application doesn't need any url based navigation.
From what I can tell Aurelia seems to take you down a path where components are instantiated via routing based on how the component is registered with the router.
Instead I would like to just add markup for the top level component on the main index.html page:
<my-component bind.current="'123456'"></my-component>
I would like define components without a router and only use the templating and data binding capabilities of Aurelia.
Is that possible?
Tried this in index.html (inside the body tag of the default project)
<require from='./dist/my-component'></require>
<my-component></my-component>
But it does not seem to pick it up. Ideally I would like to just define it in markup on a page served from the server since it would enable me to sett attributes dynamically on the elements
<my-component current.bind={{someServerGeneratedId}}></my-component>
In the above I would use a templating framework like mustache to dynamically render the Aurelia when the page is served from the server.
I could wrap the component in another "landing" component, but that makes it hard to benefit from setting things up with server generated bindings.
UPDATE:
Per Rob's response: https://github.com/aurelia/framework/issues/175#issuecomment-126965417
- He is expecting to add the ability to add a root component to the landing page in a future release. I understand there are ways to not use the router, but it still depends on pulling in a partial view during bootstrapping of the application. This does not use the router directly, but conceptually this is really just an implied/convention based client side nav. In the end there is a client side request to pull in the view, which means I can't generate the html dynamically from the initial server response.
Yes you can do this very easily without the router. Just remove the router configuration from your app.js and in app.html remove the router code there as well.
I think the issue you are running in to is that you are specifying the dist folder again in your index.html. You should just reference it like this -
<require from="my-component"></require>
<my-component current.bind="someServerGeneratedId"></my-component>
This will bind up correctly.
I guess you're missunderstanding the route concept here.
At the time of writing, Aurelia's index.html page is your initial page where you put your "loading" stuff and where Aurelia bootstraps the entire app.
So, you can't put a custom component directly on it, but that should not be a problem.
If you don't change any configuration on Aurelia, it will look for your app.html to bootstrap your app, and there you can have anything you want (routes or not, doesn't matter). So, you should put your component there, beside the other tags/components/etc you need.
I've made a plunker without any routing and with a custom component in the app.html, and something simulating what you need.
<template>
<require from='./my-component'></require>
<my-component current.bind="serverGeneratedID"></my-component>
</template>
http://plnkr.co/edit/mLb8Ym638b4V2e9LDp0A?p=preview
If you need anything else, comment here and I'll try to go further.