How To Make Search Filter In Asp.net Core MVC C# (db First Approach EF-CORE) (Part-5)

Hello & As-salam u alikum ! , In this article we will learn to apply a search filter on the data which we had get from sql server table on asp.net core view page.
Note : For Beginner Guide Articles :

https://dotnetcorecommunity.blogspot.com/p/aspnet-core-tutorials-paracticals.html


 Step# 1:  

Watch previous article for displaying data on asp.net core view page from sql server table.

https://dotnetcorecommunity.blogspot.com/2019/10/display-data-from-sql-server-table-in.html

In last blog we had a Index Action method in Custom Controller which was like this .

-------------------------------------------------------------------------------------------------------

    [HttpGet]

        public async Task<IActionResult> Index(string sortOrder)

        {

            ViewData["NameSortParm"] = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";

            ViewData["DateSortParm"] = sortOrder == "Date" ? "date_desc" : "Date";

            var li = from s in db.TblUser

                     select s;

            switch (sortOrder)

            {

                case "name_desc":

                    li = li.OrderByDescending(s => s.UUserName);

                    break;

                case "Date":

                    li = li.OrderBy(s => s.UAddedDate);

                    break;

                case "date_desc":

                    li = li.OrderByDescending(s => s.UAddedDate);

                    break;

                default:

                    li = li.OrderBy(s => s.UUserName);

                    break;

            }

            return View(await li.AsNoTracking().ToListAsync());

        }

-------------------------------------------------------------------------------------------------------

Now,  I am going to add a new input parameter which will represent the searched keyword in action result. Below are the changes in code to apply Search Filter.

 Step# 2:  

Paste the below code in replace of last Index Action method.

Code Snippet: 

--------------------------------------------------------------------------------------------------------

 [HttpGet]

        public async Task<IActionResult> Index(string sortOrder, string searchString)

        {

            ViewData["NameSortParm"] = String.IsNullOrEmpty(sortOrder) ? "name_desc" : "";

            ViewData["DateSortParm"] = sortOrder == "Date" ? "date_desc" : "Date";

            ViewData["CurrentFilter"] = searchString;

            var li = from s in db.TblUser

                     select s;

            if (!String.IsNullOrEmpty(searchString))

            {

                li = li.Where(s => s.UUserName.Contains(searchString)

                                       || s.UEmail.Contains(searchString));

            }

            switch (sortOrder)

            {

                case "name_desc":

                    li = li.OrderByDescending(s => s.UUserName);

                    break;

                case "Date":

                    li = li.OrderBy(s => s.UAddedDate);

                    break;

                case "date_desc":

                    li = li.OrderByDescending(s => s.UAddedDate);

                    break;

                default:

                    li = li.OrderBy(s => s.UUserName);

                    break;

            }

            return View(await li.AsNoTracking().ToListAsync());

        }

--------------------------------------------------------------------------------------------------------

Step# 3  

Go to the Index.cshtml page & add the following Html to apply Search filter on view page.

Code Snippet: 

--------------------------------------------------------------------------------------------------------

 <form asp-action="Index" method="get">

            <div class="form-actions no-color">

                <p style="margin-top:20px">

                     <input type="text"  name="SearchString" value="@ViewData["currentFilter"]" />

                    <input type="submit" value="Search" class="btn btn-outline-success btn-sm" /> |

                    <a asp-action="Index">Back to Full List</a>

                </p>

            </div>

        </form>

--------------------------------------------------------------------------------------------------------

Conclusion : There you go to use search filter on your view page. Thank you for reading ,Have a good day ! In the next article we will learn to apply Pagination in asp.net core.

Previous Lesson                                                                                                Next Lesson