在ASP.NET MVC中过滤只能通过javascript过滤的数据库记录列表的最佳方法是什么

Question

问题：

假设我在 ASP.NET MVC Web 应用程序中有一个数据库记录列表。按只能通过 Javascript 过滤的条件过滤此列表的最佳方法是什么？

如果我的问题不清楚，请看下面的例子。

示例：

我有一个控制器操作，它在数据库中返回我的全部或部分餐厅，并在它的视图中显示所有这些餐厅：

public ActionResult Index()
{            
    return View(restaurantRepository.GetAll());
}

现在每个餐厅都有一个服务边界，它是一个多边形，我通过以下模型属性将该多边形存储在数据库中：

public class Restaurant
{
      // Other properties omitted...

      public ICollection<Coordinate> Coordinates { get; set; }
}

Coordinates 基本上是表示多边形的纬度/经度对象的集合。

现在我想要的功能是，如果我在地图上给Index 操作一个点（纬度/经度），那么Index 操作应该只返回在其服务边界（多边形）中包含该点的餐厅。

现在显然我无法在控制器中进行此过滤，因为绘制多边形并检查其中是否存在点只能通过 Google Maps API 和 Javascript 完成。

编辑： 感谢@amg-argh 的建议，我搜索了一下，看看我是否可以仅使用 C/C# 检查一个点是否在多边形内，我发现this 帖子有效。尽管如此，我的问题仍然存在。

通过 Javascript 实现此过滤的最佳方法是什么？

我自己的想法：

我想到的是

• 首先将所有餐厅返回视图。

• 然后在视图中我反序列化我的模型

  var model = @Html.Raw(@JsonConvert.SerializeObject(Model, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore }));

• 然后使用 forEach 遍历我的模型并提取满足该条件的餐厅。

  model.forEach(function(restaurant){
          if(checkBoundaries(restaurant, latLng))
          {
             // Valid restaurant. Save the id in an array.
          }
          else
          {
             // Invalid restaurant. discard it.
          }
  });
  

• 然后将带有 AJAX 发布请求的有效餐厅数组发送到控制器操作，该操作返回给定餐厅 ID 的餐厅。

但这些似乎都是大量的工作和不好的做法。有什么想法吗？

Answer 1

这个问题实际上可能适合另一个 stackexchange 站点，因为它更多的是关于程序设计而不是实际实现。不过，要在前端而不是后端实现这一点。

1. 通过Index 方法加载您的视图，该视图实际上应该只包含您的视图所需的存根HTML 和基本元素。想想页眉、页脚、标题等（可能还有前端模板）
2. 使用 WebApi 通过 AJAX 加载您的餐厅列表。所以将 return View(restaurantRepository.GetAll()); 移动到 web api 并执行类似 return Ok(restaurantRespostory.GetAll()) 的操作。
3. 遍历结果，当if(checkBoundaries(restaurant, latLng)) 通过时，使用 JavaScript 将 HTML 元素/标记添加到地图/您尝试在视图中显示的任何视图。当它失败时，忽略它，什么也不做。

这基本上就是您想要做的所有事情，并且会为您节省回发和第二次往返服务器的时间。

虽然我也建议进行一些其他更改

1. 使用前端 MVVM/MVC 框架（angularjs、react、knout 等）通过 JavaScript 呈现结果。过滤您的数组，并使用myViewVariable.inBoundryRestraunts = model.filter(function(r){ return checkBoundaries(r, latLng);}) 之类的内容将其绑定到视图。这样做会更整洁，而不是动态创建一堆 HTMLElement。
2. 寻找某种方式（不需要完美）来限制来自后端的结果。尽管我不知道您的应用程序的具体细节，但我可以想象一个平均规模的城市将拥有数千家甚至数万家餐厅。下载所有这些数据以在前端进行处理将需要很长时间。