Coding With David

We all have seen the little “Loading…” message that appears with you are starting up a Blazor client-side application.   A quick text search you can see the text in the index.html page under the wwwroot folder.   It is simple enough to change the text to anything you would like. But what if you wanted to have a cool animated gif or a awesome CSS spinner?   When I first thought about doing this, I googled for it.   I did not find too many examples to work with.   I did find that Telerik has a component for this, but you must buy their tool set.   I took a step back and thought about it.   We are talking about just an HTML page.   Standard Loading: First Try My first step was to create a class with a CSS spinner in it and add that class to: <app class=”myspinner”> </app> Surprisingly, the spinner showed during loading nicely.   Unfortunately, once the first page of the application loaded, the spinner was still going. ...

With the Web Assembly 3.2.0 Preview 3 release of the Blazor Web Assembly template you can now make a Progressive Web Application (PWA).   This can only be done with the web assembly because of the requirements for a PWA. Before we can talk about the Blazor PWA, we need to make sure we understand what a PWA is. Via Wikipedia: “A progressive web application is a type of application software delivered through the web, built using common web technologies including HTML, CSS and JavaScript. It is intended to work on any platform that uses a standards-compliant browser.” The key takeaway from the definition is the “works on any platform”.  Don’t just mobile, but Windows, Mac and even Chrome Book. PWAs is not a new technology, it is just HTML, JS and CSS.  It is the packaging of these that make it a PWA. Why build a PWA Like most decision in development, the answer depends.   Sometimes this answer can be decided for non-technical reasons, Marketing,...

With the latest release of Blazor Web Assembly 3.2.0 Preview 3.0 they have made great strides in getting the Blazor web assembly version production ready. The official GA release is for May 2020 and there will be at least 3 more preview release between now and the GA release.  See the ASP.Net Blog post for the latest instructions on how to install and run the latest preview. What's in this preview: 1. .Net Standard 2.1 2. Standalone and hosted models 3. IL trimming 4. Web Sockets 5. .Net SignalR Client 6. Static Web assets 7. Authentication and authorization 8. Progress Web Application template 9. Localization and Globalization 10. External Configuration files 11. Debugging 12 Compression .Net Standard 2.1 You can now use .Net Standard 2.1 Library projects in your Blazor web assembly projects Standalone and Hosted models These 2 hosting model s are back.  These were available when the web assembly model was first released but remover be the initia...

Use case: Most applications use some type of confirmation dialog to validate that a user really wants to do an action such we delete a record or leave a page without saving.   Some need a simple form to allow the user to input a simple value, rename an object etc. For this project I went with the server-side application, but everything would work the same for the client-side application.   See Blazor.Net for a description of the difference. Needing these myself, I thought it would be good to create a Common Dialog component to use in my allocation. The first step was to identify what are the common parts.   I came up with these: Common Dialog           1.        Heading           2.        Message           3.        An action to perform So, these are the parameters I...

Well this exercised turned out to be a little surprising.   It turns out the use of UI cards is mainly controlled and implemented by the CSS framework you are using.   In my case bootstrap.   I still wanted to see how to implement the UX of using cards instead of a list or data grid. For this, I am using the standard Server Blazor project template.   It does not matter if you are using Server or Client side for this project.   Both work the same. I am taking the Forecast page of the template and changing from using the html table to using html cards.     To implement this, I just replace the table HTML with the HTML for Cards:         <div class="container">             <div class="row">                 @foreach (var forecast in forecasts)                 {           ...

Use case:   User want to be able to search the records for matching data.   The user does not want to have to learn complex query syntax or a coded language.   They want our search to work like Googles, you just type in words and it finds it for you. Now that we have a usable data grid for our applications, [SimpleGrid] , we will be adding a search box to it.   These are the steps we will need to take to add a search box to our application.     1.        Add the UI        2.        Wire in the On click event     3.        Allow the user to “clear” the search results Before Search View Search Box UI There is nothing really special about our search box HTML:     <div class="row searchactionrow">         <div class="col-md-6">         ...