Asp Net MVC 5 在局部视图中刷新 table

Question

所以我运行遇到了一个小问题，我很难理解我应该怎么做才能得到结果 want/need。

所以我的应用程序应该显示某个物体在过去 2 小时内的路线。当用户加载应用程序时，他们会看到地图上散布着几个点，当他们单击其中一个对象时，会显示它在过去 2 小时内所走的路线，并且应该更新我拥有的 table与那些坐标。现在，当我在控制器方法中获取对象到达的所有位置时，我会调用填充局部视图。

这就是我开始这一切的方式（当用户点击一个点时执行以下操作）

（我用的是openlayers 3 但是和这个问题无关）

$.ajax({
          type: "GET",
          url: '/Controller/GetRoutes',
          dataType: "json",
          success: function (result) {
                alert('Added');
              
                var layerLines = new ol.layer.Vector({
                    source: new ol.source.Vector({
                        features: [
                            new ol.Feature({
                                geometry: new ol.geom.LineString(routes, 'XY'),
                                name: 'Line'
                            })
                        ]
                    })
                });

                         
                map.addLayer(layerLines);             
            

          },
          error: function (xhr, ajaxOptions, thrownError) {
              //some errror, some show err msg to user and log the error  
              alert(xhr.responseText);
  
          }
      });

因此，正如您从这段代码中看到的，方法 GetRoutes() 将负责获取有关对象去过的地方的信息。

这是控制器（我省略了大部分负责绘制实际路线的代码，因为它有点笨拙）

 [HttpGet]
    public JsonResult GetRoutes()
    {

    var lastpoints = get an arraylist with all the points I want

   var name = get the name of the object 

    RouteInformation(lastPoints,name);

    return Json(lastPoints, JsonRequestBehavior.AllowGet);

    }

我知道我应该在这里改变一些东西，但我不知道是什么。给我最后一点的方法不是我的，但我必须使用它，所以我别无选择，只能接受 arrayList 它 returns 给我。

这是 RouteInformation 方法

 public ActionResult RouteInformation(ArrayList routeList, string name )
       {

           List<ObjPoint> routes = routeList.OfType<ObjPoint>().ToList();

           List<ObjRoute> objRoutes = new List<ObjRoute>();

           objRoutes.Add(new ObjRoute()
                         {

                             name = name,
                             ObjPoints = routes
                          });

           return PartialView("RouteDetailsView", objRoutes);
       }

我的问题是 updating/refreshing table，我在部分视图中看到了它，但我不知道我必须做什么才能用信息更新 table我想显示（我可以得到我似乎无法显示的信息）。

ObjPoint 由纬度、经度、日期、时间组成。

这是 ObjRoute 模型

 public class ObjRoute
{
    public string name { get; set; }
    public  List<ObjPoint> ObjPoints { get; set; }      

}

现在浏览量...

这就是 "main view" 调用局部视图的方式

<div> 
@Html.Partial("routeDetailsView")
</div>

这是我的部分观点

@model webVesselTracker.Models.ObjRoute

@{
    ViewBag.Title = "RouteDetailsView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div>

    <table id="routeTable" class="table">
        <tr>
            
            <th>
               Name
            </th>
            <th>
                Latitude
            </th>
   <th>
                Longitude
            </th>
         
            <th></th>
        </tr>       

@if (Model != null) {

    foreach (var item in Model.ObjPoints)
    {
        
            <tr>      
                <td>                  
                    @Html.DisplayFor(modelItem => item.Latitude)
                </td>
    <td>                  
                    @Html.DisplayFor(modelItem => item.Longitude)
                </td>          
               
            </tr>
}
}

else
{
    <tr>
        <td>
          No object has been selected, please select one
        </td>

    </tr>
}
    </table>

</div>

现在我知道我可以通过在 js 文件中添加某种 json 请求并从那里构建 table 来做到这一点，但我想知道如何做到这一点使用 Razor 以及我在 code/logic 中出错的地方。我应该在其他地方添加一些 ajax 吗？

总结一下：

-User sees points. 
-User clicks point to see the route it made. 
-App draws the route and then sends the route information to a method  table so it can be added to the table
the user can see that information

感谢您抽出宝贵时间，如果我遗漏了什么，请指出，以便我可以更好地修复或解释它。

Answer 1

我终于放弃并研究了 knockout.js，它设法解决了我遇到的所有问题

knockout.js

Asp Net MVC 5 在局部视图中刷新 table

Asp Net MVC 5 refresh a table in a partial view

javascript

asp.net

asp.net-mvc

asp.net-mvc-5