I have created a abp.io project with Blazor on the front end. I noticed that the blazor app does not have App.razor file and also the startup.cs class. I want to register a service I have created and need the startup.cs class for that. Can anyone expalin why the project files are deifferent from a regular blazor app?
- ABP Framework version: v3.2.1
- UI type: Blazor
13 Answer(s)
-
0
Hi,
App.razor file is in the theme module, you can register the service in the Module class.
-
0
@liangshiwei
I was able to find the module class where I can register the service. But I am not able to find the app.rzor file. Where exactly is the theme module located?
-
0
HI,
Why you want find the app.razor file? It is in the LeptonTheme module.
-
0
@liangshiwei
The UI I am trying to build uses different set of style for the dashboard sidebar and top menu. I was planning to edit the leptop theme to fit my requirements since none of the 6 lepton themes are matching with what I want. Is there a better way to do this?
-
0
app.razor is a very simple razor file. see https://github.com/abpframework/abp/blob/dev/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme/Themes/Basic/App.razor
tell me what you want to add to this, so that we can add extension points to this class.
-
0
@alper
I want the change the default layout theme mentioned in the App.razor file. I want to use a Metronic layout instead of the Leptom theme as my default. where exactly is the app.razor file located? In the abp.io commerical projec I have downloaded, I cannot find any 'Themes' folder.
-
0
Hi @apoorva.lele,
Themes are distributed as NuGet packages. In this way, you will be able to upgrade it whenever we release a new version. The NuGet package for the Lepton Theme is Volo.Abp.AspNetCore.Components.WebAssembly.LeptonTheme. You can find it as a package reference in the
*.Blazor.csprojfile of your solution.App.razoris located inside the theme (in theVolo.Abp.AspNetCore.Components.WebAssembly.LeptonThemepackage for this case). So, it is not in your solution and you can not directly manipulate it.If you have a Business or Enterprise license, you can download the source code of the Lepton Theme to investigate its content. But, if you don't want to use the Lepton Theme, then you don't need that. In this case, you should implement your own theme. In this case, it would be a good feedback for us if you tell why you prefer the Metronic Theme overthe Lepton Theme?
Anyway, creating a theme is not a complex thing. Just documented the Theming for the Blazor UI: https://docs.abp.io/en/abp/4.0/UI/Blazor/Theming (this is for v4.0 that is in preview release: 4.0.0-rc.3).
We also documented the Basic Theme (https://docs.abp.io/en/abp/4.0/UI/Blazor/Basic-Theme). The Basic theme is the most minimalist theme based on plain Bootstrap and is a perfect starting point to create a new theme. You just download its source code, change local project references to nuget package references in its project (and vice verse for your own application). The document has the manual installation steps too. When you do that, remember to remove the Lepton Theme NuGet package.
You can then change however you want. Copy Metronic files into your solution, implement the menu and other layout elements. It is not different than doing it for a regular Blazor application. You don't need to get support for it since it has nothing related to the ABP Commercial anymore.
While creating a new theme is simple, implementing all the theme features is really time consuming. This is not because of the ABP. It would be same hard if you start from a plain Blazor application and try to fully implement the Metronic. This is one of the main benefits of the ABP Commercial: We did it for you :) If you haven't a really good reason, I suggest to continue with the Lepton Theme. We will be adding new layouts and styles in the future.
-
0
Hi @hikalkan,
Thanks for the elaborate reponse. Although Lepton does have a wide selection of themes, metronic theme fits well with the current needs of my project. I was able to copy over the metronic js, css bundles into blazor and then place the css and js tags in my index.html file. One issue I am facing is that while the css files are working, the js files are not getting linked to the DOM since they are running before the DOM i rendered. I tries running the JS files in OnAfterRenderAsync for a particular component but it is still not working.
I am aware that this query is not related to abp.io commerical, but if you have an ides of how I can get the js files to work, that would be awesome.
Thanks again !!
-
0
Hi @apoorva.lele,
First of all, mixing JavaScript code with Blazor is not a good idea. The problem you see is just beginning. You may have more problems later. When we've implemented the Lepton Theme to Blazor, we dropped all the JavaScript code and re-written it as Blazor components with C# to be a native Blazor Theme.
OnAfterRenderAsyncseems should work. As you said this is a general Blazor problem, it would be better to ask on Stackoverflow. I would want to help you on that, however, I haven't tried such a thing before, sorry. -
0
According the conversation,
To modify the admin page,
- Delete current Lepton module package.
- Download the source code,
- include it in the project.
- modify and use it.
Do I understan it correctly?
For Team license users, it's not possible to change it. rght?
-
0
This is a bit crazy. So, we buy Team license and we can't change from the fontawesome free icons to the pro? What? I just want to make some adjustments here ..
-
0
@kfrancis, yes this is not a good development experience, therefore we decided to make
Account.ProandLepton Themes source-code downloadable to Team License owners. So you can achieve your requirement. We are working on this new feature and implement the required changes in the next upcoming version. thanks for your understanding. -
0
@alper Thank you, we appreciate that change. We very much understand in general the reason behind that initial decision, but much of this is what people need to do to properly implement abp/abp-commericial in their product. Between that and more theme documents, we love what you're doing.
