Hi Team,
I am working on blazor web assembly project, wherein i am building a Blazor WebAssembly application that retrieves a list of customers from an API endpoint and displays them in a paginated and sortable grid using RadzenGrid.
{
"searchKeywords": [
{
"columnName": "string",
"value": "string"
}
],
"pageIndex": 0,
"pageSize": 0,
"sortColumn": "string",
"sortOrder": "string"
}
The above payload is an example of the JSON object that the user will pass to the API when making a request to search for employees, customers or orders. The payload contains several properties, which are used to specify the search criteria and pagination settings for the request.
The searchKeywords property is an array of SearchKeyword objects. Each SearchKeyword object has two properties: columnName and value. The columnName property specifies the name of the column that the value property should be used to search on. For example, if the user wants to search for employees with the name "John Smith", they would pass an array containing a single SearchKeyword object, with the columnName property set to "FullName" and the value property set to "John Smith".
The pageIndex property is used to specify the page index of the search results that should be returned. For example, if the user wants to retrieve the second page of search results, with 25 results per page, they would set the pageIndex property to 2 and the pageSize property to 25.
The sortColumn and sortOrder properties are used to specify how the search results should be sorted. The sortColumn property specifies the name of the column that the results should be sorted by, and the sortOrder property specifies the order in which the results should be sorted (e.g. "asc" for ascending or "desc" for descending).
I hope the above explanation helps you to understand payload structure of the API. API takes care for the searching, sorting and pagination.
I have been trying to implement the Blazor component that uses the API end point to give the desired result but the code is not working fine. Whenever I am trying to pass any searchkeyword for any of the column, it is not calling the API instead doing client-side filtering, that i don't want.
@code {
private List customers;
private int pageIndex = 0;
private int pageSize = 25;
private int total;
private string filter;
private string sort;
[Inject]
public HttpClient HttpClient { get; set; }
protected override async Task OnInitializedAsync()
{
await LoadData();
}
private async Task LoadData()
{
var payload = new
{
searchKeywords = new[]
{
new { columnName = "FullName", value = "" },
new { columnName = "Email", value = "" },
new { columnName = "Phone", value = "" },
new { columnName = "CompanyName", value = "" },
new { columnName = "FirstName", value = "" },
new { columnName = "LastName", value = "" },
new { columnName = "BrickStandard", value = "" },
new { columnName = "BrickExpanded", value = "" },
new { columnName = "BrickClaim", value = "" },
new { columnName = "Status", value = "" },
new { columnName = "QuantityOrdered", value = "" },
new { columnName = "DateLastOrderedOn", value = "" },
new { columnName = "RegisteredOn", value = "" }
},
pageIndex = pageIndex,
pageSize = pageSize,
sortColumn = "",
sortOrder = ""
};
var json = JsonConvert.SerializeObject(payload);
var data = new StringContent(json, Encoding.UTF8, "application/json");
var response = await HttpClient.PostAsync("https://localhost:7063/customers/search", data);
response.EnsureSuccessStatusCode();
var responseJson = await response.Content.ReadAsStringAsync();
var customers = JsonConvert.DeserializeObject<List<CustomerResponse>>(responseJson);
this.customers = customers;
this.total = customers.Count;
}
private async Task OnFilterChanged(string value)
{
pageIndex = 0;
filter = value;
var payload = new
{
searchKeywords = new[]
{
new { columnName = "FullName", value = value },
new { columnName = "Email", value = value },
new { columnName = "Phone", value = value },
new { columnName = "CompanyName", value = value },
new { columnName = "FirstName", value = value },
new { columnName = "LastName", value = value },
new { columnName = "BrickStandard", value = value },
new { columnName = "BrickExpanded", value = value },
new { columnName = "BrickClaim", value = value },
new { columnName = "Status", value = value },
new { columnName = "QuantityOrdered", value = value },
new { columnName = "DateLastOrderedOn", value = value },
new { columnName = "RegisteredOn", value = value }
},
pageIndex = pageIndex,
pageSize = pageSize,
sortColumn = "",
sortOrder = ""
};
var response = await HttpClient.PostAsJsonAsync("https://localhost:7063/customers/search", payload);
response.EnsureSuccessStatusCode();
var result = await response.Content.ReadFromJsonAsync<SearchResult<CustomerResponse>>();
customers = result.Items;
total = result.TotalCount;
}
private async Task OnSortChanged(string columnName, bool descending)
{
pageIndex = 0;
var payload = new
{
searchKeywords = new[]
{
new { columnName = "FullName", value = filter },
new { columnName = "Email", value = filter },
new { columnName = "Phone", value = filter },
new { columnName = "CompanyName", value = filter },
new { columnName = "FirstName", value = filter },
new { columnName = "LastName", value = filter },
new { columnName = "BrickStandard", value = filter },
new { columnName = "BrickExpanded", value = filter },
new { columnName = "BrickClaim", value = filter },
new { columnName = "Status", value = filter },
new { columnName = "QuantityOrdered", value = filter },
new { columnName = "DateLastOrderedOn", value = filter },
new { columnName = "RegisteredOn", value = filter }
},
pageIndex = pageIndex,
pageSize = pageSize,
sortColumn = columnName,
sortOrder = descending ? "desc" : "asc"
};
var response = await HttpClient.PostAsJsonAsync("https://localhost:7063/customers/search", payload);
response.EnsureSuccessStatusCode();
var result = await response.Content.ReadFromJsonAsync<SearchResult<CustomerResponse>>();
customers = result.Items;
total = result.TotalCount;
}
private async Task OnPageChanged(int page)
{
pageIndex = page - 1;
var payload = new
{
searchKeywords = new[]
{
new { columnName = "FullName", value = filter },
new { columnName = "Email", value = filter },
new { columnName = "Phone", value = filter },
new { columnName = "CompanyName", value = filter },
new { columnName = "FirstName", value = filter },
new { columnName = "LastName", value = filter },
new { columnName = "BrickStandard", value = filter },
new { columnName = "BrickExpanded", value = filter },
new { columnName = "BrickClaim", value = filter },
new { columnName = "Status", value = filter },
new { columnName = "QuantityOrdered", value = filter },
new { columnName = "DateLastOrderedOn", value = filter },
new { columnName = "RegisteredOn", value = filter }
},
pageIndex = pageIndex,
pageSize = pageSize,
sortColumn = "",
sortOrder = ""
};
var response = await HttpClient.PostAsJsonAsync("https://localhost:7063/customers/search", payload);
response.EnsureSuccessStatusCode();
var result = await response.Content.ReadFromJsonAsync<SearchResult<CustomerResponse>>();
customers = result.Items;
total = result.TotalCount;
}
Above is my code, hope i will get a proper response with explanation and at least a detailed documents which explains the process of implementing. Specially binding columns to the API calls.