You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Create an empty folder, open a command-line terminal and execute the following command in the terminal:
75
75
76
76
````bash
77
-
abp new TodoApp{{if UI=="Blazor"}} -u blazor{{else if UI=="BlazorServer"}} -u blazor-server{{else if UI=="BlazorWebApp"}} -u blazor-webapp{{else if UI=="NG"}} -u angular{{end}}{{if DB=="Mongo"}} -d mongodb{{end}}
77
+
abp new TodoApp{{if UI=="Blazor"}} -u blazor{{else if UI=="BlazorServer"}} -u blazor-server{{else if UI=="BlazorWebApp"}} -u blazor-webapp{{else if UI=="NG"}} -u angular{{else if UI=="MAUIBlazor"}} -u maui-blazor{{end}}{{if DB=="Mongo"}} -d mongodb{{end}}
78
78
````
79
79
80
80
{{if UI=="NG"}}
@@ -113,7 +113,7 @@ abp install-libs
113
113
114
114
> We suggest you install [Yarn v1.22+ (not v2)](https://classic.yarnpkg.com/en/docs/install) to prevent possible package inconsistencies, if you haven't installed it yet.
It is good to run the application before starting the development. Ensure the {{if UI=="BlazorServer"}}`TodoApp.Blazor`{{else}}`TodoApp.Web`{{end}} project is the startup project, then run the application (Ctrl+F5 in Visual Studio) to see the initial UI:
138
138
139
-
{{else if UI=="Blazor"}}
139
+
{{else if UI=="Blazor"|| UI=="MAUIBlazor"}}
140
140
141
141
It is good to run the application before starting the development. The solution has two main applications;
142
142
143
143
*`TodoApp.HttpApi.Host` hosts the server-side HTTP API.
144
+
{{if UI=="Blazor"}}
144
145
*`TodoApp.Blazor` is the client-side Blazor WebAssembly application.
146
+
{{else if UI=="MAUIBlazor"}}
147
+
*`TodoApp.MauiBlazor` is the MAUI Blazor application.
148
+
{{end}}
145
149
146
150
Ensure the `TodoApp.HttpApi.Host` project is the startup project, then run the application (Ctrl+F5 in Visual Studio) to see the server-side HTTP API on the [Swagger UI](https://swagger.io/tools/swagger-ui/):
147
151
@@ -253,7 +257,7 @@ You can apply changes to the database using the following command, in the same c
253
257
dotnet ef database update
254
258
````
255
259
256
-
> If you are using Visual Studio, you may want to use the `Add-Migration Added_TodoItem` and `Update-Database` commands in the *Package Manager Console (PMC)*. In this case, ensure that {{if UI=="MVC"}}`TodoApp.Web`{{else if UI=="BlazorServer" || UI=="Blazor" || UI=="BlazorWebApp"}}`TodoApp.Blazor`{{else if UI=="Blazor" || UI=="NG"}}`TodoApp.HttpApi.Host`{{end}} is the startup project and `TodoApp.EntityFrameworkCore` is the *Default Project* in PMC.
260
+
> If you are using Visual Studio, you may want to use the `Add-Migration Added_TodoItem` and `Update-Database` commands in the *Package Manager Console (PMC)*. In this case, ensure that {{if UI=="MVC"}}`TodoApp.Web`{{else if UI=="BlazorServer" || UI=="Blazor" || UI=="BlazorWebApp"}}`TodoApp.Blazor`{{else if UI=="Blazor" || UI=="NG" || UI=="MAUIBlazor"}}`TodoApp.HttpApi.Host`{{end}} is the startup project and `TodoApp.EntityFrameworkCore` is the *Default Project* in PMC.
257
261
258
262
{{else if DB=="Mongo"}}
259
263
@@ -582,11 +586,11 @@ If you open the [Swagger UI](https://swagger.io/tools/swagger-ui/) by entering t
582
586
583
587

584
588
585
-
{{else if UI=="Blazor"|| UI=="BlazorServer"|| UI=="BlazorWebApp"}}
589
+
{{else if UI=="Blazor"|| UI=="BlazorServer"|| UI=="BlazorWebApp"|| UI=="MAUIBlazor"}}
586
590
587
591
### Index.razor.cs
588
592
589
-
Open the `Index.razor.cs` file in the `Pages` folder of the {{if UI=="Blazor"|| UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{else}}*TodoApp.Blazor*{{end}} project and replace the content with the following code block:
593
+
Open the `Index.razor.cs` file in the `Pages` folder of the {{if UI=="Blazor"|| UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{elseif UI=="BlazorServer"}} *TodoApp.Blazor* {{else if UI=="MAUIBlazor"}} *TodoApp.MauiBlazor*{{end}} project and replace the content with the following code block:
This class uses `ITodoAppService` to perform operations for the todo items. It manipulates the `TodoItems` list after create and delete operations. This way, we don't need to refresh the whole todo list from the server.
629
633
630
-
{{if UI=="Blazor"}}
634
+
{{if UI=="Blazor" || UI=="MAUIBlazor"}}
631
635
632
636
See the *Dynamic C# Proxies & Auto API Controllers* section below to learn how we could inject and use the application service interface from the Blazor application which is running on the browser! But now, let's continue and complete the application.
633
637
634
638
{{end # Blazor}}
635
639
636
640
### Index.razor
637
641
638
-
Open the `Index.razor` file in the `Pages` folder of the {{if UI=="Blazor"|| UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{else}} *TodoApp.Blazor* {{end}} project and replace the content with the following code block:
642
+
Open the `Index.razor` file in the `Pages` folder of the {{if UI=="Blazor"|| UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{elseif UI=="BlazorServer"}} *TodoApp.Blazor* {{else if UI=="MAUIBlazor"}} *TodoApp.MauiBlazor* {{end}} project and replace the content with the following code block:
639
643
640
644
```xml
641
645
@page "/"
@@ -677,7 +681,7 @@ Open the `Index.razor` file in the `Pages` folder of the {{if UI=="Blazor" || UI
677
681
678
682
### Index.razor.css
679
683
680
-
As the final touch, open the `Index.razor.css` file in the `Pages` folder of the {{if UI=="Blazor"|| UI=="BlazorWebApp"}}*TodoApp.Blazor.Client*{{else}}*TodoApp.Blazor*{{end}} project and replace it with the following content:
684
+
As the final touch, open the `Index.razor.css` file in the `Pages` folder of the {{if UI=="Blazor"|| UI=="BlazorWebApp"}}*TodoApp.Blazor.Client*{{elseif UI=="BlazorServer"}} *TodoApp.Blazor* {{else if UI=="MAUIBlazor"}} *TodoApp.MauiBlazor*{{end}} project and replace it with the following content:
681
685
682
686
```css
683
687
#TodoList{
@@ -710,7 +714,7 @@ This is a simple styling for the todo page. We believe that you can do much bett
710
714
711
715
Now, you can run the application again to see the result.
Read this document [here](../../framework/ui/mvc-razor-pages/basic-theme.md).
1
+
# Basic Theme
2
+
3
+
The Basic Theme is a minimalist theme that doesn't add any styling on top of the plain [Bootstrap](https://getbootstrap.com/) styles. You can take the Basic Theme as the base theme and build your own theme or styling on top of it. Here, a screenshot from the theme:
0 commit comments