如何实现搜索功能

Question

我在导航栏中创建了搜索栏我想在导航栏中搜索会员并且我在主页上创建了 bootstrap 卡片

这是我的会员模型

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; }
    }

这是我对搜索栏的看法

<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

尽管您提供的代码不足以提供完整的示例对于您的上下文，您可以大致按照以下步骤使用 ViewData 功能实现搜索选项。

工作原理

默认情况下，我们将在索引页面上加载所有成员。因为开头 search key 将是空的。所以我们为此设置了条件。现在加载所有成员列表后，我们可以 search。当我们输入任何 search key 时，它会将值提交给使用 ViewData["CurrentFilter"] 的控制器最终将通过 search key 和 return 视图搜索数据库返回。

控制器

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);
            
        }

注意： 目前，我们已经在 Member Name 和 Gender 上实现了搜索，您也可以通过简单地添加扩展到其他属性 || or 像这样：

members = members.Where(m => m.Name.Contains(searchString)
          || m.Gender.Contains(searchString || any Other Fields));

查看

@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>

导航栏

<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>

输出

如果您需要任何进一步的帮助，请see our official document here。

如何实现搜索功能

How to implement Search Functionality

asp.net

asp.net-mvc

asp.net-core

asp.net-core-mvc