堆栈内存溢出
  繁体   English   中英

如何返回JSON数据，类似于XML从数据库asp.net返回数据的方式

[英]How to return JSON data similar to the way XML returns data from database asp.net

 原文  2015-08-16 06:58:02  0   1    javascript/ c#/ asp.net/ json/ angularjs

问题描述

我真的对asp.net和angular.js还是陌生的。 我已经在lynda.com上学习了有关asp.net 4.5的课程。 在本课程中，我们将学习如何使用asp.net api，但在本课程中，我们将使用ajax将数据以JSON的形式返回，并在将其绑定到页面之前对其进行格式化。 我想使用angular.js从数据库显示此数据。 我只想举一个简单的例子，这样我就可以使用返回的数据开始更多地玩角度游戏了。 这是html ... 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ApiClient.aspx.cs" Inherits="ExploreCalifornia.API.ApiClient" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Explore California Tours</title>
</head>
<body ng-app="myApp" ng-controller="myCon">
    <form id="form1" runat="server">
    <div id="tours">
    <table>
        <tr ng-repeat="x in tours">
            <td>{{ x.Name }}</td>
            <td>{{ x.Rating }}</td>
        </tr>
    </table>
    </div>
    </form>


    <script src="Scripts/angular.js"></script>
    <script src="Scripts/myCon.js"></script>
</body>
</html>

现在角度控制器... 

angular.module('myApp', [])
.controller('myCon', function ($scope, $http) {
    $http.get("/api/tour").success(function (data, status, headers, config) {
        $scope.Tours = data.Tour;
    }).error(function (data, status, headers, config) {
        $scope.title = "Oops... something went wrong";

    });
});

这是web.api tourController代码以返回数据... 

// GET api/Tour
public IQueryable<Tour> GetTours()
{
    return db.Tours;
}

这是在浏览器中调用api / tour时如何返回数据... 

<Tour>
<Description>Majestic tour of the coast</Description>
<Id>1</Id>
<IncludesMeals>true</IncludesMeals>
<Length>3</Length>
<Name>Big Sur Retreat</Name>
<Price>750.00</Price>
<Rating>Medium</Rating>
</Tour>
<Tour>
<Description>Day trip hike</Description>
<Id>4</Id>
<IncludesMeals>false</IncludesMeals>
<Length>1</Length>
<Name>Channel Islands Excursion</Name>
<Price>150.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>
Challenging tour of the hottest place in North America
</Description>
<Id>5</Id>
<IncludesMeals>true</IncludesMeals>
<Length>2</Length>
<Name>Death Valley Survivor's Trek</Name>
<Price>250.00</Price>
<Rating>Difficult</Rating>
</Tour>
<Tour>
<Description>Majestic tour of the coast</Description>
<Id>6</Id>
<IncludesMeals>true</IncludesMeals>
<Length>3</Length>
<Name>MODIFIED Brand New Tour</Name>
<Price>750.00</Price>
<Rating>Medium</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>7</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>8</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>9</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>10</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>11</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>12</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>13</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>14</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>15</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>16</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>17</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>18</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>19</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
<Tour>
<Description>Created with HttpClient</Description>
<Id>20</Id>
<IncludesMeals>true</IncludesMeals>
<Length>10</Length>
<Name>.NET Client Tour</Name>
<Price>500.00</Price>
<Rating>Easy</Rating>
</Tour>
</ArrayOfTour>

最后...这是我在Chrome中收到的回复... 

[{"Id":1,"Name":"Big Sur Retreat","Description":"Majestic tour of the coast","Length":3,"Price":750.00,"Rating":"Medium","IncludesMeals":true},{"Id":4,"Name":"Channel Islands Excursion","Description":"Day trip hike","Length":1,"Price":150.00,"Rating":"Easy","IncludesMeals":false},{"Id":5,"Name":"Death Valley Survivor's Trek","Description":"Challenging tour of the hottest place in North America","Length":2,"Price":250.00,"Rating":"Difficult","IncludesMeals":true},{"Id":6,"Name":"MODIFIED Brand New Tour","Description":"Majestic tour of the coast","Length":3,"Price":750.00,"Rating":"Medium","IncludesMeals":true},{"Id":7,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":8,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":9,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":10,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":11,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":12,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":13,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":14,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true},{"Id":15,"Name":".NET Client Tour","Description":"Created with HttpClient","Length":10,"Price":500.00,"Rating":"Easy","IncludesMeals":true}]

为什么这个Json不会像XML数据那样返回，以便我可以按角度调用（data.tour）并处理网页上的数据？ 它在这里变得相当复杂，还是有一种简单的方法来做到这一点？ 我想我需要它返回类似于此的东西才能清楚... 

{"tour": [{"Id":1,"Name":"Big Sur Retreat","Description":"Majestic tour of the coast","Length":3,"Price":750.00,"Rating":"Medium","IncludesMeals":true}]}

现在，如果这样返回，我的代码应该可以正常工作。 有任何想法吗？

1 个解决方案

解决方案1
 1 已采纳  2015-08-16 07:33:46

你并不需要把它作为XML，你已经得到一个有效的JSON，你可以使用这样的：看到这个工作小提琴

只需将数据对象替换为您从http调用中获得的对象即可。 

<div ng-controller="myCon">
    <form id="form1" runat="server">
        <div id="tours">
        <table>
            <tr ng-repeat="x in tours">
                <td>{{ x.Name }}</td>
                <td>{{ x.Rating }}</td>
            </tr>
        </table>
        </div>
    </form>
</div>


angular.module('myApp',[]).controller("myCon", MyCtrl);

function MyCtrl($scope) {
    var data = [
    {
        "Id": 1,
        "Name": "Big Sur Retreat",
        "Description": "Majestic tour of the coast",
        "Length": 3,
        "Price": 750,
        "Rating": "Medium",
        "IncludesMeals": true
    },
    {
        "Id": 4,
        "Name": "Channel Islands Excursion",
        "Description": "Day trip hike",
        "Length": 1,
        "Price": 150,
        "Rating": "Easy",
        "IncludesMeals": false
    },
    {
        "Id": 5,
        "Name": "Death Valley Survivor's Trek",
        "Description": "Challenging tour of the hottest place in North America",
        "Length": 2,
        "Price": 250,
        "Rating": "Difficult",
        "IncludesMeals": true
    },
    {
        "Id": 6,
        "Name": "MODIFIED Brand New Tour",
        "Description": "Majestic tour of the coast",
        "Length": 3,
        "Price": 750,
        "Rating": "Medium",
        "IncludesMeals": true
    },
    {
        "Id": 7,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 8,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 9,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 10,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 11,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 12,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 13,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 14,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    },
    {
        "Id": 15,
        "Name": ".NET Client Tour",
        "Description": "Created with HttpClient",
        "Length": 10,
        "Price": 500,
        "Rating": "Easy",
        "IncludesMeals": true
    }
];
    $scope.tours = data;

}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使asp.net页面返回JSON数据？ 如何使用Asp.net从MSSQL数据库将数据检索到JSON代码中 如何使用javascript从asp.net webservice中使用Json数据 在asp.net（vb.net/c#）中从ms sql数据库填充数据的更好方法 无法在Asp.net中使用Json将数据保存在数据库中 有没有一种获取JSON数据的ASP.NET样板方法？ 何时/如何格式化十进制数据类型ASP.NET返回JSON以在datatables js中使用 如何使用asp.net MVC返回JSON中的两个数组列表并在数据表行中查看？ 如何将数据库中的数据从asp.net/vb.net放入javascript数组 如何使用asp.net从数据库中检索数据，然后将该数据提供给javascript数组？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM