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

What is the best way to filter a list of database records that can only be filtered through javascript in ASP.NET MVC

本文关键字:筛选 数据库 记录 列表 是什么 方法 最佳 javascript ASP MVC NET      更新时间:2023-09-26

问题:

假设我在ASP.NET MVC Web应用程序中有一个数据库记录列表。根据只能通过Javascript筛选的标准筛选此列表的最佳方法是什么?

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

示例:

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

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

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

public class Restaurant
{
      // Other properties omitted...
      public ICollection<Coordinate> Coordinates { get; set; }
}

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

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

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

编辑:多亏了@amg-argh的建议,我搜索了一下,看看是否可以只使用C/C#检查一个点是否在多边形内,我找到了这篇有效的帖子。然而,我的问题仍然存在。

通过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 post请求的有效餐厅数组发送到控制器动作,控制器动作返回给定餐厅Id的餐厅。

但这些似乎都是一项艰巨的工作,也是一种糟糕的做法。有什么想法吗?

这个问题实际上可能适用于另一个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、knocket等),通过JavaScript呈现结果。过滤您的数组,并使用类似myViewVariable.inBoundryRestraunts = model.filter(function(r){ return checkBoundaries(r, latLng);})的方法将其绑定到视图。这样做要比动态创建一堆HTMLElement整洁得多
  2. 找到某种方法(不需要完美)来限制后端的结果。虽然我不知道你申请的具体细节,但我可以想象,一个中等规模的城市将有数千家甚至数万家餐馆。下载所有这些数据以便在前端进行处理将花费很长时间