9 | About
10 |
11 |
12 |
13 | @Body
14 |
15 | Weather forecast
2 | 3 |This component demonstrates fetching data from the server.
4 | 5 |Loading...
6 | 7 || Date | 11 |Temp. (C) | 12 |Temp. (F) | 13 |Summary | 14 |
|---|---|---|---|
| {{ forecast.date }} | 19 |{{ forecast.temperatureC }} | 20 |{{ forecast.temperatureF }} | 21 |{{ forecast.summary }} | 22 |
Hello, world!
2 |Welcome to your new single-page application, built with:
3 |-
4 |
- ASP.NET Core and C# for cross-platform server-side code 5 |
- Angular and TypeScript for client-side code 6 |
- Bootstrap for layout and styling 7 |
To help you get started, we've also set up:
9 |-
10 |
- Client-side navigation. For example, click Counter then Back to return here. 11 |
- Angular CLI integration. In development mode, there's no need to run
ng serve. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.
12 | - Efficient production builds. In production mode, development-time features are disabled, and your
dotnet publishconfiguration automatically invokesng buildto produce minified, ahead-of-time compiled JavaScript files.
13 |
The ClientApp subdirectory is a standard Angular CLI application. If you open a command prompt in that directory, you can run any ng command (e.g., ng test), or use npm to install extra packages into it.
Error.
8 |An error occurred while processing your request.
9 | 10 | @if (Model.ShowRequestId) 11 | { 12 |
13 | Request ID: @Model.RequestId
14 |
Development Mode
18 |19 | Swapping to the Development environment displays detailed information about the error that occurred. 20 |
21 |22 | The Development environment shouldn't be enabled for deployed applications. 23 | It can result in displaying sensitive information from exceptions to end users. 24 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 25 | and restarting the app. 26 |
27 | -------------------------------------------------------------------------------- /src/ContactsAngular/Pages/Error.cshtml.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Diagnostics; 4 | using System.Linq; 5 | using System.Threading.Tasks; 6 | using Microsoft.AspNetCore.Mvc; 7 | using Microsoft.AspNetCore.Mvc.RazorPages; 8 | using Microsoft.Extensions.Logging; 9 | 10 | namespace ContactsAngular.Pages 11 | { 12 | [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)] 13 | public class ErrorModel : PageModel 14 | { 15 | private readonly ILoggerSorry, there's nothing at this address.
8 |Contact List
7 | 8 | @if (_contacts == null) 9 | { 10 |Loading...
11 | } 12 | else 13 | { 14 || Name | 18 |Address | 19 |City | 20 |State | 21 |Postal Code | 22 |Phone | 23 ||
|---|---|---|---|---|---|---|
| @contact.Name | 31 |@contact.Address | 32 |@contact.City | 33 |@contact.State | 34 |@contact.PostalCode | 35 |@contact.Phone | 36 |@contact.Email | 37 |
Counter
4 | 5 |Current count: @currentCount
6 | 7 | 8 | 9 | @code { 10 | private int currentCount = 0; 11 | 12 | private void IncrementCount() 13 | { 14 | currentCount++; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/ContactsBlazorServerApp/Pages/Error.razor: -------------------------------------------------------------------------------- 1 | @page "/error" 2 | 3 | 4 |Error.
5 |An error occurred while processing your request.
6 | 7 |Development Mode
8 |9 | Swapping to Development environment will display more detailed information about the error that occurred. 10 |
11 |12 | The Development environment shouldn't be enabled for deployed applications. 13 | It can result in displaying sensitive information from exceptions to end users. 14 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 15 | and restarting the app. 16 |
-------------------------------------------------------------------------------- /src/ContactsBlazorServerApp/Pages/FetchData.razor: -------------------------------------------------------------------------------- 1 | @page "/fetchdata" 2 | 3 | @using ContactsBlazorServerApp.Data 4 | @inject WeatherForecastService ForecastService 5 | 6 |Weather forecast
7 | 8 |This component demonstrates fetching data from a service.
9 | 10 | @if (forecasts == null) 11 | { 12 |Loading...
13 | } 14 | else 15 | { 16 || Date | 20 |Temp. (C) | 21 |Temp. (F) | 22 |Summary | 23 |
|---|---|---|---|
| @forecast.Date.ToShortDateString() | 30 |@forecast.TemperatureC | 31 |@forecast.TemperatureF | 32 |@forecast.Summary | 33 |
Hello, world!
4 | 5 | Welcome to your new app. 6 | -------------------------------------------------------------------------------- /src/ContactsBlazorServerApp/Pages/_Host.cshtml: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @namespace ContactsBlazorServerApp.Pages 3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 4 | @{ 5 | Layout = null; 6 | } 7 | 8 | 9 | 10 | 11 | 12 | 13 |
24 |
25 | An error has occurred. This application may no longer respond until reloaded.
26 |
27 |
28 | An unhandled exception has occurred. See browser dev tools for details.
29 |
30 | Reload
31 | 🗙
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/src/ContactsBlazorServerApp/Program.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using System.Collections.Generic;
3 | using System.IO;
4 | using System.Linq;
5 | using System.Threading.Tasks;
6 | using Microsoft.AspNetCore;
7 | using Microsoft.AspNetCore.Hosting;
8 | using Microsoft.Extensions.Configuration;
9 | using Microsoft.Extensions.Hosting;
10 | using Microsoft.Extensions.Logging;
11 |
12 | namespace ContactsBlazorServerApp
13 | {
14 | public class Program
15 | {
16 | public static void Main(string[] args)
17 | {
18 | CreateHostBuilder(args).Build().Run();
19 | }
20 |
21 | public static IHostBuilder CreateHostBuilder(string[] args) =>
22 | Host.CreateDefaultBuilder(args)
23 | .ConfigureWebHostDefaults(webBuilder =>
24 | {
25 | webBuilder.UseStartup
8 |
16 |
--------------------------------------------------------------------------------
/src/ContactsBlazorServerApp/Shared/NavMenu.razor:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
31 |
32 |
33 | @code {
34 | private bool collapseNavMenu = true;
35 |
36 | private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
37 |
38 | private void ToggleNavMenu()
39 | {
40 | collapseNavMenu = !collapseNavMenu;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/ContactsBlazorServerApp/Startup.cs:
--------------------------------------------------------------------------------
1 | using System;
2 | using Apis;
3 | using Microsoft.AspNetCore.Builder;
4 | using Microsoft.AspNetCore.Hosting;
5 | using Microsoft.Extensions.Configuration;
6 | using Microsoft.Extensions.DependencyInjection;
7 | using Microsoft.Extensions.Hosting;
8 | using ContactsBlazorServerApp.Data;
9 |
10 | namespace ContactsBlazorServerApp
11 | {
12 | public class Startup
13 | {
14 | public Startup(IConfiguration configuration)
15 | {
16 | Configuration = configuration;
17 | }
18 |
19 | public IConfiguration Configuration { get; }
20 |
21 | // This method gets called by the runtime. Use this method to add services to the container.
22 | // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
23 | public void ConfigureServices(IServiceCollection services)
24 | {
25 | services.AddRazorPages()
26 | .AddNewtonsoftJson();
27 | services.AddServerSideBlazor();
28 | services.AddSingleton
30 | ```
31 |
32 | #### Using Open Iconic's SVG Sprite
33 |
34 | Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.
35 |
36 | Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. *Tip: To make your icons easily style able, we suggest adding a general class to the* `