Filter IEnumerable according to cell in table to show dynamic table-CodePudding

I have a table in my front end that has 3 columns and 3 rows.

I want to make the cells clickable and for this to show below a table with filters according to what they clicked.

I have a list to which I would like to apply the filters based on what was clicked. how could I do this?

 ------- ---------- ---------- ---------- 
|       | Col 1    | Col 2    | Col 3    |
 ======= ========== ========== ========== 
| Row 1 | Item 1-1 | Item 2-1 | Item 3-1 |
 ------- ---------- ---------- ---------- 
| Row 2 | Item 1-2 | Item 2-2 | Item 3-2 |
 ------- ---------- ---------- ---------- 
| Row 3 | Item 1-3 | Item 2-3 | Item 3-3 |
 ------- ---------- ---------- ----------

I have

MyList = await GetMyList();

I want that when I click on "Item 1-1" for example, to get below a table with a filter applied to MyList according to the conditions I want for this case (the filters would be different for each cell) such as only when EmployeeName = 'XX' or GlPeriodName = 'YY' how could I do this?

currently I have this (which is showing the entire list):

@if (Model.MyList?.First() is not null)
{
    <h2>Expenditures</h2>
    <table >
        <thead>
        <tr>
            <th>Task Number</th>
            <th>Employee Name</th>
            <th>Employee Number</th>
            <th>GL Period Name</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var expenditure in Model.MyList)
        {
            <tr>
                <td>@expenditure.TaskNumber</td>
                <td>@expenditure.EmployeeName</td>
                <td>@expenditure.EmployeeNumber</td>
                <td>@expenditure.GlPeriodName</td>
            </tr>
        }
        </tbody>
    </table>
}

I understand I can filter with Model.MyList.Where(x => x.parameter = filter), but how do I pass this parameter condition based on what is clicked on what row is clicked in the upper table?
being that the filter is not going to be the same every time such as:

if they click Item 1-1 I want

Model.MyList.Where(x => x.parameterX = valueX)

and if they click Item 1-2:

Model.MyList.Where(x => x.parameterY = valueXY)

CodePudding user response：

You can make the table cell value as an anchor link and use asp-route-{value} to pass the parameter value.

Here is a simple demo:

@page
@model IndexModel
<table >
    <thead>
        <tr>Col1</tr>
        <tr>Col2</tr>
        <tr>Col3</tr>
    </thead>
    <tbody>
        <tr>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="aa">Item 1-1</a></td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="bb">Item 2-1</a></td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="cc">Item 3-1</a></td>
        </tr>
        <tr>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-glPeriodName ="dd">Item 1-2</a> </td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-glPeriodName="ee">Item 2-2</a> </td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-glPeriodName="ff">Item 3-2</a> </td>
        </tr>
        <tr>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="gg">Item 1-3 </a> </td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="hh">Item 2-3 </a> </td>
            <td><a asp-page="Index" asp-page-handler="SpecificEmployee" asp-route-employeeName="ii">Item 3-3 </a></td>
        </tr>
    </tbody>
</table>
@if (Model.MyList!=null)         //it is better to change here in case of null exception.....
{
    <h2>Expenditures</h2>
    <table >
        <thead>
        <tr>
            <th>Task Number</th>
            <th>Employee Name</th>
            <th>Employee Number</th>
            <th>GL Period Name</th>
        </tr>
        </thead>
        <tbody>
        @foreach (var expenditure in Model.MyList)
        {
            <tr>
                <td>@expenditure.TaskNumber</td>
                <td>@expenditure.EmployeeName</td>
                <td>@expenditure.EmployeeNumber</td>
                <td>@expenditure.GlPeriodName</td>
            </tr>
        }
        </tbody>
    </table>
}

PageModel:

public class IndexModel : PageModel
{
   //for easy testing, I just hard coded.....
    public List<TestVM> MyList { get; set; }=new List<TestVM>()
    {
            new TestVM() { EmployeeName = "aa",EmployeeNumber = "1001",GlPeriodName = "dd",TaskNumber = "task1"},
            new TestVM() { EmployeeName = "bb",EmployeeNumber = "1002",GlPeriodName = "ee",TaskNumber = "task2"}
    };
      
    public void OnGetSpecificEmployee(string employeeName,string glPeriodName)
    {
        if(!string.IsNullOrEmpty(employeeName))
            MyList = MyList.Where(a=>a.EmployeeName.Equals(employeeName)).ToList();
        if(!string.IsNullOrEmpty(glPeriodName))
            MyList = MyList.Where(a => a.GlPeriodName.Equals(glPeriodName)).ToList();
    }

    public void OnGet()
    {

    }
}