如何在使用按鈕執行後加載JQuery函數？

Question

我有點新的JQuery和卡住atm。我有一個從Google API繪製圖表的MVC應用程序。我正在研究一個允許用戶從DropDownList中選擇一個項目的UI，點擊Run並加載圖表。我目前的問題是，當我進入視圖時，圖表直接運行。繪製圖表的JQuery函數實現了GAStatisticsController中的GetData ActionResult。

我有一個dropDownList與模型類和一個按鈕（「GAStatisticsReport提交」）中的可選項目。我只需要檢查在DropDownList中是否選擇了項目「訪問者」，如果是這種情況，我可以點擊運行，圖表將顯示訪問者的數據。我怎麼能把這個存檔？

控制器有一個名爲CreateGAStatisticsReport的方法，它將數據返回給視圖以供圖表顯示。這個方法有一個ActionResult。但是，當函數繪製圖表時，它會從GetData ActionResult而不是GAStatistics中繪製它們。

這裏是視圖：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.load("visualization", "1", { packages: ["treemap"] }); 
    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
     $.get('/GAStatistics/GetData', {}, <--- here's GetData ActionResult in the Controller 
      function (data) { 
       var tdata = new google.visualization.DataTable(); 

       tdata.addColumn('date', 'Datum'); 
       tdata.addColumn('number', 'Besökare'); 

       for (var i = 0; i < data.length; i++) { 
        var dateStr = data[i].Date.substr(0, 4) + "-" + data[i].Date.substr(4, 2) + "-" + data[i].Date.substr(6, 2); 
        tdata.addRow([new Date(dateStr), parseInt(data[i].Visitors)]); 
       } 

       var options = { 
        title: "Number of unique visitors" 
       }; 

       var chart1 = new google.visualization.AreaChart(document.getElementById('chart_div1')); 
       var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2')); 
       var chart4 = new google.visualization.ColumnChart(document.getElementById('chart_div4')); 

       chart1.draw(tdata, options); 
       chart2.draw(tdata, options); 
       chart4.draw(tdata, options); 
      }); 
    } 

</script> 

<table class="adminContent"> 
     <tr> 
      <td class="adminTitle"> 
       @Html.NopLabelFor(model => model.StartDate): 
      </td> 
      <td class="adminData"> 
       @Html.EditorFor(model => model.StartDate) 
      </td> 
     </tr> 
     <tr> 
      <td class="adminTitle"> 
       @Html.NopLabelFor(model => model.EndDate): 
      </td> 
      <td class="adminData"> 
       @Html.EditorFor(model => model.EndDate) 
      </td> 
     </tr> 
     <tr> 
      <td class="adminTitle"> 
       @Html.NopLabelFor(model => model.GAStatisticsId): 
      </td> 
      <td class="adminData"> 
       @Html.DropDownList("GAStatisticsId", Model.AvailableGAStatistics) 
       <input type="button" id="GAStatisticsReport-Submit" class="t-button" value="@T("Run")" /> 
     </tr> 
</table> 

我的視圖模型（注意：當SelectListItem「遊客被選中，用戶點擊‘運行’按鈕，就應該執行，並繪製圖表）：

public class GAStatisticsListModel : BaseNopModel 
    { 
     public GAStatisticsListModel() 
     { 
      AvailableGAStatistics = new List<SelectListItem>(); 

      SelectListItem Visitors = new SelectListItem() { Text = "Besökare", Value = "1", Selected = false }; 
      SelectListItem PercentNewVisitors = new SelectListItem() { Text = "Nya Besökare (Procent)", Value = "2", Selected = false }; 
      SelectListItem ConversionRate = new SelectListItem() { Text = "Konverteringsgrad", Value = "3", Selected = false }; 



      AvailableGAStatistics.Add(Visitors); 
      AvailableGAStatistics.Add(PercentNewVisitors); 
      AvailableGAStatistics.Add(ConversionRate); 
     } 


     [NopResourceDisplayName("Admin.ShopStatistics.List.StartDate")] 
     [UIHint("DateNullable")] 
     public DateTime? StartDate { get; set; } 

     [NopResourceDisplayName("Admin.ShopStatistics.List.EndDate")] 
     [UIHint("DateNullable")] 
     public DateTime? EndDate { get; set; } 

     [NopResourceDisplayName("Admin.GAStatistics.GAStatistics.GAStatisticsList")] 
     public int GAStatisticsId { get; set; } 

     public List<SelectListItem> AvailableGAStatistics { get; set; } 

    } 
} 

所述控制器（的GetData將數據傳送給在從CreateGAStatisticsReport視圖jQuery代碼爲圖表，顯示）：

public class GAStatisticsController : Controller 
    { 

     //GET: /ShopStatistics/ 
     [HttpPost] 
     public ActionResult GetData() 
     { 
      return Json(CreateGAStatisticsReport(), JsonRequestBehavior.AllowGet); 
     } 



     public ActionResult GAStatistics() 
     { 
      return View(new GAStatisticsListModel()); 
     } 


     private List<GAStatistics> CreateGAStatisticsReport() 
     { 

      var serviceAccountEmail = "xxxxxxxxx@developer.gserviceaccount.com"; 
      var certificate = new X509Certificate2(@"C:\Users\Desktop\NopCommerce\Presentation\Nop.Web\key.p12", "notasecret", X509KeyStorageFlags.Exportable); 


      var credential = new ServiceAccountCredential(
      new ServiceAccountCredential.Initializer(serviceAccountEmail) 
      { 
       Scopes = new[] { AnalyticsService.Scope.Analytics } 
      }.FromCertificate(certificate)); 

      // Create the service. 
      //Twistandtango 
      var GoogleAnalyticsService = new AnalyticsService(new BaseClientService.Initializer() 
      { 
       HttpClientInitializer = credential, 
       ApplicationName = "MyApp", 
      }); 

      var request = GoogleAnalyticsService.Data.Ga.Get("ga:xxxxxxxx", "2014-01-24", "2014-01-30", "ga:visitors"); 
      //Specify some addition query parameters 
      request.Dimensions = "ga:date"; 
      request.Sort = "-ga:date"; 
      request.MaxResults = 10000; 

      //Execute and fetch the results of our query 
      Google.Apis.Analytics.v3.Data.GaData d = request.Execute(); 


      List<GAStatistics> ListGaVisitors = new List<GAStatistics>(); 

      foreach (var row in d.Rows) 
      { 

       GAStatistics GaVisits = new GAStatistics(row[0], row[1]); 
       ListGaVisitors.Add(GaVisits); 

      } 


      return ListGaVisitors; 

     } 
    } 

Answer 1

對於你想要的東西你不能使用google.setOnLoadCallback（drawChart）（見this link太理解爲什麼了）。如果我明白你想做什麼，你必須在你的按鈕上設置一個事件，該事件將執行drawChart（）函數。

像這樣：

$("#GAStatisticsReport-Submit").click(function(){ drawChart() }) 

所以，當你點擊該按鈕的圖表將被延伸。 要繪製圖表僅當「遊客」被選中，你必須做這樣的事情：

$("#GAStatisticsReport-Submit").click(function(){ 
    if($("select[name='GAStatisticsId'] option:selected").text()=="Visitors") 
     drawChart() 
})