AngularJS File Upload

May 3, 2013

IntroductionAngularJS

Recently I had some time to play around with AngularJS. More specifically I had to implement a jQuery based file upload widget.

The widget’s demo site already contains an AngularJS demo, but I wanted a minimum setup, so I started from scratch and figured out the necessary parts to implement the file upload using ASP.NET MVC as the server-side platform.

Let’s see which steps we need to take to implement a basic version.

Read the rest of this entry »

Advertisements

IntroductionKnockout.js

Let’s wrap up our little Knockout powered single-page application. We already covered 3 out of 4 parts of the timesheets application.

Time to finish up with the fourth and final part, deleting timesheets. Using some Twitter Bootstrap and Knockout magic it shouldn’t take that long.

Read the rest of this entry »

IntroductionKnockout.js

In part 3 of this series we’ll implement another feature of our little Knockout.js powered CRUD application. We already talked about read and create in the first two articles, skim through them if you want to get up to speed.

The next logical step after enabling users to add timesheets is to allow them to edit the new records. Time to implement some update functionality.

Read the rest of this entry »

IntroductionKnockout.js

Let’s start where we left off. Go ahead and download the source code of the previous part, unzip it and open it up in Visual Studio.

Last time we retrieved a list of timesheets, pushed it into an observable array and used declarative bindings (data-bind) to associate DOM elements with our view model. In other words we databound it to a table. Knockout then automagically rendered a row for each timesheet in the array.

Let’s proceed with the next step in our little CRUD application and add support for creating new timesheets.

Read the rest of this entry »

IntroductionKnockout.js

The last two posts were introductory posts to Twitter Bootstrap and MongoDB. Let’s combine these two technologies with ASP.NET MVC 4, Web API and Knockout.js to create a simple Single-page Application.

The goal is to fit all the necessary code – HTML, JavaScript and CSS on one single page, hence the name. This results in a more fluid user experience. We will not be doing any full page reloads or transfer control to another page. All interaction with the server will consist solely out lightweight JSON communication.

Read the rest of this entry »

IntroductionTwitter Bootstrap

Last week I wrote a post on how to get started with GitHub. It was part of a session I presented during a company trip early September. The second part of the session showed how you can quickly setup an ASP.NET MVC application and integrate Twitter Bootstrap into it.

For those not familiar with Bootstrap, it is a collection of CSS and HTML conventions for helping you out with typograpghy, forms, buttons, navigations…etc. Included as well is a collection of (optional) JavaScript extensions.

Read the rest of this entry »

IntroductionJetBrains TeamCity

In the previous parts of the TeamCity series I discussed how you can configure the TeamCity CI build server to run unit tests and how you can make this all happen using a MSBuild script.

The end goal of this series is to arrive at a build configuration which we can use to automatically deploy an ASP.NET MVC web application. We want a reliable way of deploying an application to a new environment (staging, acceptance, production…etc.). Manually copying files, editing configuration files, synchronizing servers…is not a wise course.

You want to should avoid manual actions during deployment. Sure, you can get all the steps correct, but in the long run mistakes are unavoidable. And besides, doing all this stuff manually is just plain boring and tedious.

One of the first steps in deploying an ASP.NET / ASP.NET MVC application is to make sure its configuration file (Web.config) is transformed so it fits the environment in which the application will be running. Let’s see how we can apply Web.config transformation using TeamCity.

Read the rest of this entry »