标签: blazor

我有一个在服务器端呈现的 Blazor 组件。我想在里面有一些可折叠的div。然而，由于代码是服务器渲染的，因此不会执行 Javascript，因此这些部分不会崩溃。

这是我的文件中的代码script.js：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
            content.style.maxHeight = null;
        } else if(window.matchMedia("(max-width:1440px)")){
            // content.style.maxHeight = content.scrollHeight + "px";
            content.style.maxHeight = "20vh";
        } 
        else {
            content.style.maxHeight = "50vh";
        }
    });
}

这是我的main.cshtml文件：

<component type="typeof(Main)" render-mode="Server" />

<script src="~/js/script.js" type="text/javascript"></script>

最后是我的Main带有可折叠部件的组件：

@using Microsoft.AspNetCore.Components;
@using Microsoft.AspNetCore.Components.Web;

<div class="collapsible">
    <label for="tutu">HEADER</label>
    <div id="mybtn" class="btn-rch"></div> …

我不确定使用我的方法将对象从子组件传递到其在 Blazor 中的消费父页面是否犯了错误。我有一个带有 ID、名称的 poco 类。具有从 poco 类对象列表中选择 div 的组件。用户选择一个条目，该条目应显示在父页面上。我缺乏经验，看不出我的解决方案有任何问题。1）我做对了吗？2）如果一切都好的话，OnInitializedAsync() 没有等待（父级），我应该使用 OnInitialized() 代替吗？3）Dispose的使用是否正确？4）如果我在一个应用程序中针对不同组件等使用相同的方法可能 20 次，那么这个解决方案可以吗？这个规模可以吗？谢谢，不行

父页面：

@page "/"
@inject MitarbeiterEventService MitarbeiterEventService

@implements IDisposable

<h1>ParentPage</h1>
<MitarbeiterSel></MitarbeiterSel>
<br />

@if (SelMitarbeiterFromChild != null)
{
    <p>Selected Obj. from Child: @SelMitarbeiterFromChild.Name </p>
}

@code{
    public MitarbeiterLite SelMitarbeiterFromChild;

    protected override async Task OnInitializedAsync()
    {
        MitarbeiterEventService.EventMitarbeiterChangedInComp += HandelOnMitarbeiterChangedInComp;
    }

    public async void HandelOnMitarbeiterChangedInComp(object sender, MitarbeiterLite selMitarbeiter)
    {
        SelMitarbeiterFromChild = selMitarbeiter;

        await InvokeAsync(() =>
        {
            StateHasChanged();

        });
    }

    public void Dispose()
    {
        MitarbeiterEventService.EventMitarbeiterChangedInComp -= HandelOnMitarbeiterChangedInComp;
    }
} …

在我使用的 .razor 文件中

@inject HttpClient Http

访问 HTTPClient。

有没有办法在 .cs 文件中执行相同的操作，或者我是否必须将其作为参数传递？

更新

我以为我有，但我没有。

使用语句

@inject HttpClient Http

定义为类参数

using System.Net.Http;
using Microsoft.AspNetCore.Components;
using System.Net.Http.Json;

在我的通话任务中

    [Inject]
    protected HttpClient Http {get;set;} 

出现以下错误

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Value cannot be null. (Parameter 'client')

我正在尝试更深入地了解 blazor。我想建立一个可以使用连接到数据库的 CRUD 功能的网站。我在 .Net Core/ASP.NET CORE 5 上使用 Microsoft SQL Server 以及 Microsoft SQL Server Management Studio 和 Visual Studio 2019。

我是 Blazor 的初学者。

请告诉我如何使用按钮显示或隐藏 Blazor 标准模板的侧面菜单。

非常感谢 ！

