This article is the second part for Create Angular Project and Communicate with .Net Core

1. Data Result Service

As we need to support filter and paging data from Api, so we also need to create a date result service for handle it. We can create this service in MyDemo.Core Api project:

1.1. Create the properties for filter and paging

//MyDemo.API/MyDemo.Core/Services/DataResultService.cs

public class DataResultService<T>
{
   #region Properties
    /// <summary>
    /// The data result.
    /// </summary>
    public List<T> Data { get; private set; }

    /// <summary>
    /// Zero-based index of current page.
    /// </summary>
    public int PageIndex { get; private set; }

    /// <summary>
    /// Number of items contained in each page.
    /// </summary>
    public int PageSize { get; private set; }

    /// <summary>
    /// Total items count
    /// </summary>
    public int TotalCount { get; private set; }

    /// <summary>
    /// Total pages count
    /// </summary>
    public int TotalPages { get; private set; }

    /// <summary>
    /// TRUE if the current page has a previous page,
    /// FALSE otherwise.
    /// </summary>
    public bool HasPreviousPage
    {
        get
        {
            return (PageIndex > 0);
        }
    }

    /// <summary>
    /// TRUE if the current page has a next page, FALSE otherwise.
    /// </summary>
    public bool HasNextPage
    {
        get
        {
            return ((PageIndex + 1) < TotalPages);
        }
    }

    /// <summary>
    /// Sorting Column name (or null if none set)
    /// </summary>
    public string? SortColumn { get; set; }

    /// <summary>
    /// Sorting Order ("ASC", "DESC" or null if none set)
    /// </summary>
    public string? SortOrder { get; set; }

    /// <summary>
    /// Filter Column name (or null if none set)
    /// </summary>
    public string? FilterColumn { get; set; }
    /// <summary>
    /// Filter Query string
    /// (to be used within the given FilterColumn)
    /// </summary>
    public string? FilterQuery { get; set; }
    #endregion
}

1.2. Create a private constructor

We need to return the data object for client side and include the above properties, so we can use a private constructor for return the data

private DataResultService(
    List<T> data,
    int count,
    int pageIndex,
    int pageSize,
    string? sortColumn,
    string? sortOrder,
    string? filterColumn,
    string? filterQuery)
{
    Data = data;
    PageIndex = pageIndex;
    PageSize = pageSize;
    TotalCount = count;
    TotalPages = (int)Math.Ceiling(count / (double)pageSize);
    SortColumn = sortColumn;
    SortOrder = sortOrder;
    FilterColumn = filterColumn;
    FilterQuery = filterQuery;
}

1.3. Get paging data

Cause I want to support dynamic filter with Linq, so we need to create a method for handle this, and need to install below packages from Nuget for support dynamic filter query

System.Linq.Dynamic.Core
System.Linq.Async

Now we can create the below method

public static async Task<DataResultService<T>> CreateAsync(
            IQueryable<T> source,
            int pageIndex,
            int pageSize,
            string? sortColumn = null,
            string? sortOrder = null,
            string? filterColumn = null,
            string? filterQuery = null)
        {
          //todo...
        }

this method can support many parameters from client side, because these parameters were passed from client by a Get method with a string format, so the first thing we need to do is split the column and query, after that, just create a dynamic SQL query pass to Linq object for get data

if (!string.IsNullOrEmpty(filterColumn)
    && !string.IsNullOrEmpty(filterQuery))
{
    if (filterColumn.Contains(","))
    {
        //handle multiple columns filter
        var index = 0;
        var sql = "";
        var queries = filterQuery.Split(',');
        foreach (var column in filterColumn.Split(','))
        {
            if (!string.IsNullOrEmpty(queries[index]) && queries[index] != "null")
            {
                sql += string.Format("{0}.Contains(@{1}) and ", column, index);
            }
            index++;
        }
        if (sql.Length > 0)
        {
            sql = sql.Substring(0, sql.Length - 4); //remove the end of 'and '
        }
        if (sql != "")
        {
            source = source.Where(sql, queries);
        }
    }
    else
    {
        source = source.Where(
        string.Format("{0}.Contains(@0)",
        filterColumn),
        filterQuery);
    }
}

get the total items and generate the data for paging

var count = await source.CountAsync();

//sort data by column 
if (!string.IsNullOrEmpty(sortColumn))
{
    sortOrder = !string.IsNullOrEmpty(sortOrder)
    && sortOrder.ToUpper() == "ASC" ? "ASC" : "DESC";

    source = source.OrderBy(string.Format("{0} {1}",sortColumn,sortOrder));
}

//get the data by paging query
source = source.Skip(pageIndex * pageSize).Take(pageSize);

//convert to list items
var data = await source.ToAsyncEnumerable().ToListAsync();

//generate the result by private constructor
return new DataResultService<T>(
            data,
            count,
            pageIndex,
            pageSize,
            sortColumn,
            sortOrder,
            filterColumn,
            filterQuery);

2. Update UserController

After created the DataResultService , we can update our UserController.

First, update the GetUsers for support paging parameters, and change the return value to DataResultService<User>

public async Task<ActionResult<DataResultService<User>>> GetUsers(
                        int pageIndex = 0, int pageSize = 10,
                        string? sortColumn = null, string? sortOrder = null,
                        string? filterColumn = null, string? filterQuery = null)

update the apiResult type to DataResultService<User>

var apiResult = new ApiResult<DataResultService<User>>();

in the end, update the get data method

var users = _userRepository.GetAll();

apiResult.Data = await DataResultService<User>.CreateAsync(
            users,
            pageIndex,
            pageSize, sortColumn,
            sortOrder, filterColumn,
            filterQuery);

3. Test the Api

Ok, we have finished the changes with our Api, now we can try it with the angular client.

First, start the Api project in VS Code console with below command (don’t forget goto the Api folder)

dotnet watch run

and create another new console and goto MyDemo.Client folder to run below command

npm run hmr

after that, you should access the user management page as below URL

http://localhost:4810/user-management

and if everything is ok, the result should be like below

after search by user name