Vue.Js with ASP.NET Core MVC

This article mainly focusses on the basic configuration and setup Vue.js with Dot NET Core. There are basic discussions of Web-pack, Grunt or Gulp, Type-Script, Babel, Axios and Web-pack Task Runner. There are short descriptions of Package Installer like NPM, Bower and Yarn.

This article guides to implement a web-based application using Vue.js. These are beginner level guidelines to know the communication between the client side and server side. We will configure the setup and how to use Vue.Js which is a JavaScript framework for client side development. Server side part will be covered by Dot NET Core MVC. Let's see how to setup Vue.Js with Dot NET Core.

Coverage Topic

Vue.js install and basic setup

Dot NET Core download and setup

ASP.NET Core SPA Template

Node.js and NPM setup

Fundamental Knowledge of Package Installer (NPM, Bower, Yarn)

Basic knowledge of Web-pack, Grunt or Gulp

Introduction of Type-Script, Babel

Setup Dot Core MVC and NPM

Use of Axios-Package

Setup Web-pack Task Runne

VUE.JS Introduction

It is a JavaScript framework for single-page-applications (SPA) development. This JavaScript framework is similar to Angular, React.js and Knockout. Each of these has a different focus and you will have to decide which one is good for you. It depends on your situations. If you have to play with dynamic DOM manipulation, then React.js is good. If you need data-driven CRUD operations, then Angular is good. The position of Vue.Js is in between these situations; but still it likes to deal with DOM. These are just my personal opinions.

DOT NET Core

I don't need to introduce the Dot NET Framework. But this time, Dot NET Core starts to bring the revolution into the future. Yes, I'm talking about the cross-platform. If you are targeting to run your application on multiple platform like Windows, Mac and Linux, then Dot NET Core is perfect. Because it focuses on the micro-services and another consideration if you like docker-containers. You know that containers is light weight comparing to virtual machine (VM).

Fundamental Knowledge and Setup

Node.js

Node Package Manage (NPM)

NPM is a command-line utility. You can use it for installing 3rd party package, version management and dependency management. You will be asked to install NPM with Node.js installation setup. If you want to install NPM then, don't forget to install Node.js. It is recommended to install Node.js to run NPM.

Command line:

Install NPM: npm install -g npm

To update: npm update -g

To see the installed version: npm -v

Bower, Yarn

Bower and Yarn are similar to NPM. You can use either NPM or Yarn or Bower. For package installation, Yarn sometimes few seconds faster, then NPM; it depends on the situation.

Web-pack, Grunt or Gulp

If you ask me, what is Web-pack? I'll be silent. Let's see one situation where web-pack will provide you the solution.

End-User: I like your T-Shirt. How did you get that?

Eva.js: My boyfriend John gift me this one.

End-User: Okay, talk to John and ask him.

Eva.js: Hi hun! Where did you buy cool T-Shirt?

John.js: I have bought it from an online store.

So, the end-user sends one more Http-requests to get the expected result. It means, there is a dependency graph where Eva.js calls John.js.

Now if we merge both of these JS files into one bundle, then a single http-request is okay to find the file.

So, you need web-pack to make those bundles. You can concat, minify or uglify your JS files using web-pack.

Concatenation is appending all of the files into one large file.

Minification is removing unnecessary whitespace and character without changing the functionality.

Uglification is converting the code in such a format that it will be difficult to understand.

Gulp/Grunt

Gulp or Grunt are similar to web-pack. You can concat, minify or uglify your JS and CSS files using these.

Web-Pack vs. Gulp/Grunt

Web-Pack

Gulp/Grunt

Type-Script

ECMAScript is the standard for the JavaScript. All of the browsers still don't support new standard. Type-Script works like a transpiler that compiles and converts it from (say, es-2016 or es-2017 to es5) java-script code. Finally, it makes browser compatibility.

If you come from .NET background Engineer, then I would say, it has added some beauty to write JavaScript like - namespaces, interfaces, generics, access-modifiers, null check, etc. You will feel like you are in the .NET home.

