从 javascript 调用页面方法

Question

我有一个 javascript 可以根据代码隐藏数据检索器存放图标。我循环地图脚本以在客户端刷新地图。我让脚本在一段时间内重新启动就好了。但是它需要在后面的代码中重新启动服务器端的数据检索器。我喜欢使用 Page Methods 的想法，但不能完全连接 - 我后面的代码中的方法似乎只有在我重新加载刷新时才会触发，但我不希望那样。

理想情况下，在 javascript 开始时，我希望数据检索与 javascript 执行一起重新触发。

所需顺序为：刷新数据 -> 重新定位地图图标

这是我的 javascript - 关于我认为应该在序列中重新启动数据检索器的位置的注释行。

<script type="text/javascript">

        // map creation - setup
       var mapbaselayerholder = "mapbox.streets";
       var TeleMaticsIcon = L.icon({ iconUrl: '../../MapIcons/truck23.png', });
        var addressPointsTeleMatics = '';
        var MarkersAsClustersForTeleMatics = '';

            addressPointsTeleMatics = '';
            MarkersAsClustersForTeleMatics = '';

            L.mapbox.accessToken = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
            var DaveMap = L.mapbox.map('mapMine', mapbaselayerholder)
            .setView([41.874116, -87.664099], 5);

            var options = L.control.layers({
                'Street': L.mapbox.tileLayer('mapbox.streets'),
                'SatStr': L.mapbox.tileLayer('mapbox.streets-satellite'),
            }).setPosition('topleft').addTo(DaveMap);


            //THIS IS THE START OF THE JS on a TIMER (as per the interval in the setTimeout line at the bottom of the script) 
            display();

            function display()
            {

                //THIS IS WHERE I THINK/GUESS the re-freshing of the code-behind data retriever should be fired 
                // the code-behind method that retrieves the data is in the next line (TeleMatics()) 

                addressPointsTeleMatics = JSON.parse('<%=TeleMatics() %>');
                MarkersAsClustersForTeleMatics = new L.MarkerClusterGroup({ showCoverageOnHover: true, maxClusterRadius: 15, spiderfyOnMaxZoom: true });


                // TeleMatics Grab Loop
                for (var i = 0; i < addressPointsTeleMatics.length; i++) {

                    var V = '';
                    V = addressPointsTeleMatics[i];
                    markerTeleMatics = L.marker(new L.LatLng(V.Latitude, V.Longitude), { icon: TeleMaticsIcon, title: 'Truck # ' + V.vehicleID }).addTo(DaveMap);
                    MarkersAsClustersForTeleMatics.addLayer(markerTeleMatics);

                }
                // Actually Display the Propagated Layers that have been populated from the FOR loops for each icon set 
                DaveMap.addLayer(MarkersAsClustersForTeleMatics);
                setTimeout("display()", 5000);
            }

</script>

这是我需要重新解雇的代码隐藏方法本身

[System.Web.Services.WebMethod]
    public static string TeleMatics()
    {


        {

            DataTable dt = new DataTable();

            SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["Wayne01"].ConnectionString);

                string CompanyAllString = "Select vehicleID, Latitude, Longitude from Vehicles WHERE Latitude IS NOT NULL AND LONGITUDE IS NOT NULL AND Division = @Division and Terminal = @Terminal and vehicleID LIKE '1334'";
                var CompanyAll = CompanyAllString;
                //var Division = "PET";
                //var Terminal = "RSM";                               


                    using (SqlCommand cmd = new SqlCommand(CompanyAll, con))
                    {

                        con.Open();

                        SqlDataAdapter da = new SqlDataAdapter(cmd);
                        cmd.Parameters.AddWithValue("@Division", Division);
                        cmd.Parameters.AddWithValue("@Terminal", Terminal);
                        da.Fill(dt);




                        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
                        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                        Dictionary<string, object> row;
                        foreach (DataRow dr in dt.Rows)
                        {
                            row = new Dictionary<string, object>();
                            foreach (DataColumn col in dt.Columns)
                            {
                                row.Add(col.ColumnName, dr[col]);
                            }
                            rows.Add(row);
                        }


                        return serializer.Serialize(rows);

                    }

        }

    }

Answer 1

您正在寻找的是使用ajax技术调用后端服务来获取您的新数据

所以你需要做的是：

使用 jquery 从页面方法中获取结果

1. 修改您的页面方法，使其成为 return 对象 - 您不需要序列化它，它会自动完成
2. 使用jquery从页面方法中获取数据

1。修改页面方法

// change your return type
public static List<Dictionary<string, object>> TeleMatics()
{
    // same as before
    // but return the object you want - no seralization needed

    return rows
}

2。使用jquery获取数据

在 display 函数中 addressPointsTeleMatics = JSON.parse('<%=TeleMatics() %>'); 进行更改，以便 jquery 从页面方法获取结果，例如：

$.ajax({
    url: "yourPage.aspx/TeleMatics",
    type: "POST",
    dataType: "json",
}).success(function (data) {
    addressPointsTeleMatics = data.d
})

注意页面方法默认接受 post - 如果你想使用 get（你应该），将声明 [ScriptMethod(UseHttpGet = true)] 添加到方法

有关 jquery 调用页面方法的更多信息，结帐

https://www.aspsnippets.com/Articles/Call-ASPNet-Page-Method-using-jQuery-AJAX-Example.aspx

---

下面是我原来的回答，我个人更喜欢使用通用处理程序 - 保留它仅供参考

1. 创建一个通用处理程序 (ashx)，它将 return 您的新查询数据
2. 使用 jquery 从您在第 1 步创建的 ashx 中获取 ajax 结果，然后引用结果

类似于：

1。创建通用处理程序

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";

        // your TeleMatics method
        ....

        // write to response instead of direct return 
        context.Response.Write(serializer.Serialize(rows););  
    }
}

2。使用 jquery 得到 ajax 结果

在 display 函数中 addressPointsTeleMatics = JSON.parse('<%=TeleMatics() %>'); 进行更改，以便 jquery 从通用处理程序获取结果，例如：

$.getJSON("url to your handler", function(data){
    addressPointsTeleMatics = data;
})

如果您需要将数据传递给处理程序，您可以使用查询字符串