如何向显示json数据的表添加搜索函数?

Question

我的ASP。. NET Core项目将Json文件中的数据显示为Razor页面上的表。

现在我想添加一个搜索功能，这样它只显示"对象"。

我在剃刀页面上添加了一个搜索栏，但我不知道如何使用搜索字符串来过滤所有未被选中的内容。

这是我的Razor页面，显示表格(todommodel .cshtml)

@model List<ToDo.Models.ToDoStructure>
@{
ViewBag.Title = "ToDoModel";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<form asp-action="ToDoModel" method="get">
<div class="form-actions no-color">
<p>
Find by userId: <input type="text" name="SearchString" value="@ViewData["CurrentFilter"]" />
<input type="submit" value="Search" class="btn btn-default" /> |
<a asp-action="ToDoModel">Back to Full List</a>
</p>
</div>
</form>
<h2>ToDo-List</h2>
@{ 
<table border="1">
<tr>
<th>UserId</th>
<th>Id</th>
<th>Name</th>
<th>Erledigt</th>
</tr>
@foreach (var t in Model)
{
<tr>
<th>@Html.DisplayFor(modelItem => t.userId)</th>
<th>@t.id</th>
<th>@t.title</th>
<th>@t.completed</th>
</tr>
}

</table>
}

控制器(ToDoData.cs)

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using ToDo.Models;
using System.Net;
namespace ToDo.Controllers
{
public class ToDoData : Controller
{
public ActionResult ToDoModel(string searchString)
{
ViewData["CurrentFilter"] = searchString;
var webClient = new WebClient();
webClient.Headers.Add(HttpRequestHeader.Cookie, "cookievalue");
var json = webClient.DownloadString(@"https://jsonplaceholder.typicode.com/todos");
var _toDoData = JsonConvert.DeserializeObject<List<ToDoStructure>>(json);
return View(_toDoData);
}
}
}

(ToDoStrucuture.cs)

namespace ToDo.Models
{
public class ToDoStructure
{
public int userId { get; set; }
public int id { get; set; }
public string title { get; set; }
public bool completed { get; set; }
}
}

我试图弄明白自己,发现人们使用_context但我不知道它是什么。

Answer 1

如果您使用所提供的链接，API服务确实提供了数据过滤功能。

例如链接:https://jsonplaceholder.typicode.com/todos?userId=1

[
{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
},
{
"userId": 1,
"id": 2,
"title": "quis ut nam facilis et officia qui",
"completed": false
},
{
"userId": 1,
"id": 3,
"title": "fugiat veniam minus",
"completed": false
},
{
"userId": 1,
"id": 4,
"title": "et porro tempora",
"completed": true
},
{
"userId": 1,
"id": 5,
"title": "laboriosam mollitia et enim quasi adipisci quia provident illum",
"completed": false
},
{
"userId": 1,
"id": 6,
"title": "qui ullam ratione quibusdam voluptatem quia omnis",
"completed": false
},
{
"userId": 1,
"id": 7,
"title": "illo expedita consequatur quia in",
"completed": false
},
{
"userId": 1,
"id": 8,
"title": "quo adipisci enim quam ut ab",
"completed": true
},
{
"userId": 1,
"id": 9,
"title": "molestiae perspiciatis ipsa",
"completed": false
},
{
"userId": 1,
"id": 10,
"title": "illo est ratione doloremque quia maiores aut",
"completed": true
},
{
"userId": 1,
"id": 11,
"title": "vero rerum temporibus dolor",
"completed": true
},
{
"userId": 1,
"id": 12,
"title": "ipsa repellendus fugit nisi",
"completed": true
},
{
"userId": 1,
"id": 13,
"title": "et doloremque nulla",
"completed": false
},
{
"userId": 1,
"id": 14,
"title": "repellendus sunt dolores architecto voluptatum",
"completed": true
},
{
"userId": 1,
"id": 15,
"title": "ab voluptatum amet voluptas",
"completed": true
},
{
"userId": 1,
"id": 16,
"title": "accusamus eos facilis sint et aut voluptatem",
"completed": true
},
{
"userId": 1,
"id": 17,
"title": "quo laboriosam deleniti aut qui",
"completed": true
},
{
"userId": 1,
"id": 18,
"title": "dolorum est consequatur ea mollitia in culpa",
"completed": false
},
{
"userId": 1,
"id": 19,
"title": "molestiae ipsa aut voluptatibus pariatur dolor nihil",
"completed": true
},
{
"userId": 1,
"id": 20,
"title": "ullam nobis libero sapiente ad optio sint",
"completed": true
}
]

要过滤选中的userId，需要在url中提供如下查询参数:

var json = webClient.DownloadString($"https://jsonplaceholder.typicode.com/todos?userId={searchString}");

public ActionResult ToDoModel(string searchString)
{
ViewData["CurrentFilter"] = searchString;
var webClient = new WebClient();
webClient.Headers.Add(HttpRequestHeader.Cookie, "cookievalue");
string uri = @"https://jsonplaceholder.typicode.com/todos";
if (!String.IsNullOrEmpty(searchString))
uri = uri + $"?userId={searchString}";

var json = webClient.DownloadString(uri);
var _toDoData = JsonConvert.DeserializeObject<List<ToDoStructure>>(json);
return View(_toDoData);
}

上面的URL将导致数据过滤在服务器端.

---

或者你也可以在内存中执行数据过滤:

1. ,从服务器检索所有数据。
2. 系统使用。Linq.Where()过滤数据

using System.Linq;
public ActionResult ToDoModel(string searchString)
{
ViewData["CurrentFilter"] = searchString;
if (!Int32.TryParse(searchString, out int userId)
{
// Handle when user provides searchString is not a valid integer.
// return to view
}
var webClient = new WebClient();
webClient.Headers.Add(HttpRequestHeader.Cookie, "cookievalue");
string uri = @"https://jsonplaceholder.typicode.com/todos";
var json = webClient.DownloadString(uri);
var _toDoData = JsonConvert.DeserializeObject<List<ToDoStructure>>(json);
_toDoData = _toDoData.Where(x => x.userId == userId)
.ToList();
return View(_toDoData);
}