MVC Filter Data in Table based on Tab

Scene A 0
Viewed 30

I'm trying to filter the data in the table by clicking on a tab, but I have no idea how to bind data in views.

The view code(Tab):

<ul class="nav nav-tabs" role="tablist">
     <li class="nav-item" role="presentation">
          <a class="nav-link active" data-bs-toggle="tab" role="tab" aasp-action="">North</a>
     </li>
     <li class="nav-item" role="presentation">
          <a class="nav-link" data-bs-toggle="tab" role="tab" tabindex="-1">South</a>
     </li>
</ul>

The view code(Data Table):

<table class="table">
    <thead>
        <tr>
            <th>Region Name</th>
            <th>Country Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var data in @Model.Where(data => data.Region_Name.Trim() == REGION_NAME_BASED_ON_TAB).ToList())
        {
        <tr>
            <td>@data.Region_Name</td>
            <td>@data.Country_Name</td>
        </tr>
        }                     
    </tbody>
</table>

as I know maybe this could be solved by using Controller, What would the syntax for this look like?

any suggestions would be helpful.

Thanks!

asp.net-mvc filter html-table
1 Answers

Assuming you are using Entity Framwework

public IActionResult Index(string? REGION_NAME_BASED_ON_TAB)
    {
        var model = from s in db.<YourTableName>
                    select s;

        if (!String.IsNullOrEmpty(REGION_NAME_BASED_ON_TAB))
        {
            model = model.Where(a => a.Region_Name.ToLower().Contains(REGION_NAME_BASED_ON_TAB.ToLower()));
        }


        return View(model.ToList());
    }

Add this before your lising begin

  <li class="nav-item" role="presentation">
          <a class="nav-link active" data-bs-toggle="tab" role="tab"  href="@Url.Action("Index","YoutController",new{REGION_NAME_BASED_ON_TAB= "North"})>North</a>
     </li>
Yat Fei Leong0
Related