Coding With David

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 initial rel

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 am going to use for my common dialog.   But first, I want my dialogs to be modals.   For this I just used Chris Sainty's Blazored Modal NuGet package.   You can see how to us

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)                 {                     <div class="col-xs-12 col-sm-8 col-md-6">                         <div class="">                             <div class="c

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">             <div class="input-group">                 <input type="text" class="form-control" name="x" placeholder="Search term...&qu