Question

我已经创建了Blazor客户端应用程序作为叶端和ASP.NET Core Web API来提供数据，但是我无法使用Blazor客户端模板保存数据。 Blazor客户端应用程序无法调用API。

但是，如果使用Blazor核心托管模板，则可以保存数据。

这是代码：

// Blazor Client APP
@page "/register"
@inject HttpClient Http

@inject Microsoft.AspNetCore.Components.IUriHelper UriHelper

<h1>Create</h1>
<h3>Employee</h3>
<hr />
<div class="row">
        <div class="col-md-4">
            <form>
                <div class="form-group">
                    <label for="Name" class="control-label">Name : @emp.Name</label>
                    <input for="Name" class="form-control" @bind="@emp.Name" />
                </div>
                <div class="form-group">
                    <label asp-for="Gender" class="control-label">Gender</label>
                    <select asp-for="Gender" class="form-control" @bind="@emp.Gender">
                        <option value="">-- Select Gender --</option>
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </div>
                <div class="form-group">
                    <label asp-for="Department" class="control-label">Department</label>
                    <input asp-for="Department" class="form-control" @bind="@emp.Department" />
                </div>
                <div class="form-group">
                    <label asp-for="City" class="control-label">City</label>
                    <input asp-for="City" class="form-control" @bind="@emp.City" />
                </div>
                <div class="form-group">
                    @* <button type="submit" class="btn btn-default" @onclick="@CreateEmployee">Save</button>*@


                    @*<button type="submit" class="btn btn-default" @onclick="@CreateEmployee">Create EMp</button>*@

                    <button type="submit" class="btn btn-default" @onclick="@(async () => await CreateEmployee())">Save</button>

                    @*<button type="submit" class="btn btn-default" @onclick="@CreateE">E Save</button>*@
                </div>
            </form>
        </div>
</div>

@code {
        Employee emp = new Employee();

        protected async Task CreateEmployee()
        {
            await Http.SendJsonAsync(HttpMethod.Post, "https://localhost:44364/api/User/emp", emp);
            UriHelper.NavigateTo("/register");
        }

        void cancel()
        {
            UriHelper.NavigateTo("/fetchemployee");
        }
}  

// ASP.NET Core Web API code
[HttpPost]
[Route("emp")]
public void Create(Employee emp)
{

}

Answer 1

我不确定我了解你想知道什么吗？

您是否想知道为什么使用第一版应用程序时无法保存数据？

我想这是因为您的客户端Blazor和Web Api应用程序不共享同一域。在没有看到您的应用回购的情况下，关于此问题的说法很少，例如您如何配置Web Api等。

但是，第二个版本更好，因为它创建了一个Blazor客户端，该客户端托管在Asp.Net Core上，并为您配置了Web Api。两者共享同一个域。这就是为什么它可以正常运行的原因。

更新：

考虑使用Blazor Forms系统代替上述方法。使用EdiForm组件和InputComponents代替Html标签。这使您可以轻松使用数据验证和其他功能。

希望这对您有帮助...

Answer 2

这似乎是CORS的问题。运行应用程序后，请检查chrome开发工具中的控制台。您可能会遇到Failed to load <web API> : No ‘Access-Control-Allow-Origin’ header is present on the requested resource错误。此错误的原因是应用程序的客户端和服务器不在同一端口上。由于同源策略，浏览器将限制应用程序进行Web API调用。

要解决此问题，您需要在应用程序中启用跨域请求（CORS）。有关详细信息，请参阅https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-3.0上的Microsoft文档。

无法使用Blazor客户端模板和ASP.NET Core Web API保存数据

2 个答案: