Thiết kế website giá rẻ

Question

I am using the new web app template in .net 8. The dialog service works fine when I am developing in Visual Studio. However, once I deploy to IIS, I get this error in the browser’s console.

    at Jn (dotnet.runtime.8.0.4.5vpa91cq8s.js:3:31614)
    at xl (dotnet.runtime.8.0.4.5vpa91cq8s.js:3:182261)
    at 00b217ca:0x1fa8f
    at 00b217ca:0x1bf5a
    at 00b217ca:0xf141
    at 00b217ca:0x1e7a9
    at 00b217ca:0x1ef9f
    at 00b217ca:0xcfbb
    at 00b217ca:0x4412f
    at e.<computed> (dotnet.runtime.8.0.4.5vpa91cq8s.js:3:215333)
callEntryPoint @ blazor.web.js:1
await in callEntryPoint (async)
ei @ blazor.web.js:1
await in ei (async)
Zr @ blazor.web.js:1
startWebAssemblyIfNotStarted @ blazor.web.js:1
resolveRendererIdForDescriptor @ blazor.web.js:1
determinePendingOperation @ blazor.web.js:1
refreshRootComponents @ blazor.web.js:1
(anonymous) @ blazor.web.js:1
setTimeout (async)
rootComponentsMayRequireRefresh @ blazor.web.js:1
onDocumentUpdated @ blazor.web.js:1
Ji @ blazor.web.js:1

I have added the provider with interactivity to the MainLayout so


<FluentLayout>
    <FluentHeader>
        INSTA RATE
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu />
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
                <FluentDialogProvider @rendermode="RenderMode.InteractiveWebAssembly" />
            </div>
        </FluentBodyContent>
    </FluentStack>
    <FluentFooter>
        <div class="link1">
            <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        </div>
        <div class="link2">
            <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
        </div>
    </FluentFooter>
</FluentLayout>
<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">????</a>
</div>

I have injected and used the IDialogService in my component which is in the client project like so.

@using Microsoft.AspNetCore.Authorization
@using InstaRate.Postgres.Data
@using InstaRate.Postgres.Data.Models
@using Microsoft.AspNetCore.Components.Authorization

@attribute [Authorize]
@rendermode InteractiveWebAssembly
@inject IRepository repository;
@inject IDialogService DialogService



