CategoryMVC

Data pagination with WebAPI and AngularJS

UPDATE: wonder how to do the same using React and NodeJS? Read here!

One of the first issues I faced while studying/working with AngularJS was how to do pagination with data received from the backend. Assuming that all the real paging is done server-side, I “just” needed a way to easily tell the user on which page he is and how to navigate through the rest of the data.

Before we start, I have uploaded a small demo on Git, here’s the link: https://github.com/mizrael/AngularJs-Pagination and a screenshot:

AngularJS pagination

The idea is to use an AngularJS Directive that has access to the paging info (exposed on the current $scope) and creates all the links using an html template.

I have used ASP.NET MVC and WebAPI to generate the dummy data and the Bootstrap pagination component to display the links.

Here’s the simple API controller, the GET action returns an “enhanced” collection class containing the items (yeah) and all the relevant pagination infos (look at the sources here)

On Client-Side all the javascript code is included in this file, obviously for a bigger project it would be better to split directive, controllers and so on in separate scripts.

As you may see, there’s the App declaration at the very beginning, then I have created a basic factory to access the data on the server. Right after there’s the controller that consumes the resource and stores the current page number and the total pages count.
At the end of the script there’s our Directive. The most important part is the range() function, in charge of generating and array of the page indices that will be rendered by the template.

That’s all!

UPDATE 29/06/2015:
I have updated the project a little bit, here’s why.

jQuery unobtrusive validation and custom date formats

Another quick reminder for my sloppy memory:
in case you want to use a custom date format and you need validation (of course, why wouldn’t you?), sometimes may happen that the format you’re using is not recognised during the client validation phase.

In one of my side projects for example I am using the standard jquery unobtrusive validation along with globalize.js. Obviously I have a specific bundle configured for this:

[csharp]
var scriptBundle = new ScriptBundle("~/bundles/validation").Include(
"~/Scripts/jquery.validate.js",
"~/Scripts/jquery.validate.unobtrusive.js",

"~/Scripts/globalize/globalize.js",
"~/Scripts/globalize/globalize.it-IT.js",
"~/Scripts/jquery.validate.globalize.js"
);
[/csharp]

In case you have not noticed, I have imported the Italian globalization script. Again, in case you don’t know, in Italy the date format is usually “day/month/year”, or specifically dd/MM/yyyy .

In order to make client validation work, all you have to do is include somewhere in your project this script:

[csharp]
<script type="text/javascript">
$.validator.methods.date = function (value, element) {
return this.optional(element) || Globalize.parseDate(value, "dd/MM/yyyy", "it-IT");
}
</script>
[/csharp]

that’s it!

Next time: server-side pagination and AngularJs!

MVC: passing complex models in GET

I started recently to work on a REST WebAPI project and soon realized I needed a way to pass complex parameters to my GET actions.

For example, in some cases I have “searcher” classes that expose properties like pagination data, text fields, identificators and so on, something like this:

[csharp]
public class Identificator{
public int Id {get;set;}
public string Name {get;set;}
}

public class Searcher{
public int Page {get;set;}
public int PageSize {get;set;}
public Identificator Key {get;set;}
}
[/csharp]

and I use classes like this to filter my data and perform queries.
I could have used the [FromUri] attribute, but seems that it doesn’t correctly deserialize inner classes.

Since it’s perfectly legal to create (on client-side) a JSON string from the “searcher” and pass it on the querystring, I spent an hour or so to create a custom attribute that works like [FromUri], but is able to deserialize the JSON data to the correct model type.

I have created a repo on Git, here’s the link: https://github.com/mizrael/MVC-Json-Model-From-Uri

PS: this is the first post I write using my new MacbookPro 😀

Simple Membership Provider. Oh you!

{“The Role Manager feature has not been enabled.”}

1/2 hour. Took me half an hour to track down this. It all began with the ASP.NET MVC 4 template, with its shiny AccountController. “Why do I have to write all that auth code? Why can’t I use WebMatrix ? ”

{“The Role Manager feature has not been enabled.”}

Turns out that SOMETIMES when you call

WebSecurity.InitializeDatabaseConnection

you can get that error. Searching online I found that you SHOULD be able to solve it by adding this to your appSettings section:

or MAYBE, you can try adding these assemblies:

<system.web> <compilation debug="true" targetFramework="4.5"> <assemblies> <add assembly="WebMatrix.Data, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add assembly="WebMatrix.WebData, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </assemblies> </compilation> </system.web>

If none of the above works, the last thing you can try is adding these lines to your system.web section:

<roleManager enabled="true" defaultProvider="SimpleRoleProvider"> <providers> <clear/> <add name="SimpleRoleProvider" type="WebMatrix.WebData.SimpleRoleProvider, WebMatrix.WebData"/> </providers> </roleManager> <membership defaultProvider="SimpleMembershipProvider"> <providers> <clear/> <add name="SimpleMembershipProvider" type="WebMatrix.WebData.SimpleMembershipProvider, WebMatrix.WebData"/> </providers> </membership> 

Last one worked for me. Yikes!

© 2019 Davide Guida

Theme by Anders NorenUp ↑