How to implement Search Functionality - asp.net

Question

i create search bar in nav i want to search Member in nav bar and i have create bootstrap cards on home page
This is My Member Model
public class Member
{
[Key]
public int MemberId { get; set; }
[StringLength(60, MinimumLength = 3)]
public string? Name { get; set; }
public string? Gender { get; set; }
public DateTime DOB { get; set; }
public string? MaritalStatus { get; set; }
public string? Address { get; set; }
public long PhoneNo { get; set; }
public string? Skills { get; set; }
public string? Hobbies { get; set; }
public string? JobTitle { get; set; }
public string? Technology { get; set; }
public string? ImageName { get; set; }
public string? ImageLocation { get; set; }
public Team? Team { get; set; }
public ICollection<TeamMember>? TeamMembers { get; set; }
public ICollection<ProjectMember>? ProjectMembers { get; set; }
}
This is my View of search Bar
<form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for..." aria-label="Search" aria-describedby="btnNavbarSearch" />
<button class="btn btn-primary" id="btnNavbarSearch" type="button">Search</button>
</div>
</form>

Answer 1

I create search bar in nav I want to search Member in nav bar and I have create bootstrap cards on home page
Though your given code is not adequate to provide a complete example
for your scenario, you could implement a search option using ViewData functionality roughly by following the below steps.
How It works
By default, we will load all the members on our Index page. Because
at the beginning search key will be empty. So we have set the conditional for that. After loading all the member List now we can search. When we enter any search key it will submit the value to
the controller using ViewData["CurrentFilter"] and finally will
search into the database by that search key and return the view
back.
Controller
public IActionResult Index( string searchString)
{
ViewData["CurrentFilter"] = searchString;
var members = from mem in _context.Members
select mem;
if (!String.IsNullOrEmpty(searchString))
{
members = members.Where(m => m.Name.Contains(searchString)
|| m.Gender.Contains(searchString));
return View(members);
}
var memberList = _context.Members.ToList();
return View(memberList);
}
Note: Currently, we have implemented searching on Member Name and Gender you can extend to other properties as well by simply adding
|| or Like this way:
members = members.Where(m => m.Name.Contains(searchString)
|| m.Gender.Contains(searchString || any Other Fields));
View
#model IEnumerable<DotNet6MVCWebApp.Models.Member>
#{
ViewData["Title"] = "Index";
}
<div class="form-row">
<table>
<tr>
<td>
<a asp-action="CreateMemberView" class="btn btn-success">Create New</a>
</td>
</tr>
</table>
</div>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th>
#Html.DisplayNameFor(model => model.Gender)
</th>
<th>
#Html.DisplayNameFor(model => model.DOB)
</th>
<th>
#Html.DisplayNameFor(model => model.ImageName)
</th>
<th>
Member Details
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Gender)
</td>
<td>
#Html.DisplayFor(modelItem => item.DOB)
</td>
<td>
<img src="~/ImageName/Cover/#item.ImageName"
class="rounded-square"
height="50" width="75"
style="border:1px"
asp-append-version="true" accept="image/*" />
</td>
<td>
<a asp-action="Details" class="btn btn-primary" asp-route-memberId="#item.MemberId">Details</a> | <a asp-action="EditMember" class="btn btn-warning" asp-route-memberId="#item.MemberId">Edit</a>
</td>
</tr>
}
</tbody>
</table>
Nav Bar
<li class="nav-item">
<div class="form-row">
<table>
<tr>
<form method="get" action="/YourController/Index">
<td style="padding-right:940px">
</td>
<td>
<input class="form-control" type="text" placeholder="Search for..." name="SearchString" value="#ViewData["CurrentFilter"]" aria-label="Search" aria-describedby="btnNavbarSearch" />
</td>
<td>
<input type="submit" value="Search" class="btn btn-primary" />
</td>
</form>
</tr>
</table>
</div>
Output
If you need any further assistance on this, please see our official document here.