<FluentGrid  Justify="JustifyContent.SpaceBetween">
    <FluentGridItem xs="6" sm="4">
        <FluentCard>
            <FluentStack Orientation="Orientation.Vertical">
                <FluentStack Orientation="Orientation.Horizontal">
                    <div>Total Reviews</div>
                </FluentStack>
                <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
                    <div>
                        <h1>10.0k</h1>
                    </div>
                    <FluentStack Orientation="Orientation.Vertical" VerticalAlignment="VerticalAlignment.Top"><p>20%~</p></FluentStack>
                </FluentStack>
               <FluentStack Orientation="Orientation.Horizontal">
                    <div>
                        <p>Growth in reviews for this year</p>
                    </div>
               </FluentStack>
            </FluentStack>
        </FluentCard>
    </FluentGridItem>
    <FluentGridItem xs="6" sm="4">
        <FluentCard >
            <FluentStack Orientation="Orientation.Vertical">
                <FluentStack Orientation="Orientation.Horizontal">
                    <div><sapn>Average Review</sapn></div>
                </FluentStack>
                <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
                    <div>
                        <h2>
                            4.0
                        </h2>
                    </div>
                    <FluentStack Orientation="Orientation.Vertical">
                        <span>Stars go here</span>
                    </FluentStack>
                </FluentStack>
               
                <div><span>Average rating for this year</span></div>
            </FluentStack>
        </FluentCard>
    </FluentGridItem>
    <FluentGridItem xs="6" sm="4">
        <FluentCard>
            <FluentStack Orientation="Orientation.Vertical">
                <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
                    <FluentIcon Value="@(new Icons.Filled.Size48.AddSquare())" Color="Color.Accent"/>
                    <FluentStack Orientation="Orientation.Vertical">
                        <span>Entity Service</span>
                    </FluentStack>
                </FluentStack>
                <FluentStack Orientation="Orientation.Horizontal">
                    <FluentButton Appearance="Appearance.Lightweight" OnClick="@AddReview">Add Review</FluentButton>
                    <FluentButton Appearance="Appearance.Lightweight">Recent</FluentButton>
                    <FluentButton Appearance="Appearance.Lightweight">Highest</FluentButton>
                    <FluentButton Appearance="Appearance.Lightweight">Lowest</FluentButton>
                </FluentStack>
            </FluentStack>
        </FluentCard>
    </FluentGridItem>
       @if (Entity == null)
        {
            <FluentCard>
                Loading...
            </FluentCard>
        }
        else
        {
            @foreach (var item in Entity.Reviews)
            {
                <FluentGridItem  xs="12" md="3" HiddenWhen="GridItemHidden.SmAndDown">
                    <FluentCard Class="custom-card" Style="width: 100%">
                       <FluentGrid Justify="JustifyContent.SpaceBetween" >
                           <FluentGridItem xs="12" md="3">
                                <FluentPersona Name="@item.CreatedBy"
                                               Image=""
                                               ImageSize="50px">
                                </FluentPersona>
                           </FluentGridItem>
                           <FluentGridItem xs="12" md="9">
                            Total Reviews: 14
                           </FluentGridItem>
                       </FluentGrid>
                    </FluentCard>
                </FluentGridItem>
                <FluentGridItem xs="12"  md="9">
                    <FluentCard Class="custom-card" Style="margin: 5px; width: 100%">
                    <FluentStack Orientation="Orientation.Vertical">
                        <FluentStack Orientation="Orientation.Horizontal">
                            <FluentStack Orientation="Orientation.Vertical">
                                <FluentStack Orientation="Orientation.Horizontal">
                                    @for (int i = 0; i < 5; i++)
                                    {
                                        if (i < item.Rating)
                                        {
                                            <FluentIcon Value="@(new Icons.Filled.Size20.Star())" Color="@Color.Accent" />
                                        }
                                        else
                                        {
                                            <FluentIcon Value="@(new Icons.Regular.Size20.Star())" />
                                        }
                                    }
                                    <FluentStack Orientation="Orientation.Horizontal">
                                        <p>@item.DateCreated</p>
                                    </FluentStack>
                                </FluentStack>
                                <FluentStack Orientation="Orientation.Horizontal">
                                    @item.Content
                                </FluentStack>
                                <FluentStack Orientation="Orientation.Horizontal">

                                </FluentStack>
                            </FluentStack>
                        </FluentStack>
                    </FluentStack>
                </FluentCard>
                </FluentGridItem>
            }
        }
</FluentGrid>


@code {
    public ServiceEntity Entity { get; set; }
    AddReviewDialog.ReviewContent DialogData { get; set; } = new();

    [Parameter]
    public long Id { get; set; }

    private async Task AddReview()
    {
        Console.WriteLine("Clicked");
        DialogData.ServiceId = Id;
        //var data = new AddReviewDialog.ReviewContent() { Rating = 2, Body = "" };

        IDialogReference dialog = await DialogService.ShowDialogAsync<AddReviewDialog>(DialogData, new DialogParameters()
            {
                Height = "400px",
                Title = "Add Review For Company X",
                PreventDismissOnOverlayClick = true,
                PreventScroll = true,
            });

        var result = await dialog.Result;
        if (!result.Cancelled && result.Data != null)
        {
            DialogData = (AddReviewDialog.ReviewContent)result.Data;
        }

    }
    protected override async Task OnInitializedAsync()
    {
        Entity = await repository.GetById(Id);
        if (Entity == null)
        {
            Entity = new ServiceEntity { Reviews = new List<InstaRate.Postgres.Data.Models.Review>() };
        }
        else if (Entity.Reviews == null)
        {
            Entity.Reviews = new List<InstaRate.Postgres.Data.Models.Review>();
        }
    }


}

