Search And Display Data In Table/Tabular Format in Asp.net Core 6/MVC using C# (Ms Sql Server)

 In this article i will show you how you can search ad display in table or tabular format from sql server database table in asp.net core 6 / MVC application using c#.net and entity framework. 

Few of my previous articles are Display Data In Table/Tabular Format In Asp Net Core 6/MVC Using C#.Net (Ms Sql Database) , How To Rename Uploaded File Asp.net core 6, Ajax Login Form Using jQuery  In Asp.net Core 6 Using C# Validate From Ms Sql Server Database, How To Connect MS SQL Server Database in Asp.net Core MVC Using C#.Net.

Now we will create a new table in our SQL server database and add some record.

Now for this article we will create a new asp.net core 6 or mvc  application and create a connection to the database using entity framework. You can check my article how to make connection to the MS sql server data base using entity framework in aso.net core 6 or mvc application please check the blow link.

How To Connect MS SQL Server Database in Asp.net Core MVC Using C#.Net

Now we will make the model calls file and add the below code into your model class file.

using System.Collections.Generic;   namespace Project.Models {     public class EmployeeModel     {         public string SearchText { get; set; }         public List<EmplDetail> EmplDetailList { get; set; }     }     public class EmplDetail     {         public int Id { get; set; }         public string EmployeeName { get; set; }         public string Designation { get; set; }         public string Department { get; set; }         public int? Salery { get; set; }     } }

In above code i have taken the list of employee detail and on string type search text. Now we will go to controller class and add and below code.

[HttpGet]         public IActionResult Index()         {             EmployeeModel employeeModel = new EmployeeModel();             employeeModel.EmplDetailList = new List<EmplDetail>();               TestDBContext testDBContext = new TestDBContext();             var data = testDBContext.Employees.ToList()                 ;             foreach (var item in data)             {                 employeeModel.EmplDetailList.Add(new EmplDetail                 {                     Department = item.Department,                     Designation = item.Designation,                     EmployeeName = item.EmployeeName,                     Id = item.Id,                     Salery = item.Salery,                 });             }             return View(employeeModel);         }

 

Above code is the httpget method. In this i am getting all the list and then display it on view. To display the detail we will create a view and add the below code.

@model Project.Models.EmployeeModel @{     ViewData["Title"] = "Home Page"; } @using (Html.BeginForm("Index", "Home", FormMethod.Post)) {     @Html.TextBoxFor(m => m.SearchText)     <input type="submit" value="Search" /><br />     <table border="1">         <thead>             <tr>                 <th>ID</th>                 <th>EMPLOYEE NAME</th>                 <th>DEPARMENT</th>                 <th>DESIGNATION</th>                 <th>SALERY</th>             </tr>         </thead>         <tbody>             @foreach (var item in Model.EmplDetailList)             {                 <tr>                     <td>@item.Id</td>                     <td>@item.EmployeeName</td>                     <td>@item.Department</td>                     <td>@item.Designation</td>                     <td>@item.Salery</td>                 </tr>             }         </tbody>     </table> }

In above view code i have take a textbox for entering search text and a button control on click of which we will perform the search and then display the detail. After this we will write the httppost method at your controller end. In this i will perform search on Employee Name, Department and Designation.

[HttpPost]         public IActionResult Index(EmployeeModel employeeModel)         {             employeeModel.EmplDetailList = new List<EmplDetail>();               TestDBContext testDBContext = new TestDBContext();            var data = testDBContext.Employees.Where(m =>                        m.EmployeeName.Contains(employeeModel.SearchText) ||                       m.Department.Contains(employeeModel.SearchText) ||                      m.Designation.Contains(employeeModel.SearchText)).ToList();             foreach (var item in data)             {                 employeeModel.EmplDetailList.Add(new EmplDetail                 {                     Department = item.Department,                     Designation = item.Designation,                     EmployeeName = item.EmployeeName,                     Id = item.Id,                     Salery = item.Salery,                 });             }             return View(employeeModel);         }     }

 

In above code check the highlighted part of the code.  In this code i have applied where clause to filter the record. Now we have done run the application and check the output.

Here is the default screen.

Now lets add some search text and check the output. 

In above we can check the added search text is "2", and check the final output.

Note: Please change the connection in DB context file defined under protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) In this DBContext file name is "TestDBContext.cs"

Download