ASP.NET CORE 5 MVC 如何实现有效的搜索栏？

Question

我创建了一个项目站点，您可以在其中上传、下载、删除和预览文件。我想实现一个搜索栏，但作为 C# 的新手，我不知道如何 link 它或在控制器中正确实现它。谁能帮我吗？太感谢了！（请记住我没有数据库）

<form methord="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Index">
    <input type="file" name="fifile" />
    <input type="submit" value="Upload" />
        <hr />
</form>
    <table class="table">
        <tr>
            <th>File Name</th>

        </tr>
        @foreach (var item in FileClass.Filename)
        {
            <tr>
                <td>@item.Name</td>
                <td><a href="@Url.Action("Download","Home",new { filename=item.Name })">Download</a></td>
                @if (User.IsInRole("Admin"))
                {
                    <td><a href="@Url.Action("Delete", "Home", new { filedel = item.Name })">Delete</a></td>
                }
                <td><a href="/Home/DocumentViewer/@item.Name">Viewer</a></td>

            </tr>
        }
    </table>

这是razor视图页面，我也会留下我的文件操作控制器代码：

FileClass fc = new FileClass();
[HttpPost]
        public async Task<IActionResult> Index(IFormFile fifile)
        {
            string ext = Path.GetExtension(fifile.FileName);

            var fisave = Path.Combine(_iweb.WebRootPath, "Uploads", fifile.FileName);
            var stream = new FileStream(fisave, FileMode.Create);
            await fifile.CopyToAsync(stream);
            stream.Close();

            return RedirectToAction("Index");
        }
        public IActionResult Index()
        {

            var displayfc = Path.Combine(_iweb.WebRootPath, "Uploads");
            DirectoryInfo di = new DirectoryInfo(displayfc);
            List<FileInfo> fileinfo = di.GetFiles().ToList(); ;
            FileClass.Filename = fileinfo;
            return View();
        }
       


        public IActionResult Delete(string filedel)
        {
            filedel = Path.Combine(_iweb.WebRootPath, "Uploads", filedel);
            FileInfo fi = new FileInfo(filedel);
            if (fi != null)
            {
                System.IO.File.Delete(filedel);
                fi.Delete();
            }
            return RedirectToAction("Index");
        }
       
      
        public async Task<IActionResult> Download(string filename)
        {
            if (filename == null)
                return Content("filename is not avaiable");
            var path = Path.Combine(_iweb.WebRootPath, "Uploads", filename);

            var memory = new MemoryStream();
            using (var stream = new FileStream(path, FileMode.Open))
            {
                await stream.CopyToAsync(memory);
            }
            memory.Position = 0;
            return File(memory, GetContentType(path), Path.GetFileName(path));
        }
        private string GetContentType(string path)
        {
            var types = GetMimeTypes();
            var ext = Path.GetExtension(path).ToLowerInvariant();
            return types[ext];
        }

        private Dictionary<string, string> GetMimeTypes()
        {
            return new Dictionary<string, string>
            {
                {".txt", "text/plain"},
                {".pdf", "application/pdf"},
                {".doc", "application/vnd.ms-word"},
                {".docx", "application/vnd.ms-word"},
                {".xls", "application/vnd.ms-excel"},
                {".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"},
                {".png", "image/png"},
                {".jpg", "image/jpeg"},
                {".jpeg", "image/jpeg"},
                {".gif", "image/gif"},
                {".csv", "text/csv"}
            };
        }

我不知道如何正确路由，一个示例代码将不胜感激，上帝保佑！

Answer 1

如果想给table添加搜索栏，只需要用js过滤table的数据，这里有一个demo：

<form methord="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Index">
    <input type="file" name="fifile" />
    <input type="submit" value="Upload" />
    <hr />
</form>
<div>
    File Name:<input id="search" />
    <button onclick="search()">search</button>
</div>
<table class="table">
    <tr>
        <th>File Name</th>

    </tr>
    @foreach (var item in FileClass.Filename)
    {
        <tr>
            <td>@item.Name</td>
            <td><a href="@Url.Action("Download","Home",new { filename=item.Name })">Download</a></td>
            @if (User.IsInRole("Admin"))
            {
                <td><a href="@Url.Action("Delete", "Home", new { filedel = item.Name })">Delete</a></td>
            }
            <td><a href="/Home/DocumentViewer/@item.Name">Viewer</a></td>

        </tr>
    }
</table>
@section scripts
{
    <script>
        function search() {
            $("tr").each(function (index, value) {
                if (index > 0 && !$(this).find("td")[0].innerText.includes($("#search").val())) {
                    $(this).attr("hidden", true);
                } else {
                    $(this).removeAttr("hidden");
                }
                console.log(value);
            })
        }
    </script>
}

结果：

ASP.NET CORE 5 MVC 如何实现有效的搜索栏？

ASP.NET CORE 5 MVC How Can I Implement A Working Search Bar?

asp.net

asp.net-mvc

search

implementation

asp.net-core