如何在asp.net mvc5中将获取的值从后端传递到前端?

时间:2016-12-28 02:07:55

标签: c# angularjs json asp.net-mvc asp.net-web-api

我有一个存储过程,它等同于并获得房间的占用率。我想使用 JSon 从后端获取数据,并在前端代码中显示存储过程的输出数据。 但输出数据仅限于 业务层。如何使用 Json 从我的控制器中调用它?

这是我的代码

在我的控制器

 public JsonResult GetoccupancyRate()
    {
        string _connectionString = rAppSetting.ConnectionString;

        try
        {
            IList<Hotel> _currentOccupancyRateList = rHotelFacade.GetOccupancyRate(HotelIDCookie, DateTime.Now, _connectionString);
            IList<Hotel> _yesterdayOccupancyRateList = rHotelFacade.GetOccupancyRate(HotelIDCookie, DateTime.Now.AddDays(-1), _connectionString);


            return Json(new
            {
                success = true,
                message = "Success",
                yesterdayOccupancyRate = _yesterdayOccupancyRateList,
                currentOccupancyRate = _currentOccupancyRateList
            },JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            return Json(new
            {
                success = false,
                message = ex.Message,
                currentOccupancyRate = "",
                yesterdayOccuoancyRate = ""
            }, JsonRequestBehavior.AllowGet);
        }
    }

的Javascript

myapp.factory("occupancyRateService", ['$http', function ($http) {
this.LoadOccupancyRate = function () {
    return $http.get("/Dashboard/GetOccupancyRate", {});
};
return this;}]);

myapp.controller('MainController', ['$scope', 'dashboardService', 'occupancyRateService', function ($scope, dashboardService, occupancyRateService) {
    $scope.myChart = {
        type: 'google.charts.Bar',
        options: {},
        data: {}
    };
$scope.loadOccupancyRateDetails = function () {
        occupancyRateService.LoadOccupancyRate().success(function (result) {
            if (result.success)
            {
                var currentOccupancyRateData = result.currentOccupancyRate;
                var yesterdayOccupancyRateData = result.yesterdayOccupancyRate;

                console.log(result.currentOccupancyRate);
                console.log(result.yesterdayOccupancyRate);
                //console.log(yesterdayResultData)
                if (currentOccupancyRateData || yesterdayOccupancyRateData === null)
                {
                    google.charts.load('current', { 'packages': ['line', 'bar'] });
                    google.charts.setOnLoadCallback(drawChart);
                    function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                          ['Day', 'Rate'],
                          ['Yesterday', 0],
                          ['Today', 0]
                        ]);

                        var options = {
                            chart: {
                                //title:'Occupancy Rate',
                            },
                            bars: 'vertical',
                            hAxis: { format: 'none', gridlines: { count: 5 } },
                            vAxis: { format: '.######%' },
                            height: 180,
                            //width: 100%,
                            colors: ['#1b9e77']

                        };

                        var chart = new google.charts.Bar(document.getElementById('chart_div'));

                        chart.draw(data, google.charts.Bar.convertOptions(options));
                    };

                    $(window).resize(function () {
                        drawChart();
                    });
                }
                else
                {
                    google.charts.load('current', { 'packages': ['line', 'bar'] });
                    google.charts.setOnLoadCallback(drawChart);
                    function drawChart() {
                        var data = google.visualization.arrayToDataTable([
                          ['Day', 'Rate'],
                          ['Yesterday', currentOccupancyRateData],
                          ['Today', yesterdayOccupancyRateData]
                        ]);

                    //function drawChart() {
                    //    var data = google.visualization.arrayToDataTable([ORData]);


                        var options = {
                            chart: {
                                //title:'Occupancy Rate',
                            },
                            bars: 'vertical',
                            hAxis: { format: 'none', gridlines: { count: 5 } },
                            vAxis: { format: '.################%' },
                            height: 180,
                            //width: 100%,
                            colors: ['#1b9e77']

                        };

                        var chart = new google.charts.Bar(document.getElementById('chart_div'));

                        chart.draw(data, google.charts.Bar.convertOptions(options));
                    };

                    $(window).resize(function () {
                        drawChart();
                    });
                }
            }
        })
        .error(function (error) {
            alert(error);
        })
    };
    $scope.loadOccupancyRateDetails();
    //<--------------------------------------->


}]);

0 个答案:

没有答案