Tech Junkie Blog: 2015

Thursday, July 2, 2015

If you want to know your way around Red Hat Enterprise Linux distribution, but the you don't have the financial ability to obtain a license.  CentOS is your best bet get to the the Red Hat Enterprise Linux official experience.  Because CentOS is a binary capatible version of Red Hat Enterprise Linux.  Meaning all the things that matters are the same, only the branding and logos are different.  CentOS is open sourced and can be downloaded for free.  Although it might be a couple of versions behind Red Hat Enterprise Linux.  But, you should be able to perform everything you can with CentOS that you can with Red Hat Enterprise.  Below is a step by step instruction on how to install CentOS in Oracle VirtualBox.

Step-By-Step Instructions:

1.  Type http://centos.org in your browser
2.  Click on the "Get CentOS Now" button

angular-seed is an AngularJS application skeleton template.  An application skeleton let's gives you a boiler plate template so that you don't have to start the application from scratch.  You can get the source code from https://github.com/angular/angular-seed.  Below are the steps to use angular-seed ass your application template for AngularJS.

Step-By-Step Instructions:

1.  Go the page https://github.com/angular/angular-seed

2. Open Git GUI.  if you don't have Git install you can follow this blog.

3.  In the Github angular-seed page copy the "HTTPS clone URL"


Tuesday, June 30, 2015

One of the first thing you have to do when you are creating a git repository is to create a .gitignore file that tells git to ignore the files specified in the .gitignore file.  Since Visual Studio produces all kinds of files it could take a while if you tried to create a .gitignore file from scratch.  Well there's a website that will generate a .gitignore file for you.  It's called gitignore.io  all you have to do is type in the IDE in this case it's VisualStudio without any spaces and the website will generate a .gitignore file for you automatically.

Step-By-Step Instructions:


  1. Type in the URL https://www.gitignore.io 









Friday, June 26, 2015

In this blog I am going to show you how to install the Hortonworks  Hadoop virtual machine on your local machine using Oracle's VirtualBox.  It is free so it's the best way to learn Hadoop if you are just starting out.

Step-by-Step Instructions:

1.  Type in the url http://hortonworks.com/products/sandbox-instructions , you will be taken to the Hortonworks sandbox download page.

2.  What you want to do is download the latest stable release.  Choose the virtual machine version that is for VirtualBox at the time of this writing the file should say VirtualBox(HDP 2.2.4 - 5.4 GB).  It's going to take a while.


Monday, June 8, 2015

Older versions of IE have problems supporting the newer JavaScript libraries and HTML5 tags.  In the previous blog we've created responsive layout in ASP.NET MVC.  In this blog we are going to use conditional comments to support older versions of Internet Explorer (IE).  Since IE 9 seems to be the cutoff point we will use it in our conditional comment base condition to decide whether we want to do something different to support IE.  We will be working with the MvcApp project.

Step-By-Step Instructions:

1.  Open the MvcApp application
2.  Open the _Layout.cshtml
3.  Inside the <head> tag

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <![endif]-->

Thursday, June 4, 2015

In our previous blog we created a simple _Layout.cshtml file that does not have any markup just to make things simple.  In this blog we will use Bootstrap to make the layout look more professional and responsive, so that it can be viewed in any screen size.  The previous layout looks like screenshot below.
















Friday, May 29, 2015

The JQuery library by design uses only two global namespace so that it would not conflict with other JavaScript libraries.
  • $ - the dollar is used as a reference to JQuery namespace
    • Also used by Prototype library, YUI and mootools
  • jQuery - is also used to reference to jQuery namespace, this the more unique reference of the two options, but nobody really uses it
So what do you do if you wanted to use jQuey and Prototype on the same page?  Well jQuery can concede the $ sign to the other libraries with the code jQuery.noConflict() function

This sample code shows how jQuery gives up the $ sign to the JavaScript library Prototype


Thursday, May 28, 2015