Babel

Babel is also a JavaScript transpiler that compiles and converts old ES5 JavaScript to make browser compatible.

Install VUE-CLI

First, you have to make sure that Node.js and NPM are already installed on our system.

Use the following command to install the Vue CLI globally on the local system: npm install -g vue-cli

Setup Dot Net Core MVC and NPM

Create a new .NET Core project with MVC

Select .NET Core > ASP.NET Core Web Application

Select Web Application (MVC):

Manage Client-side Packages with Bower or NPM or Yarn in ASP.NET Core

If you choose the MVC template, then it automatically uses Bower for client-side package installation.

Removing Default Bower from the Project

I will use NPM for this demo project. To remove the Bower from the project:

Remove - lib folder. You will find it into the wwwroot folder.

Remove bower.json configuration file.

Finally, unload and then again reload the project.

Adding NPM Clients-side Package Installer into the Project

Add the package.json file into your project. Add this file by right clicking on the solution and search npm. You will get the npm Configuration File.

After adding the file, unload and reload the project. You will see the npm folder into the Dependencies.

Axios-Package

In this project, I’ll use axios-package for http client request. This is a promise-based http client. Use ‘npm install axios’ to install this package.

package.json

You can copy and paste the contents into the package.json file and Visual-Studio will restore all of the packages for you.

tsconfig.json for Type-Script

To avoid the extra complexity, I did not add the type-script into this project. I have used babel. Because here my primary goal is not to show the transpiler. But if you want to add type-script, then you have to add tsconfig.json file into the project with the following contents and change the target version according to your need.

Setup Webpack Task Runner

You need Web-pack Task Runner to compile and bundle the js files. You can also compile directly from command line. In that case, you don’t need webpack task runner. Anyway, if you want to install, then go to the download link and install it. After installation, you will find the given window in your project.

If you need to change your JS files, then it will be compiled automatically by this tool. You can even run it manually. To run it manually, go to the left side of the Task Runner Explorer. Select the Run and right click on the mouse button, then you will find the run and Bindings options. Click on the Run. Wait few seconds, you will get the result.

Short Demo Project Vue.js with Dot Net Core MVC

I have created a very light project to show you the only configuration and how it works. You can create a Dot NET core MVC Application project. To setup the project, follow the previous steps given above to configure the application.

Hello-World View Page

In this project, I have added a ‘HelloWorld.cshtml’ View page and ‘HelloWorld.cshtml.js’ into the View>Home directory.

In the HelloWorld.cshtml file, I have added two variables like message and twoWayBindingMessage to show you - how we can bind and communicate Vue.js to View.

Here, the message variable with double curly-braces, is a one way static binding. You can use Dynamic Binding if you want. End of this file, there is a JavaScript bundle file which is added from the output directory.

The HelloWorld.cshtml.js’ js file contains the given lines. You will find the variables into the data of the vue object.

How to Submit the Form

I have added ‘EmployeeIndex.cshtml’ View page and ‘EmployeeIndex.cshtml.js’ into the View>Home directory. Here, I have added few lines of code to show you how we can post data using axios. Rest of the get, put or delete methods are similar.

In the EmployeeIndex.cshtml file, add the contents that are given below:

Now, run the project and type some values for firstName, lastName and address. If you click on the Add-Employee button, then you can pass these values from client side to the controller.

There are many ways to configure and setup your project. I have added a tiny demo project with this article. In the demo, I have included very simple and basic code; but you can use separate files for the template and the component file to implement client side development.

WOW.. excellent work. I've been coding away at an Angular 4/5 now 6 .net core framework, and getting frustrated. The thought .. what is Vue like, spent a commute or two looking at it and spotted this. Love the way you have the views beside the .js and using webpack. Not sure if I'll ditch Angular x and go to Vue or not, but either way thank you for this work..

Took a while going through the vue documentation to realize you change the event trigger on the submit button from "v-on:click" to "v-on:click.prevent.stop", to prevent the post back and sen data only. Very neat. Very helpful article, thanks