JSON 下拉列表数据

本文关键字：数据 下拉列表 JSON | 更新日期: 2023-09-27 17:56:53

    I am new to Ajax Call How to send dropdown selected values to my webmethod.
after selection of dropdown my charts are not rendering.. 
       My Ajax Call:
         $(document).ready(function(){ 
                    $.ajax({
                 type: "POST",
                url : "HazzardsDashBoards.aspx/GetReport",
                data: "{myparam1,myparam2}",                
                contentType: 'application/json',
                dataType: 'json',
                complete: function (jqXHR) 
                {
                    var data = JSON.parse(jqXHR.responseText);
                   alert(JSON.stringify(data));
                    TrendChart(data);
               } ,
                error: function (error) {
                    alert("error");
                }
          });
        });
        My Method:
        [WebMethod]
                public static List<Dictionary<string, object>> GetReport()
                {
                    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                    try
                    {
                        string strQry = string.Empty;
                        strQry = " select YEAR(dt_ModifiedOn)[date],COUNT(*) [HazardCount] from tbl_name ";
                        strQry += " where int_PluginID = 4 and int_FeatureID=35  ";
                        strQry += " group by year(dt_ModifiedOn) ";
                        using (commonManager)
                        {
                            DataTable dt = commonManager.ExecuteDataTable(strQry);
                            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);
                            }
                        }
                    }
                    catch (Exception ex)
                    {
                        throw ex;
                    }
                    return rows;
                }
///
Trendchart script:
 function TrendChart(modelData)
  {
    var data = modelData.d;
    //alert(JSON.stringify(data));
    var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 650 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y").parse;
var x = d3.time.scale()
    .range([0, width]);
var y = d3.scale.linear()
    .range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
    .scale(x)
     .tickPadding(8)
     .ticks(5)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
   .tickSize(-width, 0, 0)
  .tickFormat(d3.format('d'))
    .orient("left");

var line = d3.svg.line()
     .interpolate("cardinal")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });
var svg = d3.select("#divTrend").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
  data.forEach(function(d) {
    d.date = parseDate(d.date.toString());
  });
  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };
  });
//alert(JSON.stringify(cities));
  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
  ]);

//svg.append("text")
//     .attr("x",width/2)
//     .attr("y",height+margin.bottom)
//     .attr("text-anchor","middle")
//     .text("Year")

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("HeadCount");
  var city = svg.selectAll(".city")
      .data(cities)
    .enter().append("g")
      .attr("class", "city");
  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });
  city.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });
///

我需要将下拉详细信息发送到上述方法。 之后，我需要根据数据渲染图表。请检查我是否提到了我的趋势图脚本。在页面加载图表中没有呈现我被击中了它出错的地方

JSON 下拉列表数据

我想

它应该像这样工作。由于您说您有两个下拉列表，因此我假设您希望运行 ajax 调用，无论这两个下拉列表的值是否更改。

首先，为您的两个下拉列表提供相同的 css 类。在这个例子中，我使用了"myClass"，但请使用对你有意义的任何内容。

<select id="myDropdown1" class="myClass">...</select>
<select id="myDropdown2" class="myClass">...</select>

然后，我们处理两个下拉列表的更改事件，通过它们的共享 css 类来识别它们。我们将两个下拉列表的值传递给服务器：

$(document).ready(function(){ 
 $(".myClass").change(function(event) {
  $.ajax({
    type: "POST",
    url : "HazzardsDashBoards.aspx/GetReport",
    data: JSON.stringify({ val1: $("#myDropdown1").val(), val2: $("#myDropdown2").val() }),                
    contentType: 'application/json',
    dataType: 'json',
    success: function(data) {
        alert(JSON.stringify(data));
        TrendChart(data.d); //usually webmethods return the actual response data within a sub-variable called d
       },
       error: function (jQXHR, textStatus, errorThrown) {
        alert("An error occurred whilst trying to contact the server: " + jQXHR.status + " " + textStatus + " " + errorThrown);
      }
  });
 });
});

和：

[WebMethod]
public static List<Dictionary<string, object>> GetReport(string val1, string val2)
{
 //you haven't said how you want to use the value in your server-side method, so I'll leave that to you
}

由于您尚未共享趋势图的外观或它接受的数据类型，因此我必须假设Web方法已经以正确的格式返回了正确的数据，以便呈现图表。

相关文章：