The Northwind sample database is probably the most mention sample database of all time.  Most of the tutorials on the web uses the Northwind sample database as an example.  However, it's not as straight forward to add the Northwind database to your SQL Server instance as you may have think.  The reason is because the Northwind database was initially created for SQL Server 2000.  Therefore, most of the newer versions of SQL Server will throw an error when you tried to attach the .mdb file.  It is easier to run the SQL script that is provided with the download.  In this blog we will go over where to download the Northwind sample database, and how to add to your SQL Server instance using the SQL script.

1. Open your browser and type in the following URL in the address bar
https://www.microsoft.com/en-us/download/details.aspx?id=23654

2.  Click on the "Download" button











Wednesday, April 22, 2015

Let's face it, most of us starts blogging so that we can can hopefully retire in the Caribbean using money that we make from our blog.  Well to do that we need ads on our blog.  In this blog post we will go over the steps to associate, and setup Adsense ads on your Blogger blog.

Step-By-Step Instructions:

1. Log into your Blogger Blog account, then click on Earnings → AdSense


























Monday, April 20, 2015

In the previous blog we've exported a blog from Blogger.  In this blog we will import the .xml file that we've exported from that blog.

Step By Step Instructions:

1.  Sign into the blog the you want to import your blog posts to

2. Under the "Settings" section click on the "Other"
















Sunday, April 19, 2015

In this blog we will go over how to export your blogs in Google's Blogger blogging application.

Step-By-Step Instructions Exporting Your Blog:

1. Sign into the blog you want to export your blog posts from.

2.  Select "Other" in the "Settings" section















Saturday, April 18, 2015

Creating a new blog in Blogger is really easy in fact it takes less than five minutes to do.  Well maybe ten minutes if you have to take screen shots.  Below is a step by step process of how to create your new Blogger blog.

Step-By-Step:

1.  Log into blogger.com with your Google account, you will be logged into the Blogger dashboard

2.  In the dashboard there will be button that says "New Blog", click on the button






















Friday, April 17, 2015

There's actually two selector parameters in JQuery.  The second parameter is the context parameter.  The context parameter specify the context that the selector should operate within that context.  Let's use the bootstrap form field markup below as an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <title></title>
  <style>
   .form-label-spacing{
    margin-top: 15px;
   }
   
   .form-group-spacing
   {
    margin-left: 20px;
   }
  </style>
    </head>
    <body>
         <form>
   <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
      <div class="row">
   <div class="form-group form-group-spacing col-lg-4 col-md-4" id="another-registration-form">
    <label for="firstName" class="form-label-spacing">First Name:</label>
     <input class="form-control" type="text" id="firstName" placeholder="First Name">
    <label for="firstName" class="form-label-spacing">Last Name:</label>
     <input class="form-control" type="text" id="lastName" placeholder="Last Name">
    <label class="E-Mail form-label-spacing" for="E-Mail">Email:</label>
     <input class="form-control" type="email" id="E-Mail" placeholder="Email">
    <label class="form-label-spacing" for="password">Password:</label>
     <input name="Password"  class="form-control"  type="password" placeholder="Password">
    <div class="form-group">
     <label class="form-label-spacing" for="gender">Gender:</label>
      <div class="radio">      
       <label><input type="radio" name="gender" id="gender">Male</label><br/>
       <label><input type="radio" name="gender" id="gender">Female</label>
      </div>
    </div>

         <button type="button"  class="btn btn-default">Sign Up</button>

    </div>
    <div class="col-lg-8 col-md-8"/>
   </div>
  </form> 
    </body>
</html>


Thursday, April 16, 2015

In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library.  Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <title></title>
    </head>
    <body>
         <form>
   First Name: <input name="First Name" type="text"><br/>
   Last Name: <input name="Last Name" type="text"><br/>
   E-Mail: <input name="E-Mail" type="text"><br/>
   Password: <input name="Password" type="password"><br/>
   Gender:
   <br/><input type="radio" name="gender" value="male" checked>Male<br/>
    <input type="radio" name="gender" value="female">Female<br/> 
   <input type="submit" value="Sign-Up"/>
  </form> 
    </body>
