标签: blazor

我需要能够在<select>. 问题是我也绑定了@bind，当我尝试使用@onchange 时出现错误，指出@bind 已经在使用它。我尝试使用@onselectionchange，但这没有任何作用（不运行该功能）。我可以忘记@bind 而只是将@onchange 分配给一个函数，但我不确定如何将选定的值传递给该函数。

我有以下代码：

<select @bind="@SelectedCustID" @ @onchange="@CustChanged" class="form-control">
    @foreach (KeyGuidPair i in CustList)
    {
        <option value="@i.Value">@i.Text</option>
    }
</select>

谢谢。

我很难理解何时应该调用StateHasChanged()以及何时 Blazor 拦截某些内容已更改，因此必须重新呈现。

我创建了一个示例项目，其中包含一个按钮和一个名为 AddItem 的自定义组件。该组件包含一个带有红色边框的 div 和一个按钮。

我所期望的：我希望当用户单击 Index 页面中包含的按钮时，AddItem 的 div 将显示出来。然后我想在用户单击 AddItem 的按钮时隐藏它。

注意： AddItem 不会将它的_isVisible标志暴露在外面，而是包含一个Show()方法。SoAddItems.Show()将在单击索引按钮时调用。

测试：

1. 我点击索引的点击按钮，然后调用方法Open()和AddItem.Show()。标志_isVisible被设置为true但没有任何反应并且索引ShouldRender()被调用。

   控制台输出：

   • 渲染索引

2. 我AddItem.Show()用public void Show() {_isVisible = true; StateHasChanged();}. 现在 AddItem 的 div 按预期显示和隐藏。

   控制台输出：

   • 渲染 AddItem（在索引按钮上单击 1°）
   • 渲染索引（点击索引按钮 1°）
   • 渲染 AddItem（点击 addItem 的关闭按钮 2°）

3. 我已经修改<AddItem @ref="AddItem" />了<AddItem @ref="AddItem" CloseEventCallback="CallBack" />,StateHasChanged …

我正在为即将到来的面试做一个项目。我习惯在 Visual Studio 中编写 C#，但自从我改用 Linux 后，我尝试使用 Rider。

在 Visual Studio 中，您可以添加多个项目作为“启动项目”，但我不确定如何在 Rider 中执行此操作。

我的文件结构是：

BlazorApp\n\xe2\x94\x82   README.md\n\xe2\x94\x82   .gitignore    \n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80MyApp.Web(Blazor project)\n\xe2\x94\x82\n\xe2\x94\x82___MyApp.Api(ASP.NET Core Web App with the API template)\n\xe2\x94\x82   \n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80MyApp.Models(Class library)\n\n

MyApp.Api应该先从哪里开始，然后再从哪里开始MyApp.Web。

随着Blazor的发明,我想知道这两种语言之间是否有显着的效率(代码的创建和代码的实际编译/执行)？

https://github.com/SteveSanderson/Blazor

如果有人真正实现了它,你是否已经进行了任何性能测试,或者与普通的Razor相比,是否有轶事(是的,抱歉,我要求此道歉)对代码编写过程的反馈？

我在表单中的 cshtml 页面中有一个典型的 div 元素：

<div id="loginErrors" class="alert alert-danger hide-errors">@(ErrorMessage)</div>

在 Blazor 之前，我通常使用 jQueryhide-errors在 div 中添加或删除类。但是，Blazor 正试图消除对 JavaScript 的需求，我正在尝试尽可能少地使用 JSInterop。Blazor 有没有办法做到这一点？

所以在 Blazor 我可以这样做：

 @if (!string.IsNullOrEmpty(ErrorMessage))
 {
     <div id="loginErrors" class="alert alert-danger">@(ErrorMessage)</div>
 }
 else
 {
     <div id="loginErrors" class="alert alert-danger hide-errors">@(ErrorMessage)</div>
 }

或使用 JSinterop ：

要求删除：

await JSRuntime.Current.InvokeAsync<object>("blazorExtensions.RemoveClass", "loginErrors", "hide-errors");

函数通常是：

RemoveClass: function (id, classname) {
    var tt = '#' + id;
    $(tt).removeClass(classname);
}

与添加类类似。上述两项工作，但如上所述。我试图避免 JSInterop 路由，我不喜欢 div 元素被声明两次，即使只有一个会进入 DOM。

