Angular 2 server side paging using ng2-pagination

Published on March 31, 2016 in .NET, TypeScript, Web API · Read time 9 minutes

Angular 2 is not quite out of beta yet (Beta 12 at the time of writing) but I’m in the full flow of developing with it for production use. A common feature, for good or bad, is to have lists/tables of data that the user can navigate through page by page, or even filter, to help find something useful. Angular 2 doesn’t come with any out of the box functionality to support this, so we have to implement it ourselves. And of course what the means today is to use a third party package! To make this happen, we will utilise n2-pagination , a great plugin, and Web API. I’ve chosen Web API because that is what I’m using in my production app, but you could easily use ExpressJS or (insert your favourite RESTful framework here). Checklist Here is a checklist of what we will do to make this work; Create a new Web API project (you could very easily use an existing project) Enable CORS, as we will use using a seperate development server for the Angular 2 project Download the Angular 2 quick start, ng2-pagination and connect the dots Expose some sample data for testing I will try to stick with this order. Web API (for the back end) Open up Visual Studio ( free version here ) and create a new Web…

Create a RESTful API with authentication using Web API and Jwt

Published on March 15, 2016 in .NET, C#, Entity Framework · Read time 23 minutes

Web API is a feature of the ASP .NET framework that dramatically simplifies building RESTful (REST like) HTTP services that are cross platform and device and browser agnostic. With Web API, you can create endpoints that can be accessed using a combination of descriptive URLs and HTTP verbs. Those endpoints can serve data back to the caller as either JSON or XML that is standards compliant. With JSON Web Tokens (Jwt), which are typically stateless, you can add an authentication and authorization layer enabling you to restrict access to some or all of your API. The purpose of this tutorial is to develop the beginnings of a Book Store API, using Microsoft Web API with (C#), which authenticates and authorizes each requests, exposes OAuth2 endpoints, and returns data about books and reviews for consumption by the caller. The caller in this case will be Postman , a useful utility for querying API’s. In a follow up to this post we will write a front end to interact with the API directly. Set up Open Visual Studio (I will be using Visual Studio 2015 Community edition , you can use whatever version you like) and create a new Empty project, ensuring you select the Web API option…

How to add SignalR to the telephone directory sample application

Published on March 15, 2014 in .NET · Read time 6 minutes

As part of a recent mini series we created a very simple telephone directory web page that showed some features of Bootstrap, KnockoutJS, jQuery, Web API and the Entity Framework. Just for fun, I figured it would be cool to add SignalR so that we could see how simple it is to add full duplex, real time communications to your website. The first parts of the mini series can be found here; /dot-net/create-a-telephone-directory-with-bootstrap-knockoutjs-jquery-web-api-and-entity-framework-part-1-of-2/ /dot-net/create-a-telephone-directory-with-bootstrap-knockoutjs-jquery-web-api-and-entity-framework-part-2-of-2/ This post is a continuation of the original project. You can find the entire source code over on GitHub . Add SignalR using NuGet At the time of writing, you have to be a little careful when installing the SignalR NuGet package. We’ll install and setup SignalR the way it is supposed to be done, and then we will fix a problem that we encounter at the end. First, open the Telephone Directory project, and install SignalR using the Package Manager Console; SignalR has a dependency on Microsoft.Owin , which will be installed automatically for you. Add a new item to your project…

Create a telephone directory with Bootstrap, KnockoutJS, jQuery, Web API and Entity Framework (Part 2 of 2)

Published on March 12, 2014 in .NET · Read time 11 minutes

I find that the best way to learn any new technology, or technology that are unfamiliar with, is to sit down and practice. The purpose of this very simple tutorial is to learn the basics of creating a single page website that can be used to capture peoples names and telephone numbers. By following this tutorial you will learn; How to use Bootstrap to create a simple UI How to use KnockoutJS for binding to/displaying of your data How to use jQuery to asynchronously retrieve data from a web service How to create a simple Web API using C#/ASP .NET How to persist data using Entity Framework code first This is part 2 of 2. You can read the first part here. Create the UI Our user interface has several jobs to do; It must look good (Bootstrap to the rescue here) It must allow the user to enter their name and number It must allow the user to submit their details to the server It must allow the user to reset the data It must allow the user to edit and delete existing entries What we don’t want is we don’t want to see the page refresh. This is going to be such a simple page that the act of refreshing the entire page will feel clunky (not to mention the additional overhead of contacting the…

Create a telephone directory with Bootstrap, KnockoutJS, jQuery, Web API and Entity Framework (Part 1 of 2)

Published on March 08, 2014 in .NET · Read time 9 minutes

I find that the best way to learn any new technology, or technology that are unfamiliar with, is to sit down and practice. The purpose of this very simple tutorial is to learn the basics of creating a single page website that can be used to capture peoples names and telephone numbers. By following this tutorial you will learn; How to use Bootstrap to create a simple UI How to use KnockoutJS for binding to/displaying of your data How to use jQuery to asynchronously retrieve data from a web service How to create a simple Web API using C#/ASP .NET How to persist data using Entity Framework code first This is part 1 of 2. The second part will be available soon. A screenshot of the end result; Prerequisites/Set Up We will not be using the standard ASP .NET template, for the sake of keeping the code simple and light. Regardless of whether you are using Visual Studio 2012 or 2013, start by creating a new ASP .NET Empty Web Application . Call the project TelephoneDirectory . We’re using this template to avoid a lot of the bulk that comes with the other default templates. The empty project is truely empty, apart from a web.config file and a couple of references. Third party dependencies…

5 easy security enhancements for your ASP .NET application

Published on January 26, 2014 in .NET · Read time 7 minutes

Protecting web applications against unauthorised access is somewhat of a dark art, but there are simple steps you can take to ensure that you are protected against the most common security risks. Cross Site Request Forgery (CSRF / XSRF) Problem: Cross site request forgery (CSRF / XSRF) is the process of tricking a legitimate user of your website into posting data to the web server without their knowledge. This type of attack is typically executed using a malicious link in an email, or by social engineering . Typically, an attacker will craft a web page that has a form with fields named that match the properties that an ASP .NET MVC controller action method is expecting. The form is then submitted (perhaps tucked away in an invisible iframe) and as long as the user has an active session open, the form will be processed as normal. Such an attack could be as simple as posting a comment to a website without the users knowledge, or, say, in the case of a banking application, transfer money to the attacker. Solution: To resolve the problem in ASP .NET MVC, you need to make use of Anti-Forgery Tokens . An anti-forgery token is a hidden field with a unique id that is placed on the form…