Managing State (Part 3)

By Ashwin Venugopal -

 




Implementing WebAssembly

We will use Blazored.SessionStorage for Blazor WebAssembly:

  • Right-click on the Dependencies node under the MyBlogWebAssembly.Client project and select Manage Nuget Package.

  • Search for Blazored.SessionStorage and click Install.

  • Right-click on the MyBlogWebAssembly.Client project and select Add|New Folder. Name the folder Services.

  • Select the new folder and press Shift+ F2. Name the file MyBlogBrowserStorage.cs.

  • Open the new file and replace the content with code.

  • In the Program.cs file, add the following namespaces-

using Blazored.SessionStorage;

using MyBlog.Shared.Interfaces;

using MyBlogWebAssembly.Client.Services;

  • Add code just above await builder.Build().RunAsync();

 Then we add our configuration for IBrowserStorage, but in this case, we return MyBlogBrowserStorage when we ask the dependency injection for IBrowserStorage.

Implementing the shared

We also need to implement some code that calls the services we just created:

  • In the MyBlog.Shared project, open Pages/Admin/BlogPostEdit.razor. We are going to make a couple of changes to the file.

  • Inject IBrowserStorage-

@inject MyBlog.Shared.Interfaces.IBrowserStorage storage

  • In the OnParameterSetAsync method, we load post if Id is not null. Also add an else clause to the if statement. When we load a file and Id is null, this means we are editing a new file and then we can check whether we have a file saved in browser storage.

  • We need UpdateHTML method to become async. If Id on the blog post is 0 (zero), we will store the post in the browser storage. Make sure to change all the references from UpdateHTML to UpdateHTMLAsync.

  • In the MyBlog.Data.Shared project in the Models/BlogPost.cs file, instantiate the Tags collection. like this-

  • public ICollection <Tag> Tags { get; set; } = new Collection <Tag> ();

Now it's time to test the implementation:

  • Right-click on MyBlogServerSide, select Set as Startup Project, and run the project by pressing Ctrl+ F5.

  • Log in to the site (so we can access the admin tools).

  • Click Blog posts followed by New blog post.

  • Type anything in the boxes, and as soon as we type something in the text area, it will save the post to storage.

  • Click Blog posts (so we navigate away from our blog post).

  • Click New blog post and all the information will still be there.

You should see one post with the key EditCurrentPost, and the value of that post should be an encrypted string.

Let's test the Blazor WebAssembly next:

  • Right-click on MyBlogWebAssembly.Server, select Set as Startup Project, and run the project by pressing Ctrl+ F5.

  • Log in to the site (so we can access the admin tools).

  • Click Blog posts and then New blog post.

  • Type anything in the boxes, and as soon as we type something in the text area, it will save the post to storage.

  • Click Blog posts (so we navigate away from our blog post).

  • Click New blog post and all the information should still be there.

You should see one post with the key EditCurrentPost, and the value of that post should be a JSON string. If we were to change the data in the storage, it would also change in the application, so keep in mind that this is plain text, and the end user can manipulate the data.

Conclusion

We have successfully implemented as well as protected browser storage for Blazor Server and session storage for Blazor WebAssembly.

















Comments

Post a Comment

Popular posts from this blog

Information Protection Scanner: Resolve Issues with Information Protection Scanner Deployment

By Ashwin Venugopal -
Image
  About If you are experiencing problems with the Microsoft Purview Information Protection scanner, check the health of your deployment by utilizing the Start-ScannerDiagnosticsPowerShell cmdlet to start the scanner diagnostic tool. The diagnostics tool checks the following details and then creates a log files with the results: Whether the database is up to date. Whether network URLs are accessible. Whether there's a valid authentication token and policy can be acquired. Whether the profile is defined in the Azure portal. Whether offline/online configuration exists and can be acquired. Whether the rules configured are valid.  The Start-ScannerDiagnostics command does not perform a comprehensive check of prerequisites. If you encounter problems with the scanner, you need to verify that your system meets the scanner's requirements, and that your scanner's configuration and installation are finished.  Verify Scanning Details Per Scanner Node and Repository Run the Get-ScanSt...
Read more

How AMI Store & Restore Works?

By Ashwin Venugopal -
Image
  CreateStoreImageTask The CreateStoreImageTask API stores an AMI as a single object in an S3 bucket. The API initiates a task that collects all the data from the AMI and its associated snapshots, subsequently using an S3 multipart upload to store this data in an S3 object. It gathers all elements of the AMI, including most of the non-Region-specific metadata and all EBS snapshots included in the AMI, and consolidates them into a single object in S3. During the upload process, the data is compressed to minimize the space utilized in S3, which means that the S3 object could be smaller than the total sizes of the snapshots in the AMI. If the account making this API call has access to AMI and snapshot tags, they will be retained. The S3 object shares the same ID as the AMI, except it has a .bin extension. Additionally, the S3 metadata tags for the object include the AMI name, AMI description, AMI registration date, AMI owner account, and a timestamp indicating when the store operation...
Read more

Create A Store Image Task

By Ashwin Venugopal -
Image
  Introduction When you save an AMI in an S3 bucket, a task for storing the image is initiated. This store image task allows you to track the progress and result of the procedure. Securing your AMIs It is crucial to verify that the S3 bucket is set up with adequate security to protect the content of the AMI and that this security is upheld for the entire duration that the AMI objects are stored in the bucket. If this cannot be achieved, it is advisable to refrain from using these APIs. Make sure that public access to the S3 bucket is prohibited. It is suggested to activate Server-side encryption for the S3 buckets where you keep the AMIs, even though it’s not mandatory. When AMI snapshots are transferred to the S3 object, they are sent over TLS connections. It is possible to save AMIs that contain encrypted snapshots; however, the snapshots will be decrypted during the storing process. Identify the source AMI used to create a new Amazon EC2 AMI You can determine the AMI that was us...
Read more