Base solution for your next web application
Open Closed

Calling get-method from AngularJs controller #378


User avatar
0
julian created

Hi!

I'm having difficulties with the get-method in AngularJs. I have followed the step-by-step guide, but when I apply the instructions on my own project the results does'nt show and I have no idea what is wrong.

So I'm going all in with showing my stuff here:

My Application structure: i. Application ii. Sessions iii. GetBetTypesAppService iiii. BetTypesAppService.cs iiii. IBetTypeAppService.cs iiii. Dto iiiii. GetBetTypeListDto.cs iiiii. GetBetTypesInput.cs iiiii. GetBetTypesOutput.cs

So in my latest try to get it to work I placed all the classes and interfaces that is needed in an own map. FYI, I haven't changed a thing in any other file in Application so that's why I'm not showing any of them below.

BetTypesAppService.cs:

namespace Expertspel.Sessions
{
    [AbpAuthorize]
    class SessionAppService : ExpertspelAppServiceBase, ISessionAppService
    {
        [DisableAuditing]
        public async Task<GetCurrentLoginInformationsOutput> GetCurrentLoginInformations()
        {
            var output = new GetCurrentLoginInformationsOutput
            {
                User = (await GetCurrentUserAsync()).MapTo<UserLoginInfoDto>()
            };

            if (AbpSession.TenantId.HasValue)
            {
                output.Tenant = (await GetCurrentTenantAsync()).MapTo<TenantLoginInfoDto>();
            }

            return output;
        }

    }
}

IBetTypeAppService.cs:

namespace Expertspel.Sessions
{
    public interface ISessionAppService : IApplicationService
    {
        Task<GetCurrentLoginInformationsOutput> GetCurrentLoginInformations();
    }
}

BetTypeListDto.cs:

namespace Expertspel.Sessions.GetBetTypesAppService.Dto
{
    [AutoMapFrom(typeof(BetType))]
    public class BetTypeListDto : FullAuditedEntityDto
    {
        public string BetTypeCode { get; set; }

        public string BetTypeName { get; set; }
    }
}

GetBetTypesInput.cs:

namespace Expertspel.Sessions.GetBetTypesAppService.Dto
{
	public class GetBetTypesInput : IInputDto
	{
        public string Filter { get; set; }
	}
    
}

GetBetTypesOutput.cs is empty, the step by step guide did'nt involve it so neither did I.

Index.cshtml:

<div ng-controller="tenant.views.bet.index as vm">
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>@L("Bet")</span>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <button class="btn btn-primary blue" @*ng-click="vm.doIt1()"*@><i class="fa fa-plus"></i> ACTION_ONE</button>
            <button class="btn btn-primary blue" @*ng-click="vm.doIt2()"*@><i class="fa fa-plus"></i> ACTION_TWO</button>
        </div>
    </div>
    <div class="portlet light">
        <div class="portlet-body">
            <h3>@L("AllBetTypes")</h3>

            <div class="list-group">
                <a href="javascript:;" class="list-group-item" ng-repeat="betType in vm.bettypes">
                    <h4 class="list-group-item-heading">
                        BetTypeCode: 
                        {{betType.BetTypeCode}}
                    </h4>
                    <p class="list-group-item-text">
                        BetTypeName: 
                        {{betType.BetTypeName}}
                    </p> 
                </a>
            </div>

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

Index.js:

<div ng-controller="tenant.views.bet.index as vm">
    <div class="row margin-bottom-5">
        <div class="col-xs-6">
            <div class="page-head">
                <div class="page-title">
                    <h1>
                        <span>@L("Bet")</span>
                    </h1>
                </div>
            </div>
        </div>
        <div class="col-xs-6 text-right">
            <button class="btn btn-primary blue" @*ng-click="vm.doIt1()"*@><i class="fa fa-plus"></i> ACTION_ONE</button>
            <button class="btn btn-primary blue" @*ng-click="vm.doIt2()"*@><i class="fa fa-plus"></i> ACTION_TWO</button>
        </div>
    </div>
    <div class="portlet light">
        <div class="portlet-body">
            <h3>@L("AllBetTypes")</h3>

            <div class="list-group">
                <a href="javascript:;" class="list-group-item" ng-repeat="betType in vm.bettypes">
                    <h4 class="list-group-item-heading">
                        BetTypeCode: 
                        {{betType.BetTypeCode}}
                    </h4>
                    <p class="list-group-item-text">
                        BetTypeName: 
                        {{betType.BetTypeName}}
                    </p> 
                </a>
            </div>

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

6 Answer(s)
  • User Avatar
    0
    julian created

    Followingg error pops up in my browser error handler:

    Error: [$injector:unpr] http://errors.angularjs.org/1.4.0/$injector/unpr?p0=abp.services.app.betTypeProvider%20%3C-%20abp.services.app.betType%20%3C-%20tenant.views.bet.index

  • User Avatar
    0
    hikalkan created
    Support Team

    Hi,

    You shared SessionAppService as BetTypesAppService.cs. Can you chare the BetTypesAppService? Probably, 'abp.services.app.betType' should be 'abp.services.app.betTypes'. It's a naming problem.

  • User Avatar
    0
    julian created

    Woops, here it is.

    namespace Expertspel.Sessions.GetBetTypesAppService
    {
        public class BetTypesAppService : IBetTypeAppService
        {
            private readonly IRepository<BetType> _bettypeRepository;
    
            public BetTypesAppService(IRepository<BetType> bettypeRepository)
            {
                _bettypeRepository = bettypeRepository;
            }
    
            public ListResultOutput<BetTypeListDto> GetBetTypes(GetBetTypesInput input)
            {
                var bettypes = _bettypeRepository
                    .GetAll()
                    .WhereIf(
                        input.Filter.Count()!=0,
                        p => p.BetTypeCode.Contains(input.Filter) ||
                                p.BetTypeName.Contains(input.Filter) 
                    )
                    .OrderBy(p => p.BetTypeCode)
                    .ThenBy(p => p.BetTypeName)
                    .ToList();
    
                return new ListResultOutput<BetTypeListDto>(bettypes.MapTo<List<BetTypeListDto>>());
            }
        }
    }
    
  • User Avatar
    0
    julian created

    Fixed it! It was as you said, a naming problem. Thanks!

    But as usual another error raises from the ashes: I added more entitites to my project and the first couple of entities I migrated one at a time but realised you could migrate all at the same time. So I deleted the tables that I had migrated directly in the SQL Server Object Explorer aswell as the migration code, and then I ran the Add Migration command when every entity was included... Success!

    But when I run the Update-Database the following error appears:

    Error Number:15248,State:1,Class:11 Either the parameter @objname is ambiguous or the claimed @objtype (OBJECT) is wrong.

    I have tried to rename the entities to ensure the uniqueness and I also tried with deleting the migration code and Add it again. Still the same problem...

    Note: Inbetween these actions I added a column to dbo.AbpUser directly with the SQL Server Object Explorer. But when I realized that could be the problem I immediately deleted it.

    Is it problematic to work that directly with the database or is it prefered to use other means?

    Sorry for the inconvenience / Julian

  • User Avatar
    0
    hikalkan created
    Support Team

    Hi,

    This question is completely related to EntityFramework actually, not to AspNet Zero. But I will try to help if I can :)

    As a best practice; always use EF migrations, never do changes in the SQL Server directly. Otherwise, such problems may occur.

    For your current problem, you can completely delete the database and re-create using Update-Database table. If same problem still exists, can you share your Migration code, I may help you.

  • User Avatar
    0
    julian created

    That worked! Thanks!