从javascript调用页面方法

Question

我有一个基于代码隐藏数据检索器存储图标的 javascript。我循环地图脚本以在客户端刷新地图。我让脚本每隔一段时间重新触发就好了。但它需要重新触发后面代码中服务器端的数据检索器。我喜欢使用页面方法的想法，但不能完全连接 - 我背后代码中的方法似乎只会在我重新加载刷新并且我不想要那个时触发。

理想情况下，在 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. 修改你的页面方法，让它返回对象 - 你不需要序列化它，它是自动完成的
2. 使用jquery从pagemethod获取数据

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 从 page 方法获取结果，例如：

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

注意页面方法默认接受帖子 - 如果您想使用 get（您应该），请在方法中添加声明 [ScriptMethod(UseHttpGet = true)]

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

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

---

以下是我的原始答案，我个人更喜欢使用通用处理程序 - 仅供参考

1. 创建一个通用处理程序 (ashx)，它将返回您的新查询数据
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;
})

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