Creating Your First Blazor App

By Ashwin Venugopal -

 





Creating a Blazor Server Application

To start, we will create a Blazor Server application:

  • Start Visual Studio 2019.

  • Press Create a new project, and in the search bar, type blazor.

  • Select Blazor App from the search results and press Next.

  • Now name the project. Name the application MyBlogServerSide, change the solution name to MyBlog, and press Create.

  • Next, choose what kind of Blazor app we should create. Select .NET 5.0 (Current) from the drop-down menu and press Create.

  • Now run the app by pressing Ctrl + F5 (we can also find it under the Debug | Start without debugging).

Your first Blazor Server application is ready. Explore the site a bit, navigate to Counter and Fetch data to get a feeling for the load times, and see what the sample application does.

This project is based on Blazor Server, which implies that each interaction (such as clicking a button) sends a command through SignalR to the server. The server will then re-render the component and transmit the updates back to the client to refresh the UI. Open the developer tools in your browser by pressing F12, navigate to the Network tab, and refresh the page by hitting F5. You will observe all the files being downloaded to the browser.

When you go to the Counter page and click the Click me button, you'll see that the page remains unchanged. The action is communicated to the server via SignalR, where the page is re-rendered, compared to the render tree, and only the specific changes are sent back through the WebSocket.

For a button click, three calls are being made:

  1. The page triggers the event (for example, a button click).
  2. The server responds with the changes.
  3. The page then sends back a response to acknowledge that the Document Object Model (DOM) has been updated.

Now we have created a solution and a Blazor Server project and tried it out.

Creating a WebAssembly Application

We will create a new Blazor WebAssembly app:

  • Right-click on the MyBlog solution and select Add | New Project.

  • Search for Blazor, select Blazor WebAssembly App in the search results, and press Next.

  • Name the app MyBlogWebAssembly. Leave the location as is (Visual Studio will put it in the right folder by default) and press Create.

  • On the next screen, select .NET 5.0 (Current) from the dropdown.

  • In a dialog box, two new choices appear that were not available in the Blazor Server template. The first option will be ASP.NET Core hosted, which will create an ASP. NET backend project and will host the WebAssembly app, which is good if you want to host web APIs for your app to access. You should check this box. The second option is Progressive Web Application, which will create a manifest.json file and a service-worker.js file that will make your app available as a Progressive Web Application (PWA). Leave it unchecked.

  • Right-click on the MyBlogWebAssembly.Server project and select Set as Startup Project.

  • Run the app by pressing Ctrl + F5 (start without debugging).

Your first Blazor WebAssembly application is ready. Explore the site by clicking the Counter and Fetch data links.

Conclusion

We have successfully created our first Blazor Server Application and Blazor WebAssembly Application.


















































Comments

Post a Comment

Popular posts from this blog

Deployment (Part 3)

By Ashwin Venugopal -
Image
  To read part 1, please click  here To read part 2, please click  here Microsoft Monitoring Agent (MMA) MMA is used across multiple Microsoft solutions and has undergone a few name changes as its features and functionality have evolved. If it is being considered to be used, then following areas should be covered during a Microsoft Sentinel deployment project: Consider the timelines and the strategy for a migration to AMA (Azure Monitor Agent) before the MMA end-of-life.  Consider the central deployment and management methodology for MMA. Determine which endpoints are in scope for deployment as these affect the log ingestion volume significantly.  Azure Monitor Agent (AMA) Organizations with MMA as the main Microsoft Sentinel agent should start planning the migration to AMA as soon as possible to avoid a rushed migration. One of the main advantages of AMA is the ability to control the log collection policy centrally and apply different policies against different...
Read more

Deployment (Part 1)

By Ashwin Venugopal -
Image
  To read part 2, please click  here To read part 3, please click  here Azure Resources Microsoft Sentinel needs following resources to be created: Subscription (if a dedicated subscription(s) will be used) Resource group(s) Log Analytics workspace(s) Automation rules/playbook Alert rules Workbooks Microsoft Sentinel offers hundreds of alert rules, workbooks, and automation playbook templates along with hunting scripts. The templates can be used to activate/deploy schedule alerts, create customized dashboards, create automation playbooks and perform threat-hunting activities. Generally, once deployed, the resources created have to be adjusted to match the existing environment, configure local credentials, etc. Methods of deployment: Manual- Administrator can manually configures the Microsoft Sentinel resources with the help of Azure portal. Any manual process has the inherent risks of human operator error, lack of compliance with potential change control procedures, and u...
Read more

Deployment (Part 2)

By Ashwin Venugopal -
Image
  To read part 1, please click  here To read part 3, please click  here Microsoft Sentinel Content Hub Content in Microsoft Sentinel includes any of the following types: Data connectors offer log ingestion from different sources into Microsoft Sentinel. Parsers give log formatting/transformation into ASIM formats, supporting usage across various Microsoft Sentinel content types and scenarios. Workbooks provide monitoring, visualization, and interactively with data in Microsoft Sentinel, highlighting meaningful insights for users.  Analytics rules give alerts that point to relevant SOC actions via incidents.  Hunting Queries are used by SOC teams to proactively hunt for threats in Microsoft Sentinel. Notebooks help SOC teams in using advanced hunting features in Jupyter and Azure Notebooks. Watchlists support the ingestion of specific data for enhanced threat detection and reduced alert fatigue.  Playbooks and Azure Logic Apps Custom Connectors provide featu...
Read more