为参考表的客户端查找征求设计建议

Question

在基于VB.net的web应用程序中，我很难在引用表中实现查找功能。具体来说，我希望用户能够在应用程序中的几个地方从参考表中选择一所学校。该解决方案必须在客户端工作，不需要回发，并且用户可以输入名称或地址片段来限制他们的可用选择。

我的第一次尝试涉及一个隐藏的div (在客户端扩展)、一个显示全套学校的GridView和一个Javascript函数，该函数根据用户输入的姓名或地址导航和隐藏元素。它起了作用，尽管由于GridView表行呈现速度慢，当与整个4,000条引用记录一起使用时，性能会受到严重影响。

目前，我正在查看一个ObjectDataSource (缓存)，它将用于根据用户选择手动在div中呈现表条目。从客户端看，这似乎非常辛苦和棘手。

有没有其他的选择，也许是aspx页面，可以在原始页面的基础上打开(而不需要回发)？

在这个时候，我正在寻找设计建议，因此没有代码显示。

Answer 1

您已经确定了需要解决的三个问题:您需要在本地查询大量数据，需要某种用户界面来显示数据，还需要有一些客户端数据过滤逻辑。

如果我处在您的情况下，我会考虑使用来自众多JavaScript库中的一个免费的第三方UI组件。没有必要重新发明轮子。UI组件提供了所有您需要的内置内容:它们可以高效地绑定到本地数据，并且有过滤的方法。我会给出一些例子，说明如何使用Kendo来实现它，这是我选择的武器，但类似的解决方案可以通过许多其他框架获得。

数据

首先，我建议您使用Json.NET或类似的方法将引用表中的数据序列化为JSON。然后，将生成的字符串呈现为页面上的JavaScript变量：

 var data = [{"SchoolName": "School One", "Address": "Address One"},
        {"SchoolName": "School Two", "Address": "Address Two"},...];

UI

听起来好像网格对此来说太过分了。我会用下拉列表代替。Kendo UI提供了一个免费的，它支持html模板，允许您使它的记录看起来像一个表。换句话说，您可以在一列中有学校名称，而在另一列中有地址。下面是一个多列布局的示例：

​

​

在这里查看更多示例：https://demos.telerik.com/kendo-ui/dropdownlist/index

滤波

最后，您需要在下拉组件上设置筛选。默认情况下，它支持基于一个数据字段的筛选，但是可以很容易地设置它来过滤您的所有字段(学校名称、地址、电子邮件等)。这是记录在案的这里。

最后，我提供了一个快速示例，说明该组件将如何处理本地JSON数据、多列和筛选：https://dojo.telerik.com/AvOLOrob

希望这能有所帮助。