我有一个 .js 文件，其中包含以下 JavaScript 代码：

         <script>     
            abc= window.abc|| {};
            abc.Metrics = abc.Metrics || {};
            abc.Metrics.sc = abc.Metrics.sc || {};
            abc.Metrics.sc.country = "us";         /***dynamic value based on site***/
            abc.Metrics.sc.language = "en";        /***dynamic value based on site***/
            abc.Metrics.sc.segment = "corp";      /***dynamic value based on site***/
            abc.Metrics.sc.customerset = "19";    /***dynamic value based on site***/
            abc.Metrics.sc.cms = "stp";           /***dynamic value based on site***/
            abc.Metrics.sc.pagename = "pname";  /***relevant unique page name***/
            abc.Metrics.sc.applicationname = "Browse:Product Detail"; 
         
        </script>
      
      <!-- Refer the below script in DEV -->
      <script …

我的 Blazor 组件与此类似：

主剃须刀

@foreach (Vehicle vehicle in _vehicles) 
{
    if (vehicle.Visible)
    {
        <VehicleComponent Vehicle=@vehicle></VehicleComponent>
    }
}

@code {
    protected override void OnInitialized() 
    {
        _vehicles = new List<Vehicles>();
        // -> _vehicles being filled here
        base.OnInitialized();
    }
}

VehicleComponent.razor

@if (Vehicle != null) 
{
    <img src="@(Vehicle.src)"/>
    <div id="@(Vehicle.Id)" tabindex="@(Vehicle.tabindex)">
        <h3>@(Vehicle.text)</h3>
    </div>
}

@code {
    [Parameter] public Vehicle Vehicle { get; set; }
}

问题是VehicleComponent循环内的所有 s 都是在循环完成后渲染的。但我希望组件在渲染下一个列表项之前完全渲染。

我尝试StateHasChanged()在 中的每个项目之后使用Main.razor，但出现无限循环。有没有办法可以在循环中依次渲染每个组件（并更新 UI）？

我试图弄清楚何时需要调用 StateHasChanged()。我知道当通过 Javascript 更改值时，可能需要强制 blazor 组件呈现页面。在下面的代码中，我有一个名为 HandleClick 的方法来处理按钮单击，并且我故意注释掉了 StateHasChanged() 。HandleClick 方法本身调用 Javascript 来设置第 2 部分中的 element 的值。由于 Blazor 组件不知道 fromJs 值的变化，因此第 1 部分中的值在单击后不会更新。但问题是，为什么当我再次单击按钮时，第 1 部分中的值会发生变化。

@page "/ExampleY"

@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<div class="p-2">
    <p class="alert-info p-3">
       Part 1.  Get value via JS call: <strong>@(fromJs ?? "Empty")</strong>
    </p>

    <p class="alert-success p-3">
        Part 2. Set value via JS call: <strong @ref="element"></strong>
    </p>

    <button class="btn btn-success" @onclick="HandleClick">Click to Call JS</button>
</div>

@code {
    private string …

我有一个从 DataTable 创建 html 表的函数。我附上了下面的代码。现在我的问题是，如何在 Blazor 应用程序中将字符串转换为 HTML 代码？

感谢您的努力。:)

public static string ConvertDataTableToHtml(DataTable dt)
    {
        string html = "<table>";
        //add header row
        html += "<tr>";
        for (int i = 0; i < dt.Columns.Count; i++)
            html += "<td>" + dt.Columns[i].ColumnName + "</td>";
        html += "</tr>";
        //add rows
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            html += "<tr>";
            for (int j = 0; j < dt.Columns.Count; j++)
                html += "<td>" + dt.Rows[i][j].ToString() + "</td>";
            html += "</tr>";
        } …

我正在尝试找出是否可以使用 Blazor 服务器制作 PWA。

在我看来，有些人“解决”这个问题的方式是将manifest.json从WebAssembly应用程序复制粘贴到服务器应用程序。

这让我想知道，为什么微软不在 dotnet run blazorserver 上提供 --pwa 标志，而只在 Web 程序集上提供 --pwa 标志（如果就这么简单的话）。

谢谢！