Search code examples
javascriptangularjshtmlaspnetboilerplate

Why AngularJS html element response null


I have just started learning AngularJS. I am trying to create a simple project with the ASP.NET Boilerplate MVC/AngularJS template. I can see my GetAll XHR result at Network with success true in my requested queries, but the div in Chrome elements is null (they have after/before elements).

Index.js

(function () {
    angular.module('app').controller('app.views.events.index', [
        '$scope', '$uibModal', 'abp.services.app.event',
        function ($scope, $uibModal, eventService) {
            var vm = this;

            vm.events = [];
            vm.filters = {
                includeCanceledEvents: false
            };

            function getEvents() {
                eventService.getAll(vm.filters).then(function (result) {
                    vm.events = result.items;
                });
            }

            getEvents();
        }
    ]);
})();

Index.cshtml

<div class="row clearfix" ng-controller="app.views.events.index as vm">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card main-content">
            <div class="body table-responsive">
                <table class="table table-hover table-striped">
                    <thead>
                        <tr>
                            <th>@L("Title")</th>
                            <th>@L("Description")</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="event in vm.events">
                            <td>{{event.title}}</td>
                            <td>{{event.description | characters:100}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

EventAppServis.cs

    [AbpAuthorize]
public class EventAppService : TradegramAppServiceBase, IEventAppService
{
    private readonly IEventManager _eventManager;
    private readonly IRepository<Event, Guid> _eventRepository;

    public EventAppService(
        IEventManager eventManager,
        IRepository<Event, Guid> eventRepository)
    {
        _eventManager = eventManager;
        _eventRepository = eventRepository;
    }

    public async Task<ListResultDto<EventListDto>> GetAll(GetEventListInput input)
    {
        var events = await _eventRepository
            .GetAll()
            .Include(e => e.Registrations)
            .WhereIf(!input.IncludeCanceledEvents, e => !e.IsCancelled)
            .OrderByDescending(e => e.CreationTime)
            .Take(64)
            .ToListAsync();

        return new ListResultDto<EventListDto>(events.MapTo<List<EventListDto>>());
    }

    public async Task<EventDetailOutput> GetDetail(EntityDto<Guid> input)
    {
        var @event = await _eventRepository
            .GetAll()
            .Include(e => e.Registrations)
            .Where(e => e.Id == input.Id)
            .FirstOrDefaultAsync();

        if (@event == null)
        {
            throw new UserFriendlyException("Could not found the event, maybe it's deleted.");
        }

        return @event.MapTo<EventDetailOutput>();
    }

    public async Task Create(CreateEventInput input)
    {
        var @event = Event.Create(input.Title, input.Date, input.Description, input.MaxRegistrationCount);
        await _eventManager.CreateAsync(@event);
    }

    public async Task Cancel(EntityDto<Guid> input)
    {
        var @event = await _eventManager.GetAsync(input.Id);
        _eventManager.Cancel(@event);
    }

    public async Task<EventRegisterOutput> Register(EntityDto<Guid> input)
    {
        var registration = await RegisterAndSaveAsync(
            await _eventManager.GetAsync(input.Id),
            await GetCurrentUserAsync()
            );

        return new EventRegisterOutput
        {
            RegistrationId = registration.Id
        };
    }

    public async Task CancelRegistration(EntityDto<Guid> input)
    {
        await _eventManager.CancelRegistrationAsync(
            await _eventManager.GetAsync(input.Id),
            await GetCurrentUserAsync()
            );
    }

    public async Task Delete(EntityDto<Guid> input)
    {
        var @event = await _eventManager.GetAsync(input.Id);
        await _eventManager.DeleteAsync(@event);
    }

    private async Task<EventRegistration> RegisterAndSaveAsync(Event @event, User user)
    {
        var registration = await _eventManager.RegisterAsync(@event, user);
        await CurrentUnitOfWork.SaveChangesAsync();
        return registration;
    }
}

Network XHR


Solution

  • Response object result does not contain data. You have to use result.items instead of result.data.items.

    function getEvents() {
        eventService.getAll(vm.filters).then(function (success) {
            vm.events = result.items;
        },function (error){
    
       });
    }