Подключите веб-API ядра asp.net к веб-сборке Blazor, например Angular SPA

Я новичок в веб-сборке Bazor (клиент Blazor).

Я создал проект с веб-API Asp.net Core с Angular Application. Чтобы работать с asp.net core web api и angular, я могу использовать функции по умолчанию, например

AddSpaStaticFiles
UseSpa

Как я могу использовать веб-сборку Blazor как angular? Или как можно заменить существующий Angular SPA клиентом Blazor?

Некоторые ссылки предоставили решение для предварительного просмотра сборки Blazor. Но такой же функциональности нет в последней.

https://csharp.christiannagel.com/2019/08/27/blazorserverandclient/ < / а>

    app.UseClientSideBlazorFiles<Client.Startup>();
 
    app.UseEndpoints(endpoints =>
    {
      endpoints.MapDefaultControllerRoute();
      endpoints.MapFallbackToClientSideBlazor<Client.Startup>("index.html");
    });

comment
Я почти уверен, что это другой тип проекта. Попробуйте выполнить это, чтобы увидеть, что он создает   -  person Michael    schedule 07.07.2020


Ответы (1)


Помните, что приложения веб-сборки созданы для работы как другие SPA, такие как Angular или React, это означает, что вы создаете представление представления или приложение веб-сборки Blazor в независимом проекте, а затем получаете данные из какой-либо веб-службы, например Rest API сделано в .Net Core 3.1, чтобы создать проект веб-сборки Blazor, просто перейдите в раздел Файл - ›Создать -› Проект - ›Приложение Blazor -› Приложение Blazor WebAssembly, не выбирайте параметр ASP.NET Core Hosted, это прикрепит ваш проект в основной сервер .net напрямую, как проект MVC.

введите описание изображения здесь

После создания вашего нового проекта вам просто нужно вызвать конечные точки бэкэнда с помощью встроенного Клиентская библиотека Http, которая поставляется с .Net Core, или вы можете создать свою собственную библиотеку с помощью .Net HttpClient и внедрить ее в свои компоненты или страницы, используя Внедрение зависимостей, если вы хотите создать свою собственную библиотеку, выполните следующий процесс:

Сначала создайте этот HttpObject:

public class HttpResultObject<T>
    {
        public bool IsSuccessful { get; set; }
        public HttpStatusCode HttpResultCode { get; set; }        
        public T Result { get; set; }
    }

Затем создайте свой библиотечный класс:

public class MyLibrary : IMyLibrary
{
    public string GetApiUri(string server)
    {
              
         if (server.Equals("auth"))
             return "https://localhost:8080/api/";
            
             return "https://localhost:8080/api/";
    }
    
    //Http Get Method Example
    public async Task<HttpResultObject<U>> SetAppMethodGetParametersAsync<U>(string server, string method, Dictionary<string, object> parameters, CancellationToken token) where U : class 
    { 
         string getParameters = string.Empty;
    
         foreach(var p in parameters)
         {
              if (p.Value.GetType() == typeof(string))
                  getParameters = getParameters.Equals(string.Empty) ? "?" + p.Value.ToString() : "&" + p.Value.ToString();
         }
    
         var uri = new System.Uri(GetApiUri(server) + method + "/" + getParameters) ;                       
    
         var response = await CallAppMethodGetAsync(uri, token);           
    
         var result = new HttpResultObject<U>()
         {
             IsSuccessful = response.IsSuccessStatusCode,
             HttpResultCode = response.StatusCode,                
             Result = JsonSerializer.Deserialize<U>(response?.Content?.ReadAsStringAsync()?.Result)
         };         
    
         return result;
    }

    private async Task<HttpResponseMessage> CallAppMethodGetAsync(System.Uri uri, CancellationToken token)
    {
        Console.WriteLine(uri.ToString());

        HttpStatusCode responseStatus = HttpStatusCode.BadRequest;
        try
        {                
            HttpClient client = new HttpClient
            {
                Timeout = TimeSpan.FromMilliseconds(240000)
            };

            HttpResponseMessage response = new HttpResponseMessage(responseStatus);
            HttpRequestMessage request = new HttpRequestMessage()
            {
                RequestUri = uri,                  
                Method = HttpMethod.Get
            };

            var authToken = this.GetLocalStorageItem("authToken");                

            client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

            if (authToken != null && authToken.GetType() == typeof(string))                                    
                client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", Convert.ToString(authToken));                

            token.ThrowIfCancellationRequested();

            response = await client.SendAsync(request, token);

            responseStatus = response == null ? HttpStatusCode.BadRequest : response.StatusCode;

            if (response != null && responseStatus != HttpStatusCode.OK && responseStatus != HttpStatusCode.Accepted)
            {

                HttpResponseMessage result = new HttpResponseMessage(responseStatus)
                {
                    Content = new StringContent(response.Content?.ReadAsStringAsync()?.Result, Encoding.UTF8, "application/json")
                };


                return response;
            }

            return response;
        }
        catch (WebException webException)
        {

        }
        catch (System.Net.Sockets.SocketException socketException)
        {

        }
        catch (HttpRequestException httpRequestException)
        {

        }
        catch (ArgumentException argumentException)
        {

        }
        catch (System.Exception exception)
        {

        }

        return new HttpResponseMessage(responseStatus);
    }
}  

Теперь создайте свой интерфейс ILibrary и объявите реализованные методы:

public interface IMyLibrary
{

     string GetApiUri(string server);

     Task<HttpResultObject<U>> SetAppMethodGetParametersAsync<U>(string server, string method, Dictionary<string, object> parameters, CancellationToken token) where U : class;

}

Объявите свою инъекцию зависимостей в файле startup.cs в методе ConfigureServices:

public void ConfigureServices(IServiceCollection services)
{
    services.AddTransient<IMyLibrary, MyLibrary>();
}

Теперь, если вы хотите использовать свою библиотеку в каком-либо компоненте или странице Razor, просто введите ее следующим образом:

@inject IMyLibrary  _myLibrary

@code
{

    private async Task MyHttpGetCall()
    {  
       var cts = new CancellationTokenSource();
        
       var result = await _myLibrary.SetAppMethodPostParametersAsync<HttpResultObject<MyCustomObject>>("auth", new Dictionary<string, object>(), cts.Token);

       if (result.IsSuccesful)
       { 
          //whatever you want to do
       }
    }
}

И это все !, это два способа подключить ваш интерфейсный веб-сайт, разработанный с помощью приложения Blazor Web Assembly, к вашему Backend так же, как вы это делаете с Angular или React.

person Elsavies    schedule 14.07.2020