JavaScript for Line of Business Applications

Welcome to Part One of a series of articles regarding AngularJS and ASP.NET MVC, and utilizing and getting the most out of both

Client side MV* frameworks are all the rage at the moment, and my favourite by far is AngularJS. This article will show you how to hit the ground running with AngularJS while using my favourite server side MVC framework, ASP.NET MVC (5).

If you are developing for the web – apps or websites, then it is almost impossible to escape JavaScript. At some point, you will write some client-side code and as the application grows and the requirements become more complex, your JavaScript code is bound to grow with it. Like with every other complex piece of code, we need to be confident that the code behaves as expected. It doesn’t matter if you decide to use TDD or not, what’s important is to test your code. You can do this manually, very tedious and error prone, or programmatically. The choice is yours!

JavaScript is a different beast on its own, especially if you, like me, are used to doing server-side programming and testing. So how does one start with client-side unit tests?

With AngularJS and ASP.NET MVC, we now have an MVC pattern and architecture for both on the client and server. What do we do and/or how do we approach this? Well one can argue we don’t use any of the MVC architecture on the server and build out a full-fledged AngularJS front-end application and only use make async calls to Web API for all things that absolutely need to be on the server e.g. CRUD, workflows, business logic, etc.

Now, there’s absolutely nothing wrong with this approach, and for the most part a lot of heavy front end SPA’s are built this way in ASP.NET MVC. However, with all the .NET, ASP.NET and AngularJS goodness, why not leverage the best of both worlds? Again, there’s absolutely nothing wrong with building a pure AngularJS application and only using Web API, but for this blog post we’ll go over patterns of using the best of both worlds along with integrating AngularJS with Kendo UI.

Angular is hot. And with good reason. Angular is a complete framework for building client-side JavaScript applications and includes the features you look for in a framework, such as:

* Two way data binding
* Model-View-Whatever
* Testability
* Dependency Injection
* Templates
* Routing
* View Composition
* Animation
* Patterns and a robust eco-system
* Promises
* Extensibility
In this first in a series of Angular posts, I’ll review creating a simple Angular application that shows off some of Angular’s features without writing any JavaScript at all.

In this article, we will explore how to use AngularJS to Post Data and use AngularJS Custom Directives in an ASP.NET MVC application.

So to post data, we need to simply call the save function on our resource instance. However there is a slight gotcha. The $resource object expects all the functions to post to the same URL. In MVC terms, this means posting to the same action method with different HttpGet/HttpPost/HttpPut etc attributes.

In our code, currently the HomeController uses GetTweets method to get the Data. Now Posting to a URL called GetTweets is semantically icky. So let’s update the Controller method to be called justTweet. So we will do GET, POST, PUT etc. requests to the url /Home/Tweet.

In the current era of web application development, Single Page Applications (SPAs) are often demanded by customers. Currently there are lots of different frameworks available for developing web applications, most of these are server side frameworks e.g. ASP.NET MVC. But one of the important aspects for Web development is to provide a Rich user interface with UX (user experience). Thankfully there are several JavaScript client side frameworks available to get this thing done e.g. jQuery, Knockout, Backbone etc. Using these frameworks, a developer can develop Rich and better UX applications.

Ever wanted to a create real website but don’t know anything about back-end programming? Are you still writing websites with raw HTML files? Try this guide out which uses the Express Web (3.x) framework, Jade HTML templates and Twitter-Bootstrap to make a Simple (and delicious) recipes website.

Note: This walkthrough uses Node tools for Visual Studio.

ASP.NET Boilerplate is a starting point for new modern web applications using best practices and most popular tools. It's aimed to be a solid model, a general-purpose application framework and a project template.

*  includes most used framework and libraries by default. Also allows you to choice Single-Page (Angularjs or Durandaljs) or Multi-Page architecture, EntityFramework or NHibernate as ORM.

* implements NLayer architecture(Domain, Application, Infrastructure and Presentation Layers) and Domain Driven Design (Entities, Repositories, Domain/Application Services, DTO's...). Also implements and provides a good infrastructure to implement best practices such as Dependency Injection.

ReactJS.NET makes it easier to use Facebook's React and JSX from C# and other .NET languages, focusing specifically on ASP.NET MVC (although it also works in other environments). It assumes you already have some basic knowledge about React. It is cross-platform and can run on Linux via Mono.

Pre-render the initial state of your React components server-side to make the initial load feel faster.

We’ll see how to power an AngularJS Single Page Application using both ASP.NET Web API and SignalR for back-end data services. You’ll learn how to get started building web applications with AngularJS, how to leverage HTML5 features like local storage and pushState, providing efficient server resources via HTTP and web sockets (sing SignalR), important routing configuration concerns, testing and deployment.

The Backbone.js library allows you to develop responsive web applications with clear separation of Model and View. DOM Events associated with Collection helps to notify the UI elements about Updates and accordingly to display refreshed data

In Backbone, the View (UI) is generally rendered using HTML Templates, and elements declared in this Template are accessible to View, but it might be possible that the HTML page (or MVC view or .aspx) already contains HTML elements and you need to handle the DOM events for these elements. The question then is how to handle them? In the following implementation, we will see that the ‘click’ event for the html button element is handled inside the View object. The method which gets executed for the click event is used to add the model object into the collection and then the collection is rendered using HTML Table.

This tutorial is about creating a Single Page Application using Backbone and performing database CRUD (Create, Read, Update and Delete) operations using ASP.NET Web API as a RESTful service.

Contents list of this article:

1. Short description of Single Page Application.
2. Short description of Backbone.
3. Short description of ASP.NET Web API.
4. Sample Single Page Application using Backbone and Web API.

Single-Page Applications (SPAs) are Rich, Responsive Web apps that load a single HTML page and dynamically update that page as the user interacts with the app.

This code sample gives the demo application for creating Single Page Application using Hot Towel SPA Template (Knockout, Durandal, Breeze).

This application will be useful for understanding the basics of Single Page Application in some extend. If you follow and create the application your own, it will give great experience on SPA. 

This code sample describes step by step creation of My Contact project using MVC 4 - Hot Towel Single Page Application Template.

I am explaining the step by step creation of My Contact project using MVC 4 Hot Towel SPA and I have written inline comment in the source code for better understanding the code. In this web page I am concentrating on steps for creating this application.