Использование веб-сервисов JSON ASMX с AngularJS

0

У меня проблема, мне нужно отображать данные моей базы данных на таблице, но я не могу. У меня есть веб-сервис, который отображает данные из моей базы данных в Json, но когда я пытаюсь отобразить на таблице с угловым, он не загружается.

введите описание изображения здесь

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="FrontEnd/BI/Graficos/Compras/Forms/Controllers/ralatorio-compras.js"></script>
</head>
<body>

    <div class="container" style="padding-top: 100px" ng-app="appCompras">
        <table class="table table-striped table-bordered">
            <thead class="table-head center-content">
                <tr>
                    <th>Cod. Compra</th>
                    <th>Cod. Produto</th>
                    <th>Nome</th>
                    <th>Quantidade</th>
                    <th>Data da Compra</th>
                </tr>
            </thead>
            <tr ng-repeat="compra in names">
                <td>{{compra.PkCompras}}</td>
                <td>{{compra.IdProduto}}</td>
                <td>{{compra.Nome}}</td>
                <td>{{compra.Quantidade}}</td>
                <td>{{compra.DataCompra}}</td>
            </tr>
        </table>
    </div>


    <script>
        var app = angular.module('appCompras', []);

        app.controller('comprasCtrl', function ($scope, $http) {

            var url = "WebService.asmx\ListarQuinzeCompras";

            $http.get(url).success(function (data) {
                var appJson = JSON.parse(data);

                $scope.names = JSON.parse(appJson);
            })

        });
    </script>

</body>
</html>

Мой WebService:

[WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public void ListarQuinzeCompras()
        {
            var SQL = new LibOrgm.SQL();
            var cn = new ADODB.Connection();

            try
            {
                Context.Response.Clear();
                Context.Response.ContentType = "application/json";
                SQL.AbrirConexao(cn);

                var retorno = ComprasFO.ListarUltimasQuinzeCompras(cn);
                Context.Response.Write(SerializerFO.Serializador(retorno));
            }
            catch (Exception Ex)
            {
                Context.Response.Write(Ex);
            }
            finally
            {
                SQL.FecharConexao(cn);
            }
        }

Мой класс для сериализации

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.Serialization.Json;
using System.Text;
using System.Web;

namespace WebApplication1.CORE
{
    public class SerializerFO
    {
        public static object DeserializarObjetoJson(string Json, object Objeto)
        {

            try
            {

                MemoryStream Stream = new MemoryStream(Encoding.Unicode.GetBytes(Json));
                DataContractJsonSerializer Desserializador = new DataContractJsonSerializer(Objeto.GetType());

                Objeto = Desserializador.ReadObject(Stream);

            }
            catch
            {
                throw;
            }
            return Objeto;
        }


        public static string Serializador(object Objeto)
        {
            string Json;
            try
            {

                MemoryStream Stream = new MemoryStream();
                DataContractJsonSerializer Serializador = new DataContractJsonSerializer(Objeto.GetType());

                Serializador.WriteObject(Stream, Objeto);

                Stream.Position = 0;
                StreamReader Leitor = new StreamReader(Stream);

                Json = Leitor.ReadToEnd();

            }
            catch
            {
                throw;
            }

            return Json;
        }
    }
}

Мои занятия:

using ADODB;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using LibOrgm;

namespace WebApplication1.BI.Graficos.Compras
{
    public class ComprasDA
    {
        public static ComprasBO GetCompras(int PkCompras, Connection cn)
        {
            var Compra = new ComprasBO();
            var RsCompra = new ADODB.Recordset();
            try
            {
                RsCompra.Open(String.Format("select * from Compras where PkCompras = {0}", PkCompras), cn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockReadOnly);
                if (!RsCompra.EOF )
                {
                    Compra.PkCompras = int.Parse(RsCompra.Fields["PkCompras"].Value.ToString());
                    Compra.IdProduto = int.Parse(RsCompra.Fields["IdProduto"].Value.ToString());
                    Compra.Nome = RsCompra.Fields["Nome"].Value.ToString();
                    Compra.Quantidade = int.Parse(RsCompra.Fields["Quantidade"].Value.ToString());
                    Compra.DataCompra = DateTime.Parse(RsCompra.Fields["DataCompra"].Value.ToString()); 
                }
            }
            catch (Exception)
            {
                throw;
            }

            return Compra;
        }


        public static ComprasBO[] ListUltimos15(Connection cn)
        {
            var RsCompras = new Recordset();
            try
            {
                RsCompras.Open("SELECT TOP 15 PkCompras FROM Compras ORDER BY PkCompras DESC", cn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockReadOnly);
                if (!RsCompras.EOF)
                {
                    var ListaCompras = new ComprasBO[RsCompras.RecordCount];
                    for (int i = 0; i < RsCompras.RecordCount; i++)
                    {
                        ListaCompras[i] = GetCompras(int.Parse(RsCompras.Fields[0].Value.ToString()), cn);
                        RsCompras.MoveNext();
                    }
                    RsCompras.Close();
                    return ListaCompras;
                }

            }
            catch (Exception)
            {
                throw;
            }
            return new ComprasBO[0];
        }

    }
}

Мой объект

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ADODB;
using LibOrgm;

namespace WebApplication1.BI.Graficos.Compras
{
    public class ComprasBO
    {
        public int PkCompras { get; set; }
        public int IdProduto { get; set; }
        public string Nome { get; set; }
        public int Quantidade { get; set; }
        public DateTime DataCompra { get; set; }
    }
}
Теги:
web-services
asmx

2 ответа

1
Лучший ответ

Вы должны удалить JSON.parse и заменить его данными следующим образом

        var url = "WebService.asmx\ListarQuinzeCompras";

        $http.get(url).success(function (data) {

            $scope.names = data;
        })
Поделиться
0

Ваши $scope.names не являются обязательными в HTML DOM. Вы должны определить контроллер ng-controller="comprasCtrl" в HTML DIV.

Код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appCompras">
<head>
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.9.1.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="FrontEnd/BI/Graficos/Compras/Forms/Controllers/ralatorio-compras.js"></script>
</head>
<body>

    <div class="container" style="padding-top: 100px" ng-controller="comprasCtrl">
        <table class="table table-striped table-bordered">
            <thead class="table-head center-content">
                <tr>
                    <th>Cod. Compra</th>
                    <th>Cod. Produto</th>
                    <th>Nome</th>
                    <th>Quantidade</th>
                    <th>Data da Compra</th>
                </tr>
            </thead>
            <tr ng-repeat="compra in names">
                <td>{{compra.PkCompras}}</td>
                <td>{{compra.IdProduto}}</td>
                <td>{{compra.Nome}}</td>
                <td>{{compra.Quantidade}}</td>
                <td>{{compra.DataCompra}}</td>
            </tr>
        </table>
    </div>


    <script>
        var app = angular.module('appCompras', []);

        app.controller('comprasCtrl', function ($scope, $http) {

            var url = "WebService.asmx\ListarQuinzeCompras";

            $http.get(url).success(function (data) {
                var appJson = JSON.parse(data);

                $scope.names = JSON.parse(appJson);
            })

        });
    </script>

</body>
</html>

Попробуй, это сработает. благодаря

Поделиться
  • 0
    Здравствуйте, парень, я проверял здесь, но не работал: /
  • 0
    @IgorLessa, какую ошибку вы получаете в консоли?
Показать ещё 11 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню