从javascript调用页面方法

Question

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

理想情况下，在javascript的开头是我希望数据检索与javascript执行一起重新启动。

所需的序列将是：数据刷新 - ＆gt; map-icons重新定位

这是我的javascript - 有一条COMMENTED行，我认为数据检索器应该在序列中重新触发。

<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的{​​{1}}函数中addressPointsTeleMatics = JSON.parse('<%=TeleMatics() %>');将其更改为jquery 从页面方法获取结果，如：

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

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

有关jquery调用页面方法，结帐

的更多信息

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

下面是我的原始答案，personaly我更喜欢使用通用处理程序 - 保留它仅供参考

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的{​​{1}}函数中addressPointsTeleMatics = JSON.parse('<%=TeleMatics() %>');将其更改为jquery 从通用处理程序获取结果，如：

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

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