标签: blazor-server-side

我在 .NET6 中创建了一个 Blazor 服务器应用程序。但最近我将其升级到 .NET7。从这次开始，我遇到了上述问题。

错误：Microsoft.JSInterop.JSException：将循环结构转换为 JSON --> 从带有构造函数“Window”的对象开始 --- 属性“window”关闭循环 TypeError：将循环结构转换为 JSON --> 从带有构造函数“的对象开始” Window' --- 属性'window'在 JSON.stringify () 处关闭圆圈

这个问题是从这条线上发生的

await _jsRuntime.InvokeAsync<object>("open", url, "_blank");

该行负责在浏览器的新选项卡中打开 URL。一旦我单击导航栏链接，就会调用上面的行并发生此问题。有人知道此问题的答案吗？请帮助我，感谢您的所有回答。

在服务器端 Blazor 应用程序 (Core 3.1) 中，有一个接受@page属性中的标识符的 Razor。如果 URL 中提供的标识符对应于现有实体，则页面将正常呈现。但是，如果标识符不是已知实体（根据其在存储库中的存在确定），我希望系统执行与 404 Not Found 相对应的任何操作。然而，我不知道这一点，直到路线已经匹配并且我的页面OnInitialized()正在执行。

在这种情况下，如何“重定向”到默认的 404 处理。

页面如下所示：

@page "/{projectname}"

<!-- HTML Here -->

@code {


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

    private UpdateProjectViewModel Project;

    protected override void OnInitialized()
    {
        var project = Repository.Get(ProjectName);
        if (project == null)
        {
            WANT TO USE 404 ROUTING HERE.
        }
        Project = new UpdateProjectViewModel(project));
    }

}

我创建了一个标准 Blazor 服务器应用程序。然后我添加了一个具有读/写操作的 API 控制器。

现在我想从索引页调用一个操作，但它不起作用。应用程序运行时没有错误，但没有返回预期的结果（状态=“等待激活”，方法=“null”和结果=“尚未计算”）。我在控制器操作中放置了一个断点，但程序从未命中它。

控制器：

[Route("api/[controller]")]
[ApiController]
public class ValuesController : ControllerBase
{
    // GET: api/<ValuesController>
    [HttpGet]
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }

    // GET: api/<ValuesController>/5
    [HttpGet("{id}")]
    public string Get(int id)
    {
        return "value";
    }
}

索引页：

<button class="btn btn-primary" @onclick="RetrieveGet">
    GET
</button>

void RetrieveGet()
{
    HttpClient Http = new HttpClient();
    string baseUrl = "https://localhost:44382/";
    var temp2 = Task.Run(async () => { await Http.GetStringAsync($"{baseUrl}api/values/5"); });
}

Startup.cs（为简洁起见，删除了其他项目）：

public void …

Blazor 文档的表单验证示例在EditForm组件中有一个提交按钮组件：

    <EditForm Model="@starship" > OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
    
        <p>
            <label for="identifier">Identifier: </label>
            <InputText id="identifier" bind Value="@starship.Identifier" />
        </p>
    
        Snip....

        <button type="submit">Submit</button>

        Snip...

    </EditForm>

Run Code Online (Sandbox Code Playgroud)

无论如何，是否可以将该提交按钮放置在标签之外，EditForm并且仍然“本机”触发该EditForm组件的提交，而无需使用 JavaScript？

即代码看起来像这样：

    <!-- Want this button to submit the form in the EditForm tags-->
    <button type="submit">Submit</button>

    Snip...

    <EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
        <DataAnnotationsValidator />
        <ValidationSummary />
    
        <p>
            <label for="identifier">Identifier: </label>
            <InputText id="identifier" bind-Value="@starship.Identifier" />
        </p>
    </EditForm>

我有一个服务器端 blazor 客户端，我正在尝试通过登录检查来修改 MainLayout razor 页面。我目前正在使用 Blazored 进行本地存储保存，并且我目前正在使用查看是否保存了令牌以查看用户是否登录，但是我不确定如何在 razor 页面的 if 语句中翻译它，因为它想要异步方法。

我的登录检查非常简单，如下所示。

