篩選只能通過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＃檢查一個點是否在多邊形內部，我發現這個帖子有效。 不過我的問題依舊。

通過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和視圖所需的基本元素。 想想頁眉，頁腳，標題等（可能還有FrontEnd模板）
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，knockout等），通過JavaScript呈現結果。 過濾你的數組並使用myViewVariable.inBoundryRestraunts = model.filter(function(r){ return checkBoundaries(r, latLng);})綁定到視圖。 這樣做更加整潔，而不是動態創建一堆HTMLElement。
2. 找到（不需要完美）來限制后端的結果。 雖然我不知道您的應用程序的具體細節，但我可以想象一個平均大小的城市將擁有數千甚至數萬家餐館。 下載要在前端處理的所有數據將花費很長時間。