chrissainty / blazor-in-action Goto Github PK

View Code? Open in Web Editor NEW

165.0 18.0 81.0 1.43 MB

Code examples for Blazor in Action

License: MIT License

HTML 49.98% C# 40.85% CSS 3.67% SCSS 3.83% JavaScript 1.66%

blazor-in-action's Introduction

Blazor in Action

Code examples for Blazor in Action

blazor-in-action's People

Contributors

Stargazers

Watchers

Forkers

m2web carlosmoran97 francedot productinfo henrymgalvan wagnerhsu toddforsberg dan5602 shadynagy humbertocabezas egil denvercoder hdouglassjr ericgutt10 bionstt mohamadalitellawi cwalton82 arjunkrishna coder2911 josephwambura nesadkadric bgenekelly mpaulohs lisovvital martins-vds celesoft jsavard79 millerdrew aggoode yirenkyi55 sjv83 codemonkey85 mikebrind coalwangqingfu jmptrader c0g1t8 forsakenanton jaumeaguilo rsaa simonthefoot manoelgeraldo yanniecheung joellang bisslot ichibsah volatikus ericmunn hereiznoy chrislangston jolmes stevenelliottjr toannn icoretchi mattheweskolin joyfulreaper hieutrinh1505 thangtnguyen matteoandrea thantoe-aung pradhanrajendrakumar mapadm darrylluther darrix curtisburtus hjoab caseyspaulding azurecloudmonk bsummerfield ali50m sithuis amt-fredrick-amoako mrobinson-dev jfaustogc joriszzz khalilmaster inhosin kariukikungu rbs-toni aid4u vassilis-tsolekas

blazor-in-action's Issues

Out of date

This is already out of date. Can't use as is for .net 7.0

As per the screenshot below, the TrailDto does not like having a property the same name as the enum. I have attempted to resolve this by renaming the enum or the property but nothing I do resolves the error in the EditTrailPage.razor in the SubmitEditTrail method, see screenshot #2. Do you know what I can do to resolve this? Thank you!

Search Filter Component Scoped Style

Hello Chris,

I am having a hard time getting the scoped style to apply to my SearchFilter component to position correctly with the right size just above the results.

The search filter scss file

.filters {
    display: flex;
    margin-bottom: 20px;
    align-items: baseline;
    justify-content: flex-end;

    label {
        text-transform: uppercase;
        margin-right: 10px;
    }

    input {
        margin-right: 20px;
        width: 100px;
    }

    button:first-of-type {
        margin-right: 10px;
    }
}

The SearchFilter razor


@inject NavigationManager NavManager

<div class="filters">
    <label for="maxLength">Max Length</label>
    <input id="maxLength"
           type="number"
           class="form-control"
    @bind="_maxLength" />
    <button class="btn btn-outline-primary"
    @onclick="FilterSearchResults">
        Filter
    </button>
    <button class="btn btn-outline-secondary"
    @onclick="ClearSearchFilter">
        Clear
    </button>
</div>

@code {
    private int _maxLength;

    [Parameter, EditorRequired] public string SearchTerm { get; set; } = default!;

    private void FilterSearchResults() 
        => NavManager.NavigateTo($"/search/{SearchTerm}/maxlength/{_maxLength}");

    private void ClearSearchFilter()
    {
        _maxLength = 0;
        NavManager.NavigateTo($"/search/{SearchTerm}");
    }
}

Snippet of the SearchPage razor


<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Search</li>
    </ol>
</nav>

<h3 class="mt-5 mb-4">Search Results for "@SearchTerm"</h3>

<SearchFilter SearchTerm="@SearchTerm" />

When I inspect the element with Chrome Dev Tools

BlazingTrails.Client.styles.css


/* /Features/Home/SearchFilter.razor.rz.scp.css */
@charset "UTF-8";
ï»¿.filters[b-vca69nmj2w] {
  display: flex;
  margin-bottom: 20px;
  align-items: baseline;
  justify-content: flex-end;
}
ï»¿.filters label[b-vca69nmj2w] {
  text-transform: uppercase;
  margin-right: 10px;
}
ï»¿.filters input[b-vca69nmj2w] {
  margin-right: 20px;
  width: 100px;
}
ï»¿.filters button:first-of-type[b-vca69nmj2w] {
  margin-right: 10px;
}

Elements from the page


<div class="filters" b-vca69nmj2w=""><!--!--><label for="maxLength" b-vca69nmj2w="">Max Length</label>
    <input id="maxLength" type="number" class="form-control" b-vca69nmj2w=""><!--!-->
    <button class="btn btn-outline-primary" b-vca69nmj2w=""><!--!-->
        Filter
    </button><!--!-->
    <button class="btn btn-outline-secondary" b-vca69nmj2w=""><!--!-->
        Clear
    </button></div>

