Параллельный вызов Ajax Jquery, не передающий данные

Question

Я пытаюсь реализовать диаграмму google на моей странице aspx. У меня есть кнопка поиска, которая отображает две круговые диаграммы. Я использую Ajax Jquery для чтения данных параллельно. Вот мой код

<div> 
     <div style="text-align: left; padding-left: 30px;"> 
      <uc1:ucChartDateSelector ID="ucChartDateSelector1" runat="server"></uc1:ucChartDateSelector> 
      <asp:Button ID="btnSearch" runat="server" Text="Search" AutoPostBack="false" 
       OnClientClick="javascript:GenerateChartReport();" /> 

     </div> 
    </div> 

    <!--Div that will hold the dashboard--> 


    <div id="dashboard_div"> 

     <!--Divs that will hold each control and chart--> 
     <div id="chartLine_div" style="width: 600px; height: 400px;"> 
      <img src="../images/ajax-loader.gif" alt="Loading Report" /> 
     </div> 


     <div id="visualization" style="width: 600px; height: 400px;"> 
      <img src="../images/ajax-loader.gif" alt="Loading Report" /> 
     </div> 
    </div> 

<script type="text/javascript"> 


     var toDate = '<%=ucChartDateSelector1.ToDate%>'; 
     var fromdate = '<%=ucChartDateSelector1.FromDate%>'; 
     var reportFor = '<%=ucChartDateSelector1.ddlReportType.SelectedItem.Text%>'; 
     var periodFor = '<%=ucChartDateSelector1.ddlDateSelection.SelectedItem.Text%>'; 



     function GenerateChartReport() { 
      $.ajax({ 
       type: 'POST', 
       url: 'Dashboard.aspx/GetData', 
       contentType: 'application/json', 
       dataType: 'JSON', 
       async: true, 
       success: function (response) { 
        TwoColumnReport(response.d, "visualization", "Google Charts Example"); 
       }, 
       error: function (error) { 
        console.log(error); 
       } 

      }), 

      $.ajax({ 
       type: 'POST', 
       url: 'Dashboard.aspx/ReadBooking', 
       contentType: 'application/json', 
       dataType: 'json', 
       async: true, 
       data: JSON.stringify({ fromDate: fromdate, toDate: toDate, reportFor: reportFor, periodFor: periodFor }), 
       success: function (response) { 
        TwoColumnReport(response.d, "chartLine_div", "Google Dealy Example"); 

       }, 
       error: function (error) { 
        console.log(error); 
       } 

      }); 
     } 
     function TwoColumnReport(dataValues, mainDivId, reportTitle) { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Column Name'); 
      data.addColumn('number', 'Column Value'); 

      for (var i = 0; i < dataValues.length; i++) { 
       data.addRow([dataValues[i].ColumnName, dataValues[i].Value]); 
      } 
      new google.visualization.PieChart(document.getElementById(mainDivId)). 
       draw(data, { title: reportTitle }); 
     } 
    </script>` 

Вот задний конец кода

[WebMethod] 
    public static List<Data> GetData() 
    { 
     int milliseconds = 2000; 
     Thread.Sleep(milliseconds); 
     List<Data> dataList = new List<Data>(); 

     dataList.Add(new Data("Column 1", 100)); 
     dataList.Add(new Data("Column 2", 200)); 
     dataList.Add(new Data("Column 3", 300)); 
     dataList.Add(new Data("Column 4", 400)); 

     return dataList; 
    } 


    [WebMethod] 
    public static List<Data> ReadBooking(String fromDate, String toDate, String reportFor, String periodFor) 
    { 
     logger.WriteInfoLog(String.Format("ReadBooking Summary. Report type {0}-{3} DateRange {1}- {2} ", reportFor, fromDate, toDate, periodFor)); 
     int milliseconds = 5000; 
     Thread.Sleep(milliseconds); 
     List<Data> dataList = new List<Data>(); 

     dataList.Add(new Data("row 1", 1400)); 
     dataList.Add(new Data("row 2", 3200)); 
     dataList.Add(new Data("row 3", 3100)); 
     dataList.Add(new Data("row 4", 4100)); 
     dataList.Add(new Data("row 5", 2400)); 
     return dataList; 
    } 

Если когда-нибудь я нажимаю кнопки поиска Div будет заполнена с графиком. Но некоторые, как она очищается слишком

Answer 1

Проблема была с Post назад.
Код Модератора return false.

function GenerateChartReport() { 
    return false; 
} 

и удалены AutoPostBack="false" из asp:button

<asp:Button ID="btnSearch" runat="server" Text="Search" OnClientClick="return GenerateChartReport();" />

Answer 2

Вы можете изменить WebMethod вернуть string и сериализации dataList в формате JSON:

[WebMethod] 
public static string GetData() 
{ 
    int milliseconds = 2000; 
    Thread.Sleep(milliseconds); 
    List<Data> dataList = new List<Data>(); 

    dataList.Add(new Data("Column 1", 100)); 
    dataList.Add(new Data("Column 2", 200)); 
    dataList.Add(new Data("Column 3", 300)); 
    dataList.Add(new Data("Column 4", 400)); 

    var jsonSerialiser = new JavaScriptSerializer(); 
    var jsonString = jsonSerialiser.Serialize(dataList); 

    return jsonString; 
} 

тогда ваш АЯКС пост, на success: function(response){} , response будет список