在 Blazor 中，我有一个<a>同时具有 ahref和onclick方法的元素：

<a href="" onclick="@(() => ChangePage(_someObject))">Test</a>

onclick 调用这个方法：

  private bool ChangePage(object objectToDisplay)
  {
    _currentObject = objectToDisplay;
    StateHasChanged();

    return false;
  }

通常在 JavaScript 中，从 event 方法返回 false 会停止后续导航到 中的链接，href但这似乎不适用于我上面的代码。

单击链接后，如何阻止 Blazor 将页面更改为根 url？

（这里显而易见的答案是href完全删除，但我正在使用引导 Pill 中的链接并删除 Pillhref工作的停止）

我尝试过的其他方法不起作用：

• 将<a>元素更改为跨度并设置data-target属性，但这会正确停止 Pills 渲染。
• 添加return到onclick事件中（根据此答案）：onclick="return @(() => ChangePage(_overviewModel))"但这不会编译。
• return在onclick事件之后添加：onclick="@(() => ChangePage(_overviewModel)); …

我使用的是 Microsoft Visual Studio 2019 社区预览版，版本 16.4.0 预览版 1.0。我刚刚更新到 Windows 10 Pro Version 1903 OS build 18362.418 。使用 ASP.NET Core 3 Web 应用程序项目（Blazor Server），当我按下 时F5，我发现错误

我可以手动去https://localhost:44333/，但是不方便。当我停止调试时，我也会在任务栏上手动关闭它。

使用另一个网络应用程序项目，问题不会发生。

当我选择或不选择 option 时Enable native code debugging，不会成功。

如何解决？

使用@bind和 有@bind-value什么区别？

我做了这个简单的例子，并在浏览器中测试，我没有看到任何区别。

<p>@@bind @increment1</p>

<input 
    type="text"
    @bind="@increment1"
/>

<p>@@bind-value @increment2</p>
<input 
    type="text"
    @bind-value="@increment2"
/>

@code {
    string increment1;
    string increment2;
}

我正在使用Grid.Blazor库在 Blazor 应用程序上渲染服务器端网格。其中一列有一个带有单击事件的按钮。因此，当单击按钮时，网格行事件也会与按钮单击事件一起触发。我想停止事件传播并只让按钮单击事件触发。

网格：

  <GridComponent @ref="_gridComponent" T="QuickLists" Grid="@_grid"  OnRowClicked="@(async (item) => await ExerciseDetails(item))"></GridComponent>


Action<IGridColumnCollection<QuickExcerciseLists>> columns = c =>
        {
            c.Add().Titled("Actions").RenderComponentAs(typeof(ChildComponent)).SetWidth("5%");
            c.Add(o => o.Name, comparer).Titled("Name").SetWidth("10%");
            c.Add(o => o.Age, comparer).Titled("Age").SetWidth("15%");
            c.Add(o => o.Address, comparer).Titled("Address").RenderComponentAs<MatTooltip>().SetWidth("15%");
        };

自定义列组件：

<MatBlazor.MatButton Icon="@MatIconNames.Remove_red_eye" @onclick="@ShowData" @onclick:stopPropagation="true"></MatBlazor.MatButton>

我尝试传递@onclick:stopPropagation子按钮组件。但下面给出了编译错误。

该组件的组件参数“onclick”使用两次或多次。参数必须是唯一的（不区分大小写）。组件参数“onclick”由“@onclick:stopPropagation”指令属性生成。

我正在运行.Net core 3.1.201。非常感谢任何帮助。

我试图将模型中的“CountryId”绑定到 blazor 中 SelectList 的选定项目的值。所有国家/地区项目都在一个列表中，如 {CountryId, CountryName} 对象。我这样做的代码是这样的：

    <InputSelect @bind-Value="model.ByCountryId" class="form-control">
        @if (model?.Countries != null)
        {
           @foreach (var cnt in model.Countries)
           {
               <option value="@cnt.Id">@cnt.Name</option>
           }
        }
     </InputSelect>

和代码块：

@code {

BrandModel model = new BrandModel();

protected override async Task OnInitializedAsync()
{
    model = new BrandModel
    {
        Id = 19,
        ByCountryId = 1,
        Countries = new List<ent.Country>
            {
                new ent.Country { Id = 1, Name = "Azerbaijan" },
                new ent.Country { Id = 2, Name = "Turkey" }
            },
        IsActive = …