Matt - Please share your answer for pagination with ABP,
I am seeing only first 10 rows bottom no links for pagination are showing in the browser, in view source I can see the div but they are not appearing. Not sure what to go further with pagination.
Adding a directive for pagination is not helping me and frustrating.
For simple pagination I am having this issue which makes me to think this boiler plate framework is going to keep me in trouble future. Almost deciding to drop from this framework.
Yes, here is the error.
Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.
Here is my code in cshtml. With this I will see first 10 rows of mylist which has around 400 rows, but didin't get any page numbers so that I can navigate, in Chrome console I am getting the above error.
<div dir-paginate="jobloc in vm.pagedJobLocationList | filter:search| itemsPerPage: 10"
total-items="totalUsers"
current-page="pagination.current"
pagination-id="newPageNumber">
<span>{{jobloc.jobLocationID}}</span>
<span> </span>
<span class="task-assignedto">{{jobloc.jobLocationName}}</span>
<span> </span>
<span class="task-assignedto">{{jobloc.city}}</span>
<span> </span>
<span class="task-assignedto">{{jobloc.state}}</span>
<span> </span>
<span class="task-assignedto">{{jobloc.zip}}</span>
@<button ng-click="vm.editJobLocation(jobloc)" title="@L("Edit")" class="btn btn-sm btn-info">
<i class="icon-pencil"></i>
</button>@
</div>
<div class="text-center"> <dir-pagination-controls boundary-links="true" direction-links="true" on-page-change="pageChanged(newPageNumber)" template-url="/App/utils/dirPagination.tpl.html"></dir-pagination-controls> </div>
Hi,
I am new to Angular JS, I am trying to use pagination lot of hassle. I saw response from By MattDunnDC who said it is working with one controller, if you don't mind can you please share the code so that I can try on my end too.
I am using the same <a class="postlink" href="https://github.com/michaelbromley/angul">https://github.com/michaelbromley/angul</a> ... pagination
getting this error in browser console.
dirPagination.js:271 Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.
I did add dirPagination.js in shared layout and added directive in app.js like this
var app = angular.module('app', [ 'ngAnimate', 'ngSanitize',
//'ngRoute',
'angularUtils.directives.dirPagination',
'ui.router',
'ui.bootstrap',
'ui.jq',
'abp'
]);
Not sure why it is unable to link it.
Fixed by changing line vm.refreshJobLocations();
After function declaration.
As per your earlier suggestion when I load URL in Chrome I am getting error like this for this
vm.refreshJobLocations is not a function
angular.js:11655TypeError: vm.refreshJobLocations is not a function at new <anonymous> (<a class="postlink" href="http://localhost:6247/App/Main/views/jobLocation/list.js:25:16">http://localhost:6247/App/Main/views/jo ... t.js:25:16</a>) at Object.e [as invoke] (<a class="postlink" href="http://localhost:6247/Scripts/angular.min.js:36:315">http://localhost:6247/Scripts/angular.min.js:36:315</a>) at w.instance (<a class="postlink" href="http://localhost:6247/Scripts/angular.min.js:75:516">http://localhost:6247/Scripts/angular.min.js:75:516</a>) at <a class="postlink" href="http://localhost:6247/Scripts/angular.min.js:59:18">http://localhost:6247/Scripts/angular.min.js:59:18</a> at r (<a class="postlink" href="http://localhost:6247/Scripts/angular.min.js:7:408">http://localhost:6247/Scripts/angular.min.js:7:408</a>) at B (<a class="postlink" href="http://localhost:6247/Scripts/angular.min.js:59:2">http://localhost:6247/Scripts/angular.min.js:59:2</a>) at g (<a class="postlink" href="http://localhost:6247/Scripts/angular.min.js:51:335">http://localhost:6247/Scripts/angular.min.js:51:335</a>) at <a class="postlink" href="http://localhost:6247/Scripts/angular.min.js:50:444">http://localhost:6247/Scripts/angular.min.js:50:444</a> at <a class="postlink" href="http://localhost:6247/Scripts/angular-ui-router.min.js:7:22912">http://localhost:6247/Scripts/angular-u ... js:7:22912</a> at $ (<a class="postlink" href="http://localhost:6247/Scripts/angular.min.js:70:197">http://localhost:6247/Scripts/angular.min.js:70:197</a>)
That is the problem, I am unable to see anything in the logs, my page loads with whatever static content it has. Event I kept alert it comes until that point but never invokes service.
I fixed, not sure what happened I ran Update database again and then cleaned and rebuild it worked now I am able to get the default repository.
I tried to create a list page similar to the example in the sample like get Tasks, I did exactly similar way with different entity, not sure my dynamic web api service is not invoking from my js file. Here is the sample code. Not sure where I am going wrong. My Html file is loading with lists empty, do we need to have an y other settings apart from inheriting from IApplicationService? Please suggest me where I am missing, it is wasting time and making me feel wrong about this framework, this is an excellent framework which I liked the idea very well.
Js File
(function () { var app = angular.module('app');
var controllerId = 'sts.views.jobLocation.locationsList';
//var controllerId = 'locationsController';
app.controller(controllerId, [
'$scope', '$location', 'abp.services.tasksystem.jobLocation',
function ($scope, $location, jobLocationService) {
var vm = this;
//vm.localize = abp.localization.getSource('SimpleTaskSystem');
vm.jobLocationList = [];
$scope.selectedState = 0;
vm.filter1 = "test";
//$scope.$watch('selectedState', function (value) {
// vm.refreshJobLocations();
//});
// alert("I am here1");
vm.refreshJobLocations();
vm.refreshJobLocations = function () {
abp.ui.setBusy( //Set whole page busy until getTasks complete
null,
jobLocationService.getLocs({}).success(function (data) {
vm.jobLocationList = data.jobLocationsList;
})
);
};
vm.getLocationsCountText = function () {
return abp.utils.formatString(vm.localize('Xlocations'), vm.jobLocationList.length);
};
}
]);
})();
Cshtml <div class="panel panel-default" ng-controller="sts.views.jobLocation.locationsList as vm">
<br /><br />
<div class="panel-heading" style="position: relative;">
<br />
<div class="row">
<h3 class="panel-title col-xs-6">
TYest
</h3>
</div>
</div>
<ul class="list-group" ng-repeat="jobloc in vm.jobLocationList">
<div class="list-group-item">
<span>{{jobloc.JobLocationID}}</span>
<span> </span>
<span>{{jobloc.JobLocationName}}</span>
</div>
</ul>
</div>
-- Webapi service using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Abp.AutoMapper; using Abp.Application.Services; using Abp.Domain.Repositories; using SimpleTaskSystem.JobLocations.Dtos; using SimpleTaskSystem.JobLocations; using AutoMapper;
namespace SimpleTaskSystem.JobLocations { public class JobLocationAppService : ApplicationService,IJobLocationAppService {
private readonly IRepository<JobLocation> _jobLocationRepository;
public JobLocationAppService(IRepository<JobLocation> jobLocationRepository)
{
_jobLocationRepository = jobLocationRepository;
}
//public JobLocationAppService()
//{
// //_jobLocationRepository = new IJobLocationRepository();
//}
/*
private readonly IJobLocationRepository _jobLocationRepository;
public JobLocationAppService(IJobLocationRepository jobLocationRepository)
{
_jobLocationRepository = jobLocationRepository;
}
*/
public void CreateJobLocation(JobLocationDto jobLocationDTO)
{
Logger.Info("Creating a JobLocation for input: " + jobLocationDTO);
//if (null == jobLocationDTO)
// jobLocationDTO = new JobLocationDto();
JobLocation jobLocation = new JobLocation {
JobLocationID = jobLocationDTO.JobLocationID,
JobLocationName = jobLocationDTO.JobLocationName,
CreatedAt = DateTime.Now,
CreatedBy = "PrahladTest"
};
_jobLocationRepository.Insert(jobLocation);
}
public GetJobLocationsOutput GetLocs(GetJobLocationInput input)
{
Logger.Info("GetJobLocations for filter " );
List<JobLocationDto> jobLocationDtos = new List<JobLocationDto>();
List<JobLocation> jobLocationsList = _jobLocationRepository.GetAll().ToList();
jobLocationDtos = Mapper.Map<List<JobLocationDto>>(jobLocationsList);
return new GetJobLocationsOutput
{
JobLocationsList = Mapper.Map<List<JobLocationDto>>(jobLocationsList)
};
}
}
}
Hi I really liked ASP.NET boiler plate framework, hats off to the framework. I am getting errors when I am using basic thing, please suggest me where I am going wrong. Thanks in advance.
After adding new entity to existing project, did made use of PM> Add-Migration "XXXX" and PM> Update-Database commands.
It successfully created table in the database whatever I specified in entity. I did add in DBContext also. But issue is when I want to use default repository for this, my Repository is null.
Here is my sample code, I made use of existing sample application added a new entity called JobLocation. When I am using while creating new JobLocation getting null in the repository.
Added in DBContext like below public class SimpleTaskSystemDbContext : AbpDbContext { public virtual IDbSet<Task> Tasks { get; set; }
public virtual IDbSet<Person> People { get; set; }
public virtual IDbSet<JobLocation> JobLocs { get; set; }
public SimpleTaskSystemDbContext()
: base("Default")
{
}
public SimpleTaskSystemDbContext(string nameOrConnectionString)
: base(nameOrConnectionString)
{
}
//This constructor is used in tests
public SimpleTaskSystemDbContext(DbConnection connection)
: base(connection, true)
{
}
}
public virtual IDbSet<JobLocation> JobLocs { get; set; }