</html>

Tuesday, April 14, 2015

In the previous blog about selectors we've gone over what a selector is.  In this blog we will something that is a little more advance and use JQuery to select the attributes within a HTML element.  Most HTML elements have attributes associated with them for example the <input> element has the id, name, and type in them. So let's create a typical registration form input fields for this example and use JQuery to select the form fields according to what attributes the form fields have:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>JQuery Attributes Selector Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
  </script>
    </head>
    <body> 
  <form>
   User ID: <input name="UserId" type="text"><br/>
   First Name: <input name="First Name" type="text"><br/>
   Last Name: <input name="Last Name" type="text"><br/>
   E-Mail: <input name="E-Mail" type="text"><br/>
   Password: <input name="Password" type="password"><br/>
   Gender:
    <br/><input type="radio" name="gender" value="male" checked>Male<br/>
    <input type="radio" name="gender" value="female">Female<br/>
   
  </form>
    </body>
 </html>

Monday, April 13, 2015

A lot of you may have wonder why JQuery releases versions 1.x and 2.x, the reason is because the 1.x versions are released to support older versions of Internet Explorer.   What a lot of people don't realize is that the 2.x version performs better, so if you have the choice between 1.x and 2.x you should choose the 2.x versions. Use the 1.x versions only if you have to.  In this blog we will show how to use conditional comments which Microsoft created in Internet Explorer 5.  Since it's specifically created for Internet Explorer other browsers will ignore it.   Since Internet Explorer 9 seems to be the divider for support we will use it as the base case for our conditional comments.  Here is the code to use the conditional comments to support older versions of Internet Explorer.


<html
    <head>
        <meta charset="utf-8" />
        <title>JQuery Conditional Comments Demo</title>
  <!-- [if lt IE 9]>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <![endif]-->
  <!--[if gte IE 9]><!-->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!--<![endif]-->
    </head>
    <body> 
    </body>
</html>

Friday, April 10, 2015

Selectors are at the heart of JQuery in almost every task you want to perform in JQuery, your initial setup is to use a selector to select an element in the DOM to perform some action on it.  So in this blog we will show you some the common selectors that you will have to use in JQuery to get the job done.

First let's make sure JQuery is working by creating an HTML file with a little JQuery test script in it:

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>JQuery Selector Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
   $(document).ready(alert("jquery is working"));
  </script>
    </head>
    <body> 
    </body>
 </html>

Thursday, April 9, 2015

So according to Node.js's official website http://www.nodejs.org, NodeJs is

“a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.”

So what does that mean in English?  Well it basically means that Node.js enables developers to use JavaScript like it's a server.  Allowing you to do JavaScript server-side like development without the backend servers.  Under the hood of Node.js is the virtual machine call V8.  If you need something lightweight Node.js should be able to fit the bill especially on the client side.

Here are the steps to step up Node:

1.  Go to the website https://nodejs.org/
2.  Click on the "Downloads" tab
3.  Download the install file for the your system

Wednesday, April 8, 2015

If you use Bootstrap in a local environment it would make sense to use the local version of Bootstrap that you've downloaded from the Bootstrap website.  Follow the steps below to setup Bootstrap locally.

Step-By-Step Instructions:

1.  Go the website http://getbootstrap.com then click on the "Get Started" tab.  You will see three choices for download.  You want to click the first button that is labeled "Download Bootstrap"


















Tuesday, April 7, 2015

In JavaScript there are two kinds of values that most developers often believed to be the same.  The "undefined" the "null" values.  When understood correctly, they mean slightly different things.

  • undefined : no value has been defined, usually this means that a variable or object has not been defined or declared before you use it.
  • null : means that there is a value, but the value is not a valid value

 undefined Example:  In the example below we are going to examine the "undefined" value, and try to recreate some of the scenarios that an "undefined" value will be returned.

In an HTML file type in the following code:


<!DOCTYPE html>
<html lang="en">
<head>
<title>undefined vs null</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
 var person = {
    firstName : "Jane",
    lastName : "Cat"
 };
 
 document.writeln("First Name: " + person.firstName + "<br/>");
 document.writeln("Last Name: " + person.lastName + "<br/>");
 document.writeln("Phone : " + person.phone + "<br/>");
</script>
</head>
<body>
</body>
</html>

Friday, April 3, 2015

JSON is becoming the standard way to exchange data in a relatively short amount of time. The reason is because JSON is easier to work with than XML.

JSON Object:
  • JSON object is made up of name/value pairs
Single Object:

{ "firstName" : "John"}


Thursday, April 2, 2015

Cropping an image is something that you will do often when you want to take out parts of the photo is uninteresting or distracting.  For this blog we will be using the Key West photo that we resized in this blog.

Photo of Key West



Wednesday, April 1, 2015

In our previous series we've gone over how to install Ubuntu Server on Oracle VirtualBox to use it as a server.  In this series we will go over how we can use the Fedora desktop as your developer's machine/virtual machine.  Having a Linux developer machine is great because a lot of the more expensive Windows developer's program are expensive.  There's usually a Linux equivalent application that is comparable to their Windows big brother that are usually free or a lot less expensive.  Also most Java technologies work better on Linux than Windows.  So let's begin on journey into the Linux desktop experience.














1. First thing you need is the latest Fedora Desktop distribution, you can get it here at https://getfedora.org/en/workstation/

Download the "Live Image" option.

Fedora-Live-Workstation-x86_64-21-5.iso
2. Launch VirtualBox and click on the "New" button

3. The "Create Virtual Machine" dialog box will be displayed, input the following information



4. It's important that you select 64-bit system, from the drop down if you want to install a 64-bit version of Fedora

5. Give your virtual machine 2 GB of memory to start off with, you can increase this value later, if needed.  Two GB should be enough for most tasks.  You don't want to allocate too much memory to your VM machines.

6.  Click "Next"

7.  Select "Create a virtual hard drive now" option


8.  Click "Create"

9. On this screen you will see the flexibility of VirtualBox you can actually create Microsoft Virtual Machines with VirtualBox, it's the best of both worlds.  Select "VDI (VirtualBox Disk Image)" to create a VirtualBox Disk Image.  Then click "Next"


10.  Select "Dynamically allocated" option, this will grow your disk as needed. Then click "Next"


11. The next screen is the "File location and size" screen.  I gave my VM 25 GB, but you can give the amount of disk space that you are comfortable with.  After you've allocated the disk space, click the "Create" button.


12. Now you have a new virtual machine ready for a Fedora Desktop in VirtualBox






Tuesday, March 31, 2015

Resizing images is a common task that you have to do to show your photo image on a website.  Most digital camera or smart phones takes photos that are a lot larger than what most web sites can display in it's original size.  In this blog we will show you how to resize your photo in GIMP.

Step By Step Instructions:

1.  Open the original photo in GIMP

GIMP original photo size

As you can see the photo has the dimension of 2048x1530, not suitable for web display

2. Click Image → Scale Image

GIMP scale image


3.  The "Scale Image" dialog box will be displayed.  The link icon   puts a constrain on the width and the height to be propositional.  Usually it is the best option, however you need to specify an exact width and height value you can click on the link icon to input your own width and height.  For this blog we will leave the width and height linked.

GIMP scale image width and height settings

4.  Type in the new width and height for the image, for this image I am going to type in 600 for the width, the height field will be adjusted automatically to be proportionate with the new width.  Note you have to click on the height field for the height to be adjusted.  This might be a bug.  Click on the "Scale" button, and the image will be resized.

GIMP resized image

As you can see from the top status bar the image now has the dimension of 600x448

5.  Now that we have the resized image we can export our image as a .jpeg file

6.  To export the image click File → Export As, once the "Export Image" dialog is displayed, expand the "Select File_Type (By Extension)

GIMP export image dialog

7.  Select "JPEG image" File Type

GIMP JPEG image File Type

