ASP.NET Core Blazor 3.x(Server-side)-call Web API using System.Net.Http.Json (wjl)-iaspnetcore.com

version:ASP.NET Core Blazor Server 3.x

using Httpclient+using System.Net.Http.Json; //for client.GetFromJsonAsync using System.Text.json; //for

Table of Content

Project Library for Service

Project Web Api

Project Blazor 3.x(Server-side)

Project Web Api

1. Project Library for Service

step 1: write service

 public partial interface IProductStockService
    {

        /// <summary>
        /// Inserts a userInfo
        /// </summary>
        /// <param name="blogPost">userInfo</param>
        void InsertProductStock(ProductStock productStock);



        /// <summary>
        /// Updates the userInfo
        /// </summary>
        /// <param name="userInfo">userInfo</param>
        void UpdateProductStock(ProductStock productStock);


        /// <summary>
        /// Deletes a userInfo
        /// </summary>
        /// <param name="userInfo">userInfo</param>
        void DeleteProductStock(ProductStock productStock);


        ProductStock GetProductStockById(string id);


        /// <summary>
        /// mongodb数据库中的微信用户
        /// </summary>
        /// <returns></returns>
        Task<List<ProductStock>> GetAllProductStock();


        Task AsyncWxUserInfoToDatabase();


    }

2. Project Web Api

step 2:inject services

 services.AddScoped<IProductStockService, ProductStockService>();

step 3: Add api Controller

   [Route("api/[controller]")]
    [ApiController]
    public class ProductStockController : ControllerBase
    {

        #region Fields
        private readonly ILogger _logger;

        //微信官方服务器接口
        private readonly IAccessTokenService _accessTokenService;
        private readonly IUserManagementService _userManagementService;


        //mongodb 数据库存储服务
        private readonly IUserWeChatPlatformAccountService _userWeChatPlatformAccountService;
        private readonly IProductStockService _productStockService;



        #endregion

        #region Ctor

        public ProductStockController(ILogger<ProductStockController> logger,
            //微信官方服务器接口
            IAccessTokenService accessTokenService,
            IUserManagementService userManagementService,

            //mongodb 数据库存储服务
            IUserWeChatPlatformAccountService weChatPlatformAccountService,
            IProductStockService productStockService


            )
        {
            this._logger = logger;

            //微信官方服务器接口
            this._accessTokenService = accessTokenService;
            this._userManagementService = userManagementService;

            //mongodb 数据库存储服务
            this._userWeChatPlatformAccountService = weChatPlatformAccountService;
            this._productStockService = productStockService;


        }




        #endregion

        #region Methods

        [HttpGet]
        public async Task<IActionResult> Get()
        {
            var results = await _productStockService.GetAllProductStock();
            return Ok(results);
        }
        [HttpGet("{id}")]
        public async Task<IActionResult> Get(string id)
        {
            var result =  _productStockService.GetProductStockById(id);
            return Ok(result);
        }
        [HttpPost]
        public async Task<IActionResult> Post(ProductStock productStock)
        {
            _productStockService.InsertProductStock(productStock);
           
            return Ok(productStock.Id);
        }

        [HttpPut]
        public async Task<IActionResult> Put(ProductStock productStock)
        {
            
            _productStockService.UpdateProductStock(productStock);
            return NoContent();
        }

        [HttpDelete("{id}")]
        public async Task<IActionResult> Delete(string id)
        {
            var productStock = _productStockService.GetProductStockById(id);
            _productStockService.DeleteProductStock(productStock);
            return NoContent();
        }

        #endregion
    }

step 4: call web api for test

http://localhost:5000/api/ProductStock

output:

[]

Project Blazor Server 3.x(Server-side)

step 5:Reference the System.Net.Http.Json NuGet package in the project file.

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>


  <ItemGroup>
   
    <PackageReference Include="System.Net.Http.Json" Version="3.2.1" />
  </ItemGroup>
  
</Project>

step 6: Add List.Razor

for version 3.1.301 I think the package location has changed.Currently, the namespace is: System.Net.Http.Json.

That will give you access to: HttpClientJsonExtensions

A. If you want to put that code into a separate class within your Blazor WebAssembly project, all you need is to put this at the top of your class file:

@using System.Net.Http.Json

Obviously these extension methods are doing serialization, but what's interesting is that the package doesn't depend on Newtonsoft.Json because it uses the new System.Text.Json instead.

services.AddHttpClient();

@page "/Pages/Catalog/ProductStock/List"
@using iAspNetCore.Weixin.User.Core.Domain.Catalog
@using System.Net.Http.Json
@inject HttpClient client
@inject IJSRuntime js

  
<h3>Developers</h3>
<small>Add as many developers as you wish.</small>
<div class="form-group">
    <a class="btn btn-success" href="developer/create"><i class="oi oi-plus"></i> Create New</a>
</div>
<br>
@if (developers == null)
{
    <text>Loading...</text>
}
else if (developers.Length == 0)
{
    <text>No Records Found.</text>
}
else
{
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Experience (Years)</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (ProductStock dev in developers)
            {
                <tr>
                    <td>@dev.Id</td>
                    <td>@dev.ProductTypeId</td>
                    <td>@dev.CreatedOnUtc</td>
                    <td>@dev.UpdatedOnUtc</td>
                    <td>@dev.IsDeleted</td>
                    <td>
                        <a class="btn btn-success" href="developer/edit/@dev.Id">Edit</a>
                        <button class="btn btn-danger" @onclick="@(() => Delete(dev.Id.ToString()))">Delete</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}
@code {
    ProductStock[] developers { get; set; }
    protected override async Task OnInitializedAsync()
    {
        developers = await client.GetFromJsonAsync<ProductStock[]>("http://localhost:5000/api/ProductStock");
    }
    async Task Delete(string developerId)
    {
        var dev = developers.First(x => x.Id.ToString() == developerId);
        if (await js.InvokeAsync<bool>("confirm", $"Do you want to delete {dev.ProductTypeId}'s ({dev.Id}) Record?"))
        {
            await client.DeleteAsync($"api/ProductStock/{developerId}");
            await OnInitializedAsync();
        }
    }
}