public async Task<bool> IsLoggedIn()
{
    return await m_localStorage.ContainKeyAsync("token").ConfigureAwait(false);
}

在我的 Razor 页面中，我正在执行此语句检查 - 这显然不起作用，因为没有 async 修饰符

@if (!await AppState.IsLoggedIn()) //Requires async modifier
{
    <a href="Login" target="_blank">Login</a>
}

我也尝试使用 .Result 属性执行此操作，但这会导致抛出异常：(System.AggregateException: 'Information: Executed an implicit handler method, returned result Microsoft.AspNetC)' 带有内部异常 -> NullReferenceException ： 你调用的对象是空的。

但是从我所看到的 AppState 被正确注入，本地存储似乎在 AppState 中被正确注入。

@if (!AppState.IsLoggedIn().Result)
{
    <a href="Login" target="_blank">Login</a>
}

所以我的问题是解决这个问题的正确方法是什么，有没有办法在剃刀页面中执行异步方法？

使用Microsoft docs 中的示例，我尝试以编程方式将焦点设置为输入元素。

不幸的是，该示例使用了标准，<input type="text">而我想将其用于InputTextelement。

Microsoft 示例使用了一种扩展方法，该方法采用ElementReference：

public static Task Focus(this ElementReference elementRef, IJSRuntime jsRuntime)
{
    return jsRuntime.InvokeAsync<object>(
        "exampleJsFunctions.focusElement", 
        elementRef);
}

使用InputText，我认为无法获得这样的ElementReference.

提供我自己的Focus()重载InputText而不是编译但没有显示视觉结果。所以我一无所知。

我的问题

如何以编程方式将焦点设置为InputText元素？

我正在尝试使用 JSInterop 在我的服务器端 Blazor 应用程序上启动 Google 地图。我似乎已经尝试了几乎所有方法，但无法显示地图。不幸的是，互联网上几乎没有关于它的样本，因为它是一个相当新的框架，而且我自己也同样刚刚开始接触 Blazor，所以我可能做错了很多事情。任何朝着正确方向的推动将不胜感激。

在我的组件文件中，我有：

@page "/MapTest"
@inject IJSRuntime JSRuntime

<style>
    #map {
        width: 60%;
        height: 60%;
    }
</style>

<h1>Display Google Map</h1>


<div @ref="map" id="map"></div>

@code {

    ElementReference map; // reference to the DIV

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("Showgooglemap", null);
        //StateHasChanged();

    }
}

在我的 _Host.cshtml 文件中，我有：

   <script src="_framework/blazor.server.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxmykeyxxx&v=3"></script>

    <script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(40.716948, -74.003563);
                var options = {
                    zoom: 14, center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP …

当我的服务器端 Blazor 应用程序运行时，我希望一些 Javascript 代码_Host.cshtml能够将数据发布到控制器操作。当然，这完全超出了 Blazor 应用程序本身的范围，并且与 Blazor 应用程序本身无关。

我想这将是添加调用的问题services.AddControllers()，并endpoints.MapControllers()在适当的地方Startup.cs。但是，在执行此操作并实施控制器操作之后，我进行了以下观察：

• 对操作的请求不会被路由并被视为“未找到”
• 在 Razor 中，@Url.Action控制器操作返回一个空字符串

如何以克服上述两个问题的方式向我的服务器端 Blazor 项目添加控制器（而非视图）支持？

我正在寻找一种将 Blazor 组件呈现为 HTML 字符串的方法，以便我能够将其用作模板引擎，在我的 Web 应用程序中创建和发送电子邮件。想法？

当我在 Azure 上发布 Blazor 服务器端应用程序时，Visual Studio 会提示一条消息：

您的应用程序正在使用 SignalR。对于需要扩展的环境，我们强烈建议添加对 Azure SignalR 服务的依赖。

但是，我的应用程序可以正常工作，无需使用 Azure SignalR 服务。所以我想知道整合它是否真的有意义，或者这只是微软从我们口袋里多掏几美元的一种方式......

有没有人试过在有和没有 Azure SignalR 服务的情况下部署 Blazor 服务器端应用程序，以测试在性能方面是否有任何实际差异？我应该从中获得什么样的优势？