8.   In the "Name" field give your resized photo a name.

GIMP eport file name













9.  Click the "Export" button


10.  Accept the default export settings, and then click "Export" again

GIMP export default settings

And here is the resized photo, suitable for the web.

GIMP resized photo

Monday, March 30, 2015

Most new users to GIMP gets intimidated with the floating windows that is the default view when you first open GIMP.

GIMP default view


As you can see it is pretty intimidating, the majority of users sees this interface and runs back to GIMP's more expensive alternatives. Even though GIMP has most of the features of the more expensive softwares.   Most back end developers I encountered would hear good things about GIMP, download the software.  Get all excited about it, then when they first open it, their reaction is what in the world !@#$$$ (NC-17 censored) is this.  They would go back and use paint as their photo editor.  Which is a shame, because GIMP is quite powerful.

 However, there's a very easy solution to this UI dilemma and make GIMP more user friendly.

Step-By-Step Instructions:
  1.  Click → Windows → Single Window Mode
  2.  GIMP will dock all the floating windows into a single window, looking like all the other conventional programs that you are used to
GIMP Single Window Mode

3.  The next step is optional, if you feel more comfortable with the single window mode, you can save the current positions by clicking on Edit → Preferences

GIMP preferences























4. In the Preferences dialog, select "Window Management", then click on the button "Save Window Postions Now",  make sure the "Save window positions on exit" is checked, then click "OK"

GIMP Save Window Positions Now

5.  Now close GIMP and open it again, you will see that the single window mode is used instead of the default view.

GIMP single window interface

Thursday, March 26, 2015

There are times when you see a class property without it's private member counterpart and all you see is the {set; get;} accessors. What you are looking at are auto properties that you can create  in C#, the only requirements is that the set; and get; accessors contains no logic.  Usually there are private members that the properties expose to other classes using the get/set accessors, like the code below:


    public class Product
    {
        private int productId;
        private string name;
        private string description;
        private decimal price;

        public int ProductId
        {
            get
            { return productId; }
            set
            {
                productId = value;
            }
        }

        public string Name
        {
            get
            { return name; }
            set
            {
                name = value;
            }
        }

        public string Description
        {
            get
            { return description; }
            set
            {
                description = value;
            }
        }

        public decimal Price
        {
            get
            { return price; }
            set
            {
                price = value;
            }
        }

    }

The above class uses the regular ways you define properties that are exposed to other classes. Even though there are only get/set properties. The auto implemented version of the class requires a lot less typing.
    public class Product
    {

        public int ProductId { get; set; }
        public string Name { get; set;}
        public string Description { get; set; }
        public decimal Price { get; set; }

    }
The properties do not have be define as a private member of the class. This pattern is called the field-backed property pattern. This means that the C# compiler will take care of the private members fields for us when we build our classes. The above example are mutable properties, meaning outside classes can change the values of the properties.

To create immutable properties, all you have to do is add the keyword private to the set; accessors. Immutable properties, means that the properties are only changeable within the class itself. Outside classes can only read the properties.
    public class Product
    {

        public int ProductId { get; private set; }
        public string Name { get; private set;}
        public string Description { private get; set; }
        public decimal Price { get; private set; }

    }

Wednesday, March 25, 2015

In this blog I will go over how to set up jQuery for your web pages.  There are two methods to using jQuery.  The first is the use the CDN URLs that are hosted by jQuery, Google, and Microsoft just to name a few.  In this tutorial we will set the CDN from Google.  The process should be the same for jQuery and Microsoft CDNs.

Here are the URL for Google's jQuery Library:




1.x snippet: https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

2.x snippet: https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js

You might be wondering why there are two versions of jQuery 1.x and 2.x, they both use the same APIs and they pretty much mirror each other on a release basis.  The only difference is that the 2.x versions does not support IE 6,7, or 8.  Just to be on the safe side I always use the 1.x versions.

So here are the steps to using jQuery in your web page:

1.  First create an HTML5 page markup

   <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        
    </body>
