Blogs by Ashwin

  Storing Data On Server Side There are numerous methods available for storing data on the server. It's important to keep in mind that Blazor WebAssembly will always require an API. In contrast, Blazor Server can access server-side resources directly without needing an API. If you're developing a Blazor Server application and don't want to switch to Blazor WebAssembly, you should choose direct access. We can initially utilize direct server access and transition to an API later if we choose to. In terms of data storage options, we have the ability to store data in Blob storage, key-value storage, a relational database, or table storage. The options are virtually limitless. As long as .NET can interact with the technology, we can implement it. Storing Data In URL Data, in this case, could refer to the ID of the blog post or the specific page number when pagination is being utilized. To read a parameter from the URL, we can use the following syntax- @page "/post...

  JavaScript To .NET There are three ways of doing a callback from JavaScript to .NET code: • Static .NET method call • Instance method call • Component instance method call Static .NET Method Call To invoke a .NET function using JavaScript, we should declare the function as static and apply the JSInvokable attribute to the method. Instance Method Call This method is a little bit tricky. We need to pass an instance of the .NET object to be able to call it. First, we need a class that will handle the method call. This class accepts a string (a name) as an argument in its constructor, along with a method named SayHello that produces a string comprising “Hello,” followed by the name provided during the instance creation. We should start by creating an instance of that class, providing it with a name, and generating a DotNetObjectReference<T> to enable JavaScript to interact with the instance. However, we first need the JavaScript code that can invoke the .NET method. There a...

  Why Do We Need JavaScript? Blazor requires JavaScript to function. Certain events are only activated in JavaScript, and to utilize these events, we must implement an interop. A couple of libraries that depend on JavaScript to function are named Blazm.Components and Blazm.Bluetooth . The first component is a grid that leverages JavaScript interop to initiate C# code (JavaScript to .NET) when the window is resized, eliminating columns if all cannot fit within the window. When this occurs, the C# code invokes JavaScript to obtain the dimensions of the columns based on the client width, a detail known only to the web browser, and removes columns as necessary based on that information. The second component, Blazm.Bluetooth , allows for interaction with Bluetooth devices using Web Bluetooth, a web standard accessible via JavaScript. It uses two-way communication. Bluetooth events can trigger C# code that can iterate over devices and send data to them. They are both open-source. .NET T...

  Making The Blog Look Like A Blog In the MyBlog.Shared project, open the Pages/index.razor file. We no longer need fake blog posts, so let's remove the button from the top of the page, as well as the <br /> tag. Remove the AddSomePosts method. Now, when we have an admin, we can create our posts. Inside the Virtualize component, change the content (RenderFragment). Also remove the <ul> tag. Add a using statement for Markdig at the top of the file- @using Markdig; Add an OnInitializedAsync method that will handle the instantiation of the Markdig pipeline. Now, run the project using Ctrl + F5 and take a look at our new front page. Sharing Problems In the MyBlog.Shared project, open Pages/Admin/BlogPostEdit.razor . Always perform null checks. Add a null check around the category loop. Add a null check around the tag loop. Note- It's good to keep in mind to always check for nulls, but sometimes these things sneak past us. When sharing code, it is always goo...

  Adding CSS To MyBlogServerSide Open Pages/_Host.cshtml .   Remove these rows- <link rel = “stylesheet” href = “css/bootstrap/bootstrap.min.css” /> <link href = “css/site.css” rel = “stylesheet” /> Add a reference to the new stylesheet (containing both Bootstrap and the BootSwatch Darkly theme)- <link rel = “stylesheet” href = “_content/MyBlog.Shared/MyBlogStyle.min.css” /> Open App.Razor and, in the router component, add the following as an additional property- AdditionalAssemblies="new[] { typeof(MyBlog.Shared.Pages. Index).Assembly}" In _Imports.Razor , add the following namespaces- @using MyBlog.Shared @using MyBlog.Shared.Shared Set MyBlogServerSide as the start-up project and run the project by pressing Ctrl + F5 . Adding CSS To MyBlogWebAssembly.Client In the MyBlogWebAssembly.Client project, open wwwroot/index.html : Remove the following lines- <link href = “css/bootstrap/bootstrap.min.css” rel = “stylesh...

  Adding Static Files Blazor has the capability to utilize static files like images, CSS, and JavaScript. By placing our files in the wwwroot folder, they will be automatically available online and reachable from the main directory of our website. One advantage of Blazor is that we can also accomplish this with a library, making it incredibly simple to share static files through a library. Blazor ultimately relies on HTML, which can be styled with CSS. As noted earlier, the default Blazor templates utilize Bootstrap, and we will also stick with that. You can find a fantastic website featuring user-friendly Bootstrap themes that are available for download at https://bootswatch.com/ . CSS versus LESS versus SASS CSS represents Cascading Style Sheets, which allows you to apply styles to the appearance of your website. LESS denotes Leaner Style Sheets and builds upon CSS. SASS, or Syntactically Awesome Style Sheets, functions similarly to LESS. SASS requires less coding and is simpler...

  Cleaning Up The Shared Files Let's make sure the moved files have matching namespaces: In the MyBlog.Shared project, change the namespace to MyBlog.Shared . Components on the following files- Components/BootstrapFieldCssClassProvider.cs Components/ CustomCssClassProvider.cs Remove @using MyBlogServerSide.Components from the following files- Pages/Admin/BlogPostEdit.razor Pages/Admin/BlogPostList.razor Pages/Admin/CategoryList.razor Pages/Admin/TagList.razor In the MyBlog.Shared project, add the following namespaces to the _Imports.razor file - @using MyBlog.Shared @using MyBlog.Shared.Components We have cleaned up a couple of new projects. Adding The API Perform the following steps: In the MyBlogWebAssembly.Client project, open Program.cs and add the following- builder.Services.AddScoped <IMyBlogApi>; MyBlogApiClientSide >(); Add the following namespaces at the top of the file- using MyBlog.Data; using MyBlog.Data.Interfaces; Delete the Pages/Index.razor file (sin...

  Setting Up The API Only Blazor WebAssembly requires access to the Web API because it lacks direct access to the database. For Blazor Server, it's likely that the most prevalent architecture involves utilizing a Web API as well. We need to transfer the files we can share into a different library. To accomplish this, please follow these steps: Right-click on the MyBlog solution and select Add | New Project. Search for Class Library (.NET Core) and then click Next. Name the project MyBlog.Data.Shared and keep the location as is and then click Create.   Select target framework .NET 5.0 (Current) and then click Create. Right-click on the Dependencies node under the MyBlogWebAssembly.Client project. Click Add project reference, check the MyBlog.Data.Shared and MyBlog.Shared checkboxes, and then click OK. Move the following files from the MyBlog.Data project to MyBlog.Data. Shared: Extension - folder Interfaces - folder Models/BlogPost.cs Models/Category.cs Models/Tag.cs MyBl...