This is the Dialog

@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Authorization
@using InstaRate.Postgres.Data
@implements IDialogContentComponent<AddReviewDialog.ReviewContent>
@inject IRepository repository;
@inject AuthenticationStateProvider authStateProvider;
@inject IDialogService DialogService

<AuthorizeView Context="authContext">
    <FluentDialogHeader ShowDismiss="true">
        <FluentStack VerticalAlignment="VerticalAlignment.Center">
            <FluentIcon Value="@(new Icons.Regular.Size24.WindowApps())" />
            <FluentLabel Typo="Typography.PaneHeader">
                @Dialog.Instance.Parameters.Title
            </FluentLabel>
        </FluentStack>
    </FluentDialogHeader>
    <FluentDialogBody>
        <EditForm Model="Model" FormName="add_review">
            <DataAnnotationsValidator />
            <div class="review-dialog" style="margin-left: 20px">
                <div>
                    <FluentPersona Name="@authContext.User.Identity?.Name"
                                   Image=""
                                   ImageSize="50px">
                    </FluentPersona>
                </div>
                <div style="width: 70%; display: flex; flex-direction:row; justify-content:space-between">
                    @for (int i = 1; i <= 5; i++)
                    {
                        int starNumber = i;
                        if (starNumber <= Model.Rating)
                        {
                            <FluentIcon Value="@(new Icons.Filled.Size20.Star())" Color="@Color.Accent" OnClick="() => SetRating(starNumber)" />
                        }
                        else
                        {
                            <FluentIcon Value="@(new Icons.Regular.Size20.Star())" OnClick="() => SetRating(starNumber)" />
                        }
                    }
                </div>
                <div style="margin-bottom: 5px">
                    <FluentTextArea Name="review_content" Cols="60" @bind-Value=Model.Body Placeholder="Share details of your experience" />
                </div>
            </div>
            <div style="color: var(--error);">
                <FluentValidationSummary />
            </div>
        </EditForm>
    </FluentDialogBody>

    <FluentDialogFooter>
        <FluentButton Appearance="Appearance.Accent"
                      OnClick="@AddReviewAsync">
            Save
        </FluentButton>
        <FluentButton Appearance="Appearance.Neutral"
                      OnClick="@CancelAsync">
            Cancel
        </FluentButton>
    </FluentDialogFooter>
</AuthorizeView>
@code {
    private EditContext _editContext = default!;

    private ReviewContent Model = new();

    [Parameter]
    public ReviewContent Content { get; set; } = default!;

    [CascadingParameter]
    public FluentDialog Dialog { get; set; } = default!;

    private async Task AddReviewAsync()
    {
       
        
            var authState = await authStateProvider.GetAuthenticationStateAsync();
            var review = new InstaRate.Postgres.Data.Models.Review
            {
                Content = Model.Body,
                CreatedBy = authState.User.Identity.Name,
                DateCreated = DateTime.UtcNow,
                Rating = Model.Rating,
            };

            review.SetRating(Model.Rating);
            await repository.AddReviewAsync(Content.ServiceId, review);
            await DialogService.ShowSuccessAsync("review successfully added");
            await Dialog.CloseAsync(Content);
        
    }

    private async Task CancelAsync()
    {
        await Dialog.CancelAsync();
    }

    private void SetRating(int rating)
    {
        Model.Rating = rating;
    }

    public record ReviewContent
    {
        [MinLength(10)]
        public string Body { get; set; } = string.Empty;

        [Range(1, 5)]
        public int Rating { get; set; }

        [Required]
        public string? CreatedBy { get; set; }

        public long ServiceId { get; set; }
    }

}

Thiết kế website giá rẻ

Danh mục

Blazor Fluent UI’s FluentDialogProvider Throws (AggregateException_ctor) When Deployed in IIS but Works Fine in Development