</html>
Now add the following script tag to the head element
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

To test if jQuery is working write a simple alert message using the $ sign, which is short hand the jQuery object.
<script>     
     $(document).ready(alert("jquery is   
      working"));
</script>

You should see an alert message that says "jquery is working" when you load the page.

jquery javascript test alert message









Here is the complete markup code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>
   $(document).ready(alert("jquery is working"));
  </script>
    </head>
    <body> 
    </body>
</html>

Tuesday, March 24, 2015

Since Ubuntu does not configure the root account by default you have to manually assign root a password before you can use the root account.  However, there's a way to log in as "root" without setting up the "root" password.  The way to do this is to use the "sudo" and "su" command in combination.  The "sudo" elevates your privileges to root like priviledges, while the "su" command is used to switch from one user to another.  So when used together you get to log in as "root".

So in your Linux prompt type in the following command

sudo su

sudo su to log in as root





enter the password when asked, after you've entered your password you can run commands as "root"

sudo su logged in as root





Blogs in this series:
  1. Creating a New Virtual Machine for Ubuntu Server
  2. Mounting the Ubuntu Server ISO on VirtualBox
  3. Install Ubuntu Operating System on VirtualBox
  4. Install A Desktop GUI on Ubuntu Server 
  5.  Switching To root User With The sudo Command On Ubuntu Server
  6. Installing Apache Web Server On Ubuntu Server

Monday, March 23, 2015

In the previous blog we went over how to create a simple ASP.NET MVC 4 application.  In this blog we will go over the steps to upgrade our ASP.NET MVC 4 application to ASP.NET MVC 5 application.

Step-By-Step Instructions:

  1. Open the "MyMVC4" project that you've created on the last blog
  2. Right click on the project and select "Manage NuGet Packages..."
Manage NuGet Packages















In this blog we will go over how to upgrade your existing project which uses ASP.NET MVC 4 to ASP.NET MVC 5 using NuGet.  During the upgrade you will encounter some errors but they are easy enough to fix by changing the Web.Config file.  In the first blog we will create a simple ASP.NET MVC 4 application from scratch.

But first thing is first let's begin by creating a project in ASP.NET MVC 4:

  1. Create a blank solution in Visual Studio call "MVCProjects"
Visual Studio 2013 Create New Blank Solution

2.  Now add a new project to the "MVCProjects" by selecting ASP.NET MVC4, call it "MyMVC4".
Make sure you select Visual C# → Web → Visual Studio 2012 → ASP.NET MVC 4 Web Application, then click "OK"

 ASP.NET MVC 4 Web Application
























3. Select the "Empty" template, and "Razor" as the "View Engine", then click "OK"

Razor View Engine

4. Right click on the "Controller" and select "Add" → "Controller"

Razor View Engine

5.  On the "Add Controller" screen type "HomeController" on the "Controller name" text box and select "Empty MVC controller".  We just want to keep things simple for this blog.  Then click "Add"

Empty MVC Controller



















6.  You see the "HomeController.cs" class being added to the "Controllers" folder

Home Controller

7.  Double click on the "HomeController.cs" file and you will see the following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyMVC4.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }

    }
}

8.  Right click on the "Index()" method and select "Add View"

MVC Add View







9.   Uncheck the "Use a layout or master page" checkbox. Accept the default settings, MVC uses conventions so the view has the same name as the method name in the "HomeController.cs" file which is "Index()", then click "Add"


Index View Configuration
























10.  In the "Views" folder you see that the "Home" folder has been created with the view "Index.cshtml", the .cshtml extension means that the view uses the C# syntax.

11.  Double click on the view "Index.cshtml" and type "Hello World" between the <div> tag like the markup below

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        Hello World!
    </div>
</body>
</html>

12. Press Ctrl+F5 to run the application, you will see the following.

MVC Browse Index View













In this blog we went over how to create a simple ASP.NET MVC 4 application. In the next part we will go through the steps on how to upgrade your ASP.NET MVC 4 application to ASP.NET MVC 5 using NuGet