Any ideas what I have done wrong? I have gone over the section several times thinking I missed something, but can't find the issue.

Hi I am facing trouble in running tail sample program

Hi
I am reading your book "Blazor in Action" and running sample code from my desktop
But after 4 chapter running sample code is broken.
I am working on Window 11 Pro and VS 2022 Pro.

Error from dev console in chrome shows belows

blazor.webassembly.js:1 
        
       crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
System.Text.Json.JsonException: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0.
 ---> System.Text.Json.JsonReaderException: '<' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 0.
   at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
   at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
   at System.Text.Json.Utf8JsonReader.ReadFirstToken(Byte first)
   at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
   at System.Text.Json.Utf8JsonReader.Read()
   at System.Text.Json.Serialization.JsonConverter`1[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   --- End of inner exception stack trace ---
   at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
   at System.Text.Json.Serialization.JsonConverter`1[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadCore[Response](JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadCore[Response](JsonReaderState& readerState, Boolean isFinalBlock, ReadOnlySpan`1 buffer, JsonSerializerOptions options, ReadStack& state, JsonConverter converterBase)
   at System.Text.Json.JsonSerializer.ContinueDeserialize[Response](ReadBufferState& bufferState, JsonReaderState& jsonReaderState, ReadStack& readStack, JsonConverter converter, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.<ReadAllAsync>d__65`1[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at System.Net.Http.Json.HttpContentJsonExtensions.<ReadFromJsonAsyncCore>d__4`1[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at System.Net.Http.Json.HttpClientJsonExtensions.<GetFromJsonAsyncCore>d__13`1[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at BlazingTrails.Client.Features.Home.Shared.GetTrailsHandler.Handle(GetTrailsRequest request, CancellationToken cancellationToken) in D:\Blazor\blazor-in-action-main\blazor-in-action-main\chapter-08\BlazingTrails\BlazingTrails.Client\Features\Home\Shared\GetTrailsHandler.cs:line 20
   at MediatR.Pipeline.RequestExceptionProcessorBehavior`2.<Handle>d__2[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at MediatR.Pipeline.RequestExceptionProcessorBehavior`2.<Handle>d__2[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at MediatR.Pipeline.RequestExceptionActionProcessorBehavior`2.<Handle>d__2[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at MediatR.Pipeline.RequestExceptionActionProcessorBehavior`2.<Handle>d__2[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at MediatR.Pipeline.RequestPostProcessorBehavior`2.<Handle>d__2[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at MediatR.Pipeline.RequestPreProcessorBehavior`2.<Handle>d__2[[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[BlazingTrails.Shared.Features.Home.Shared.GetTrailsRequest.Response, BlazingTrails.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
   at BlazingTrails.Client.Features.Home.HomePage.OnInitializedAsync() in D:\Blazor\blazor-in-action-main\blazor-in-action-main\chapter-08\BlazingTrails\BlazingTrails.Client\Features\Home\HomePage.razor:line 70
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
window.Module.s.printErr @ blazor.webassembly.js:1

I guess there is something error get JSON data from API Server but I don't know how to get over this
Please tell me how to run solution correctly

Chapter 6 - Running the EditTrail page, OnInitializedAsync fires twice and page rendering is incorrect

After following the along with the book and working on the EditTrailPage functionality as described in the book, I am noticing that the page's OnInitializedAsync method is executed twice, and the form is not rendered as expected. I have confirmed by stepping through the code that the trail model is in fact complete and all data is present on the model. I am seeing that the logic that the conditional logic that shows or hides the file input or the uploaded image are both displayed and I am also seeing that the input time component is not rendering the time broken out by hours and minutes even though the TimeInMinutes value is defined on the trail model. Has anyone run into this while working through the example application. I did want to mention that I am implementing this in Blazor Server application as opposed to a Blazor WebAssembly application.

UPDATE 5/6/2022
I figured out why the time was not rendering properly and it was just my mistake, I hade not bound the value property to the hours and minutes. The issue with the image inputs still continues and I still see that the OnInitializedAsync gets called twice. Will continue to poke around to see if I can resolve this.

UPDATE 2 5/16/2022
I figured out my mistake will close the issue.

Failed to find valid digest in browser

Just completed listing 5.7 and as suggested in the next paragraph after listing 5.7 I have run the application. I am getting an error (white page, unhandled error message) in Chrome (and also Edge). I've not had any errors up to this point.

I have cleaned the build in VS and rebuilt the solution. Cleared the cache and hard reloaded in Chrome.

Any ideas what has gone wrong and where?

Clone and run error

I've just cloned the repo and tried to run chapter 7 with no changes to the code - with the idea to begin chapter 8 (repo c7 clone is effectively the end of c7).

Everything compiles, but the first error reports that the "Images" folder could not be found for the API. Easy fix, create the folder.

Second run, I get the error:

It looks like the error is on the HomePage.razor, line 71. This error is generated because EntityFramework is having issues and cannot find the 'Trails' table.

Copying an older Sqlite db from my own progress in the book fixes the issue - but it is not the correct fix.

Not sure if this issue will have replicated to the other chapters?

Chapter 9 the call to api/trails returns null

Validation Bug - Route Instruction Description Property Not Being Used

Hi Chris,

Thank you for this amazing book! I am following along and I have encountered a puzzling situation and for my own learning and understanding I wanted to reach out to see if I could find out what is happening here.

Chapter 5 Section 2 Subsection 2 (5.2.2)

It appears that the validation for the Route Instructions section Description input text box is getting mixed up with the TrailDto's Description property instead. I confirmed this by modifying the validation message for the RouteInstruction's Description and still received the validation message for the TrailDto's Description property.

In addition, I changed the name of the RouteInstruction's Description property to Describ and the validation no longer gets the two confused but also does not provide any validation.

Are you able to provide some clarity here?

I attempted this with the versions of frameworks consistent with the builds in chapter 5.

I also attempted this with updated versions of Fluent, and received the same behaviour.

Client Project - Blazored.FluentValidation 2.1.0
API Project - FluentValidation.AspNetCore 11.2.2

Chapter 3 - npm run sass issue on Windows 10

Greetings. I am going through the book.

Apparently the following
<Exec Command="npm run sass -- %(ScopedScssFiles.Identiy) %(relativedir)%(filename).css" />

Runs into issues and and as a result the build fails.

This is the error code

and this the output from the build

OS : Windows 10
IDE : Visual Studio 2022

I checked out chapter 4 and the same issue occurred as well.

Chapter 3 Drawer does not open in Chrome with Debug -> Start without debugging

I am working through and enjoying Blazor in Action.
I came across this issue today.

Steps to reproduce:

Open the Chapter 3 solution in VS 2022
Set Chrome as the Browser
Debug -> Start without Debugging
Click View on any trail
Observe the drawer does not pop/slide out but appears at the top of the page

Debug -> Start Debugging.. works ok
Edge and Firefox works ok

Possibly arising from a recent Chrome update

NO no-image.jpg in repository that I can find

In chapter 6 (pg. 175) when adding the image upload functionality, you mention that we can use the "no-image.jpg" in the accompanying GitHub repo, but I couldn't find one. Not a big deal, just thought I would mention it. (EDIT: retrieving a "NO-IMAGE" image from placeholder, covered in chapter 7, would explain why it is not in the repo - perhaps removing the text related to "no-image.jpg" on pg. 175 and mentioning we will cover the case of no image in the next chapter would be better than putting it into the repo).

This is not an "Issue" but when copying the code from the PDF I downloaded, I get # and [CA] copied that need to be removed in order for the code to be clean. It might be nice if the # had commenting characters before them so it could be copied without having to remove them. I'm not sure about the "[CA]" (some artifact of converting you figures to PDF format?), but the # and the "[CA]" create opportunity for me to screw things up.

Chapter 8.1 to 8.1.1 - Collocated JavaScript file Issue

Hi Chris,

I have been troubleshooting this section of the book as it isn't working as expected. When I launch the program, the home page loads fine with all of the custom trails I have created in the database displaying. When I navigate to /add-trail the RouteMap's IJSObjectReference always returns null when attempting to access the collocated JS file, which causes an unhandled error to occur:

I thought that there was something wrong with my path so I tried many different paths to see if that would work but no dice. So I downloaded your version of Chapter 08 and studied the differences.

I noticed that the startup project for your project was the Client where as mine was API. When I switch it to Client, boom, the map loads perfect, however the home page fails to load the trails from the database and shows another unhandled error. Understandably so as the Mediator API calls won't be successful to a program not running.

Ok, no problem, I just have to start the API project too right? So I configured my project to startup multiple projects Client first, than API. When I launch both projects, I get two chrome instances, one for each project and they both error out, one at the home page and the other error on the Add-Trail page, where I am again getting the null reference for the IJSObjectReference again.

I am confused as to what is happening here and I am wondering if you have any insights.

You can find my version of the application here.

Thank you!