I've seen in some sample code that a route template ("{id:int}") on top of razor page causes the links to that page to use another pattern:
https://localhost/Movies/Edit/6
instead of
https://localhost/Movies/Details?id=6
My question is how asp.net manages to change all the links to that pattern, does it know about that page before rendering it?
Does it collaborate with other pages when processing a page?
When the application first starts, a collection of attribute routes are built. The routes are built for any Razor file with an #page directive in the root Pages folder, and for any other routes that have been defined via PageRouteConventions.
When you use the Url helper to generate links, or the anchor tag helper (which uses the Url helper behind the scenes), the link that gets generated is based on the attribute route that was built for the page that you pass to the helper.
In attribute routing, route parameters are added as segments in the URL, which is why the values are not appended as query string values. If you prefer query strings, don't declare route values as part of the #page directive.
Run the dotnet publish -c Release command and take a look inside the bin/Release folder.
You will not find your .cshtml files with html in them. What happaned where did all the html go? And how does this relate to the question?
You gotta remember that cshtml will endup being your regular ol' c# and all that fancy razor templating syntax end's up being c#. This process has many names and transpilation is one of them performed by transpilers.
Okey so now that we can safely assume that when you have a Index.cshtml file it will get populated in to some sort of an object, let's call it RazorPage.cs this will just store all the configuration for this page. Now let's say this index page is living in a folder called Home now we can have a dictionary Dictionary<string, RazorPage> and let's say that the key will be "/Home/Index". Following along based on transpiled #page "{id:int}" syntax, it might generate a template string for the route and store that in the RazorPage in a RouteTemplate parameter.
So when you use asp-page tag helper it will find the correct RazorPage and it can know the template for the url, populating it with the values you provided.
I haven't seen the actual implementation this is just my guess.
My question is how asp.net manages to change all the links to that pattern, does it know about that page before rendering it?
Yes it knows everything about the page at run time. Most likely the services.AddMvc() service takes care of loading in all the razor pages / views / controllers, at startup.
Does it collaborate with other pages when processing a page?
Highly likely no, unless you mean components/layouts/partials. It will however struggle to resolve a page if you have identical route for 2 pages.
Related
I what to use the same razor page in more than one position in my web app.
I have the page /one and I want to reach also with /two and /three.
I can do it with the AddPageRoute :
options.Conventions.AddPageRoute("/one", "two");
options.Conventions.AddPageRoute("/one", "three");
But the taghelpers in the page always render formaction="/three?handler=Update" pointing to the last route, same for /one, /two or /three
This make impossible use the same razor page in different position in my web application.
Git sample : https://github.com/enricoe73/OnePage2Routes.git
You can reach the page using any of the routes you defined, but the outbound URL generation components in the framework (tag helpers, IUrlHelper etc) will always use the last route registered when generating an outbound URL, so the order in which the routes are registered plays a part.
If that doesn't suit you (because you may want to point to different routes at different times, for instance), the solution is to use the standard HTML formaction attribute instead of the custom asp-* attributes that belong to the tag helper:
<button formaction="/two?handler=update">Update</button>
When I build my VueJs application, it automatically imports the app.js and chunk-vendor.js files with the preload attribute. This is great as it speeds up the page load time of my application.
I've looked at #vue/preload-webpack-plugin and I can see that I can preload specific webchunks or assets. This has the effect of preloading those files on all routes.
The thing I would really like to do is preload webchunks based on the initial route that is loaded (the first route the user visits).
Lets say I have two routes; home and accounts. Both of these routes are lazy loaded. When a user opens /home as their first page, I would like to preload the js and css webchunks related to the homepage. If the user initially opens the /accounts page, I would like to preload the webchunks related to the accounts page.
Its not possible to use wildcards in preload statements, so I know I can't do this statically.
Any ideas of how this could work? Has anyone heard of such a project being suggested elsewhere?
EDIT: Something I tried as an experiment was injecting preload headers into my index.html file using the beforeRouteEnter method. Whilst I could see the preload header in my DOM, I found that browsers did not observe the header in time, so the image I was experimenting with was not pre-loaded. In any case, this wouldn't have worked for a dynamically named file, but useful to know.
With SSR it is possible and framework like Nuxt does it automatically, because it builds separate html file for each route. So this html can be "tailored" for this specific route and include/preload all the code route needs...
Without SSR it much harder. #vue/preload-webpack-plugin works by injecting preload links into the index.html at build time and since there is only one index.html for a whole app, you can't make it route dependent (with this plugin). So what Vue CLI does is prefetching all the async chunks by default (clearly preferring speed over bandwidth usage)
I can imagine a solution in the form of Webpack plugin, which replaces preload-webpack-plugin and instead of generating preload/prefetch links at build time just generates some inline script with the map of "route name => chunk name" (some well defined naming convention would be needed) that would inject the links dynamically to the DOM base on the current URL. But even with my "googling skills" I wasn't able to find anything like that...
Say I have a RazorPages application with pages in folders under the Pages folder like in the image below:
pretty standard. I want this application to be available for different clients so that they use different URLs to access it. I can use a #page "/RRate/Index/{sName}" directive in the RRate\Index.cshtml file so that the URL <root>\RRate\Index\client_namewill bind client_name to sName.
My question is: Can I use a URL like <root>\client_name\RRate\Index so that the client name is the first part of the route? How would I implement a route like that?
Not surprisingly, a #page "/{sName}/RRate/Index" directive does not work.
I am using .NET Core 3.1, services.AddRazorPages(); and endpoints.MapRazorPages(); in startup.
I have looked at endpoints.MapDynamicControllerRoute() but this approach does not seem to mesh with Razor pages. Am I wrong?
Well the answer was in the article mentioned by #mj1313.
I added PageRoutes for each page (I wander if there is a way to do this in one route) like the following: options.Conventions.AddPageRoute("/RRate/Index", "{survey}/RRate/Index");.
I'm new to razor pages (used to MVC pattern). I came across some interesting routing pattern I saw on GitHub:
services.AddMvc()
.AddViewLocalization()
.AddDataAnnotationsLocalization()
.AddRazorPagesOptions(options =>
{
options.Conventions.AddPageRoute("/Edit", "/{Slug}/Edit");
options.Conventions.AddPageRoute("/Delete", "{Slug}/Delete");
options.Conventions.AddPageRoute("/Details", "{Slug?}");
options.Conventions.AddPageRoute("/Details", #"Index");
options.Conventions.AddPageRoute("/Create", "{Slug?}/Create");
});
In some projects, I don't see the AddRazorPagesOption
Just out of curiosity, what would happen if I didn't specify routing like this?
The method options.Conventions.AddPageRoute just help you to define custom routing for your pages. So, the razor page:
Edit will have route template /{Slug}/Edit where Slug is a parameter from the URL.
Delete will have route template /{Slug}/Delete where Slug is a parameter from the URL.
Details will have route template /{Slug?} where Slug is a optional parameter from the URL. Also you can go to that page using /Index.
Create will have route template /{Slug?}/Create where Slug is a optional parameter from the URL.
If you remove them all your razor pages will just use the defaut conventions which is folder base convention started the Pages folder as the root folder. For pages that have parameters you should pass them as query parameter in your request URL. For example without the conventions defined you'll have to use /Edit?slug=myValue if you want to go to the Edit page of myValue item. With the convention configured, the URL is pretty because you'll use /myValue/Edit.
I think the configuration you actually have is just here to avoid having parameters of your razor pages to be passed as query parameter in your request URL.
I was hoping someone had any insight on this basic approach. Sample scenario:
I have a dashboard template with menu links a(href "/page") and I want to click the links to render a different section/view on the template. I used block content...but does it need a specific route?
If I understand correctly, you want to update the content of the page on click of the link without the page getting refreshed.
In that case, no you can't do it using block content.
The purpose of block content is to apply inheritance in your templates.
The typical use of block content would be creating a layout and then creating more specific page from the layout. This is what the official documentation says.
The reason why you cannot do it because, jade is server side templating library. This resolves the block content on server. Once rendered in client, the html looses all the information that was specific to jade (which is obvious because its an html afterall).
What you can do here is
Create a /page.jade and make a ajax call to a service. That service should return an already compiled html string. Since you are using jade, you can easily use jade.compile(source, options) to template / generate html.
Jade API documentation here