导致可编辑文本表单上未呈现框的网页

Question

我仍在熟悉 .Net Blazor 和网页设计。我创建了一个简单的 razor 组件，它具有您在编辑、保存或删除帖子时需要的内置按钮功能。我有时会在我的编辑按钮周围或图片中看到这些方形项目。目标是创建一个看起来与我们都使用的通用设计相似的讨论板。 （堆栈溢出）发布类别并允许人们发布 cmets/回复的能力。

究竟是什么导致了这些错误呈现？我确保我在整个页面中都使用了@，并且我相信我也正确地使用了内联 if 语句。

所以你有我的 Razor 组件中的代码，这很糟糕。让你们知道我正在使用 MudBlazor。

<MudForm>
<MudPaper Width="60%">
    @if (isEditing)
    {
        <MudTextField Lines="10" FullWidth="true" @bind-Value="@bindedString" Variant="Variant.Outlined" />
        <div class="oi-align-right" align="right">
            <button class="btn btn-underline-link" @onclick="@InvokeSave">Save</button>
            &nbsp;
            <button class="btn btn-underline-link" @onclick="@CancelEdit">Cancel</button>
        </div>
    }
    else
    {
        <div class="oi-align-right" align="center">
            <h4>@bindedString</h4>
            @if (CanEdit)
            {
                <div class="row" align="right">
                    <button class="btn btn-underline-link" @onclick="@InvokeEditing">Edit</button>
                    &nbsp;
                    @if (OnDeleteEvent.HasDelegate)
                    {
                        <button class="btn btn-underline-link" @onclick="@InvokeDelete">Delete</button>
                    }
                </div>
            }
        </div>
    }
</MudPaper>

@code {
public record TextBoxValue(string CurrentValue);

[Parameter]
public bool CanEdit { get; set; }

[Parameter]
public string TextValue { get; set; }

[Parameter]
public EventCallback<TextBoxValue> OnSaveStringEvent { get; set; }

[Parameter]
public EventCallback OnDeleteEvent { get; set; }

private bool isEditing { get; set; } = false;

private string bindedString { get; set; }

protected override void OnParametersSet()
{
    bindedString = TextValue;
    base.OnParametersSet();
}

private void InvokeEditing()
{
    isEditing = true;
}

private async void InvokeSave()
{
    isEditing = false;
    TextValue = bindedString;
    await OnSaveStringEvent.InvokeAsync(new TextBoxValue(bindedString));
}

private async void InvokeDelete()
{
    await OnDeleteEvent.InvokeAsync();
}

private void CancelEdit()
{
    isEditing = false;
    bindedString = TextValue;
}
}

如何在您的项目中使用它的示例。我认为这个组件真的可以帮助其他人创建一个通用的文本字段，能够附加这些按钮功能。

@page "/post/{Id}"
@inject NavigationManager navMgr
@inject IDataService dataService
@inject PostReplyStore postReplyStore

@if (string.IsNullOrEmpty(postViewModel.ErrorMessage) == false)
{
   <div class="alert alert-danger" role="alert">
     @postViewModel.ErrorMessage
   </div>
}

@if (postViewModel.AuthenticationRoles.IsAuthenticated)
{
  @if (postViewModel.PostReplies is null)
  {
    <h4>Loading please wait...</h4>
  }
  else
  {
    <div class="oi-align-center" align="center">
        @foreach (PostReply postReply in postViewModel.PostReplies)
        {
            <EditableTextField CanEdit="@(CanEdit(postReply.UserId))" TextValue="@postReply.Message" OnDeleteEvent="@(() => postViewModel.DeletePostReply(postReply.Id))"
                               OnSaveStringEvent="@((e) => postViewModel.SavePostReplyEdit(postReply.Id, e.CurrentValue))" />
            <p>@postReply.Created.ToString("dddd d MMMM yyyy")</p>
            <p>@postReply.User.UserName</p>
            <b />
        }
        <b />
        <CreatePostReply Id="@Id" />
    </div>
  }
}
else
{
   <h4>Please Log In</h4>
}

@code {
[CascadingParameter]
public Task<AuthenticationState> AuthState { get; set; }

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

public bool CanEdit(int userId)
{
    return postViewModel.AuthenticationRoles.AccountUser.Id.Equals(userId);
}

private PostViewModel postViewModel { get; set; }

protected override async Task OnInitializedAsync()
{
    var authState = await AuthState;
    postViewModel = new(dataService, postReplyStore);
    await postViewModel.UpdateRoles(authState);
    postViewModel.PropertyChanged += (s, e) =>
    {
        this.StateHasChanged();
    };
    int id;
    int.TryParse(Id, out id);
    await postViewModel.GetAsync(id);
    await postViewModel.GetPostRepliesAsync();
}
}

Answer 1

你没有删除@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');吗？ 删除引导程序（或参考）后，您似乎需要更改图标集