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

Question

我是JQuery的新手，並且卡在了atm上。 我有一個MVC應用程序，可從Google API繪制圖表。 我正在使用一個允許用戶從DropDownList中選擇項目的UI，單擊“運行”，將加載圖表。 我當前的問題是，當我進入視圖時，圖表將直接運行。 繪制圖表的JQuery函數在GAStatisticsController中實現GetData ActionResult。

我有一個dropDownList，其中包含來自模型類的可選項目和一個按鈕（“ GAStatisticsReport-Submit”）。 我只需要檢查是否在DropDownList中選擇了“ Visitors”項目，如果可以的話，我可以單擊run，並且Charts會與訪問者一起顯示數據。 我該如何存檔？

控制器具有一種稱為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>

我的ViewModel（注意：選擇SelectListItem“ Visitors”並且用戶單擊“ Run”按鈕時，它應該執行並繪制圖表）：

    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）（請參閱此鏈接也了解其原因）。 如果我了解您要做什么，則必須在按鈕上設置一個事件，該事件將執行drawChart（）函數。

像這樣：

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

因此，當您單擊該按鈕時，將繪制圖表。 要僅在選擇“訪客”時繪制圖表，您必須執行以下操作：

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