Home > OS >  How to implement Search Functionality
How to implement Search Functionality

Time:06-08

i create search bar in nav i want to search Member in nav bar and i have create bootstrap cards on home page

enter image description here

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 >
                            <div >
                                <input  type="text" placeholder="Search for..." aria-label="Search" aria-describedby="btnNavbarSearch" />
                                <button  id="btnNavbarSearch" type="button">Search</button>
                            </div>
                        </form>

CodePudding user response:

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 context, 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 >
    <table>
        <tr>
            <td>
                <a asp-action="CreateMemberView" >Create New</a>
                
            </td>
        </tr>
    </table>
</div>


<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"
                     
                     height="50" width="75"
                     style="border:1px"
                     asp-append-version="true" accept="image/*" />
                </td>
                <td>
                    <a asp-action="Details"  asp-route-memberId="@item.MemberId">Details</a> |  <a asp-action="EditMember"  asp-route-memberId="@item.MemberId">Edit</a>
                </td>
            </tr>
        }
    </tbody>
</table>

Nav Bar

<li >
  <div >
        <table>
            <tr>                                       
                <form method="get" action="/YourController/Index">

                              <td style="padding-right:940px">
                                 </td>
                                    <td>
                                        <input  type="text" placeholder="Search for..." name="SearchString" value="@ViewData["CurrentFilter"]" aria-label="Search" aria-describedby="btnNavbarSearch" />
                                    </td>
                                    <td>
                                        <input type="submit" value="Search"  />
                                 </td>
                          </form>
                    </tr>
            </table>
     </div>

Output

enter image description here

If you need any further assistance on this, please see our official document here.

  • Related