CategoryWebAPI

“Mastering AngularJS for .NET Developers” is here!

Finally! I thought the package had gone lost but then…today the postman knocked the office doors aaaaaand here it is!

mastering angularjs - book

 

It’s an interesting book indeed. Covers most of the functionalities, front to back with an eye to the inner workings and how to integrate with .NET, EntityFramework and WebAPI.

Personally, I’m not a big fan of SPAs . I mean, for example there are cases when you need to hide some parts of the system using some kind of role management. Handling everything server-side “should” grant an higher level of security.

Also, you don’t send to the client unnecessary html blocks, which is always a good thing.

Anyway, here’s my little piece of satisfaction 😀

Data pagination with WebAPI and AngularJS – part 2

Hi all! Looks like the article I wrote some time ago about data pagination with AngularJS is still getting some attention, so I decided to give it a quick update just to spicy things a little bit.

In one of my project I needed a way to run different actions before running the actual pagination, so after some thought I decided to enter the marvelous world of callbacks.

In order to make things more generic, I took advantage of what I wrote in my last post and updated the pager code adding a callback on the page links: this way we can execute a custom function every time the user clicks on one of the links of the pager.

All I had to do was to create the isolated scope and add a pointer to the callback using the ‘&’ attribute. In case you need some refreshing, here’s a nice article about how to pass data to a directive.
Finally, you can check the code here, in the demoPager directive.

Here’s the link to the project on GitHub: https://github.com/mizrael/AngularJs-Pagination

Enjoy!

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.

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 😀

Using Web API as a proxy for downloading files

Imagine this scenario: an ApiController Action that acts as a proxy to an external CDN for downloading files (yes, even large ones).

The basic idea here is to use HttpClient to create an async request to the CDN passing also the optional range headers and then simply return the result to client. Easy huh?
Let’s take a look at the code:

it’s just important to note that I’m not returning HttpResponseMessage directly but I have it enclosed in a Task< > . The ContinueWith part is used to set the http status code to PartialContent (if the range header is provided) and to return the result from the CDN.

I’m targeting .NET 4.0, that’s why there are no async/await 🙂

 

UPDATE (11/12/2015): Bernhard was wondering how the ExtractRange method looks like so I decided to update the post a little bit adding it.
Just one note: this is just an example, code like this is not testable and breaks SRP. Should definitely be placed in a different object so handle with care 🙂

© 2019 Davide Guida

Theme by Anders NorenUp ↑