ASP.NET MVC 의 JS 와 CONTROLLER 간의 JSON 데이터 전송

cshtml 에서 디자인을 설계한다.

 

        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Table example</h5>
                </div>
                <div class="ibox-content">
                    <table class="table table-striped" id="ajaxTable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Position</th>
                                <th>Office</th>
                                <th>Age</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>

                </div>
            </div>
        </div>

 

 

그 다음, 자바스크립트로 @Url.Action("메소드",반환형태); 를 통해 controller 의 메소드를 호출하여 변수에 반환값을 할당받아 놓는다.

   

<script type="text/javascript">

        // Creat JSON url to controller
        var chartDataUrl = '@Url.Action("flotJsonData", "Json")';
        var tableDataUrl = '@Url.Action("tableJsonData", "Json")';
        var eventsDataUrl = '@Url.Action("calendarEvents", "Json")';
        var tasksDataUrl = '@Url.Action("tasksJsonData", "Json")';



        $(document).ready(function () {

            // Options for bar chart
            var barOptions = {series: {bars: {show: true,barWidth: 0.6,fill: true,fillColor: {colors: [{opacity: 0.8}, {opacity: 0.8}]}}},
                xaxis: {tickDecimals: 0},
                colors: ["#1ab394"],
                grid: {color: "#999999",hoverable: true,clickable: true,tickColor: "#D4D4D4",borderWidth: 0},
                legend: {show: true},
                tooltip: true,
                tooltipOpts: {content: "Item: %x, Value: %y"}
            };

            // Ajax call for chart data
            $.ajax({
                url: chartDataUrl,
                method: 'GET',
                dataType: 'json',
                success: function (data) {
                    $.plot($("#flot-bar-chart"), [data], barOptions);
                }
            });



            // Ajax call for table data
            $.ajax({
                url: tableDataUrl,
                method: 'GET',
                dataType: 'json',
                success: function (data) {
                    var div = $('#ajaxTable');
                    $.each(data, function (i, item) {
                        div.append(
                            $('<tr>')
                                .append($('<td>').html(item.Name)).append($('<td>').html(item.Position)).append($('<td>').html(item.Office)).append($('<td>').html(item.Age))
                            );
                    })
                }
            });



    }

 

controller 에서 호출한 데이터를 json 형태로 제공해 주기 위해 JsonResult 로 전달해 준다.

 

public JsonResult flotJsonData()
        {

            // Creat basic JSON object with data for chart
            var chartData = new
            {
                label = "Example Bar Chart",
                data = new[] {
                    new[] {1,34},
                    new[] {2,24},
                    new[] {3,11},
                    new[] {4,41},
                    new[] {5,17},
                    new[] {6,33}
                }
            };

            // Return JSON object
            return Json(chartData, JsonRequestBehavior.AllowGet);

        }



        public JsonResult tableJsonData()
        {

            // Creat basic JSON object with data for table
            var chartData = new[] {
                    new {Name = "Ashton Cox", Position = "Junior Technical Author", Office = "London", Age = 33},
                    new {Name = "Bradley Greer", Position = "Pre-Sales Support", Office = "Tokyo", Age = 27},
                    new {Name = "Airi Satou", Position = "Integration Specialist", Office = "New York", Age = 43},
                    new {Name = "Caesar Vance", Position = "Software Engineer", Office = "San Francisco", Age = 36},
                };

            // Return JSON object
            return Json(chartData, JsonRequestBehavior.AllowGet);

        }