Node Js in ASP.NET MVC 4 in IIS 8 Windows 8.1

Introduction

When I program interactive web pages with Jquery in MVC 4 web site, sometimes I encounter such a situation, that is I expect JavaScript to run in server side to return the data back to web page from web server. Now this Node JS is a very popular JS that can create a JavaScript server in command prompt and can work together with IISNODE component that allows us to run JavaScript in server side IIS web server. This technique is so exciting that we can expect it could do a lot of server side things for web page development. This project will document what I have done in merging Node JS into IIS 8 under ASP.NET MVC 4 web application.

Main Tasks

1. Download Node JS and install it in PC with IIS web server installed

Node.Js is a platform we can download and install it in Windows 8.1 IIS 8 web server machine (for me, it is my .NET development PC). Node JS is installed under c://program file(x86)/ folder called nodejs. See image below:

This installation updates the environment variable for node so we can run Node.exe in any directories inside command prompt. Create a folder and a test js file and run Node.exe to check if this node js platform is working well in our PC. It is easy to see this default installation is successful in Windows 8.1.

2. Download IISNODE MSI and install it in PC with IIS web server installed

I am a .NET IIS fan, so the first thing I need to do is to enable this node js in IIS web server. We need to download and install IISNODE MSI (Windows 7 version can be installed successfully in Windows 8.1 as I just achieved) in IIS 8 web server. IISNode has a folder in c://program files/. Please see below.

3. Create a simple ASP.NET MVC 4 web site

After we installed Node JS and IISNODE MSI successfully in our PC, we leave it as is and move our attentions to create a simple new ASP.NET MVC 4 web site and make it work after we publish this simply web site in IIS 8 web server. See image shown below:

4. Update web.config in ASP.NET MVC 4 web site to enable Node JS

This section is the magic which will allow us to simply merge Node JS into ASP.NET MVC 4 web site. Open default web.config in MVC 4 web site and update handlers in system.web.server section as below:

< add name="iisnode_1" path="test_query.js" verb="*" modules="iisnode">

That is it. We tell IIS 8 web server that the Node JS file "test_query.js" is handled by module IISNODE. After IIS web server gets such an instruction, it will work together with IISnode and Node.js engine to parse this js file as Node js file, which will create a JavaScript server under this MVC 4 web site to process JavaScript in server side and send requests back to client side web page.

5. Test_query.Js file

The code is as simple as below:

var http = require('http');
function onRequest(request, response) {
var body = '< html>'+
           '< head>'+
           '< meta http-equiv="Content-Type" content="text/html; '+
           'charset=UTF-8">'+
           '< /head>'+
           '< body>'+
           '< form action="/upload.js" method="post">'+
           '< textarea name="text" rows="20" cols="60">< /textarea>'+
           '< input type="submit" value="Submit text">'+
           '< /form>'+
           '< /body>'+
           '< /html>';
           response.writeHead(200, {"Content-Type": "text/html"});
           response.write(body);
           response.end();
}

http.createServer(onRequest).listen(process.env.PORT);           

Node JS technique is implemented here. It is simple. We create a HTTP template and this HTTP template creates a server for JavaScript to handle the http request/response in default port.

6. Ajax calls this HTTP response from Node JS

Now, we need to think about how to consume the independent Node JS http response result from JavaScript server and put the result into MVC 4 web page Razor view. It is easy if we know Jquery Ajax call. See the example below:

  < script type="text/javascript">
      $(function () {
          $("#btn").click(function () {
              $.ajax({
                  url: "/test_query.js", 
                  cache: false, 
                  async: true, 
                  success: function (data) {
                      alert(data);
                      $("#getjs").append(data);
                  }
              });
          });
      });
 < /script>        

The URL is simply the link of Node JS file in web server root directory (of course, you can put in a folder). Apax returns the http response from Node js and appends its content to a div element in index.cshtml page. So the content can be displayed properly. See the example below:

Summary

Now we have a way to run JavaScript in server side. This makes JavaScript programming similar to C# .NET programming. Now I get confused when I am doing JavaScript programming. Sometimes, I feel like I am doing .NET programming. This is a really cool feeling I enjoy. We embedded Node JS server inside IIS web server to support MVC 4 web site web requests and data manipulation.