Let’s look now at the server that will host the application once we finish the development. Just as we needed to install ASP.NET MVC 4 on the development machine in order to develop applications, we need to install it on the server so that it can host the applications. In the server you also use one of the two available methods to install ASP.NET MVC 4, the stand-alone installer or Web PI.
Installing ASP.NET MVC 4 on a server is different from installing it on your development machine in the sense that the stand-alone installer (or WebPI) will skip installation of the development tools, recognizing that you’re installing it on a server and that the operating system is different (e.g., Windows Server 2012). By making this distinction and skipping unnecessary components, the server ends up having only the components that it needs to host and serve ASP.NET MVC 4 applications.
An additional advantage of installing ASP.NET MVC 4 on the server is that the required assemblies are registered in the Global Assembly Cache (GAC), which means that any web site that runs on ASP.NET MVC 4 in that server now has the required assemblies available because the GAC works as a repository of assemblies for the whole server, not just for individual applications
The limited component installation is also important for security and performance considerations, because administrators don’t want any unnecessary software on the servers—and definitely don’t want development tools on the server. The problem with installing development tools on the server is that they sometimes open network ports and/or enable services that otherwise will be closed or turned off, and that increases the risks of security breaches and performance problems.
Visual Studio Application Templates
After you have installed ASP.NET MVC 4 to work with Visual Studio 2010, or have installed Visual Studio 2012 (which already includes ASP.NET MVC 4), you can start creating new ASP.NET MVC 4 projects.
To start creating a new project, open Visual Studio (2010, 2012, or Express) and choose FILE ➤ New Project, as shown in Figure 1. Alternatively, you can use the keyboard shortcut Ctrl+Shift+N.
Figure 1. Creating a new project in Visual Studio 2012
This option opens the New Project dialog, shown in Figure 2, which is divided into four sections. The navigation pane on the left allows you to navigate through the available project templates, either online or installed in your computer. As shown in Figure 2, expand the navigation pane to Installed ➤ Templates ➤ Visual C#. That instructs Visual Studio to display from the set of installed project templates all those that are preconfigured to work with the Visual C# language. As you can see, Visual Studio can be used to build all kinds of different projects under the Visual C# node. We’re going to be creating a web application, so select Web.
Figure 2. The New Project dialog
The middle section displays all the different types of Web project templates available for Visual C#. Select the ASP.NET MVC 4 Web Application template, as shown in Figure 2.
In the drop-down list boxes at the top of the middle section of the dialog, you can select the version of .NET Framework to work with and how the list of templates should be sorted. For the samples in the blog, we will use .NET Framework 4.5.
The section on the right side of the dialog provides a brief description of the template selected in the middle section. Above that description is a search box, enabling you to search for a specific installed template.
At the bottom of the dialog, you type the name of your application and specify the directory where Visual Studio will save the solution files. To the right are two checkboxes:
• Create directory for solution: Selecting this instructs Visual Studio to create a separate directory for the solution files.
• Add to source control: Selecting this will add your application to a source-control system.
I strongly suggest keeping all solution files in a separate folder, so select the “Create directory for solution” checkbox (if it isn’t already selected). As for the source control checkbox, if you already use a source-control system, you can use it (as long as it is compatible with Visual Studio).
After you have filled in all the necessary information in the New Project dialog, click the “OK” button. The New ASP.NET MVC 4 Project dialog is displayed (see Figure 3), which gives you three important options: choose the ASP.NET MVC 4 project template for your new project, choose a view engine, and choose whether to create a unit test project or not. Each option is discussed in turn next.
Figure 3. New ASP.NET MVC 4 Project dialog
Choose the Project Template
You can choose the ASP.NET MVC 4 project template from one of the following eight available options. Each of the templates serves a specific purpose depending on what kind of project you are building.
• Empty: This template creates a solution and project with only the references and minimum configuration to start building an ASP.NET MVC 4 application from scratch. Only the directory structure is added. It does not create any controllers, views, or functionality.
• Basic: Similar to the Empty template, the Basic template has a minimum configuration, but it adds some shared views for an initial (very) basic layout but still no controllers are added and no default functionality implemented.
• Internet Application: This template creates an entire working website that implements a nicely done HTML5-based layout with CSS files, jQuery, and some plug-ins already setup. It has Forms Authentication implemented in the Account controller for handling users with the ASP.NET Membership system. This template is intended for public-facing applications, enabling users to be authenticated using either username and password or OAuth with Facebook, Google, or Twitter.
• Intranet Application: This template is similar to the Internet Application template but, instead of implementing Forms Authentication, it uses Windows Authentication. Windows Authentication is used here because normally intranet users are authenticated against an Active Directory domain.
• Mobile Application: This template is a new kid on the block. It implements a new layout based on jQuery Mobile specifically designed for mobile browsers.
• Web API: Another new kid on the block, this template is similar to the Internet Application template but is specifically designed for creating HTTP services that can reach a broad range of clients, including browsers and mobile devices. With it, you can also build RESTful services, which are nothing more than HTTP services that implement the principals of REST (REpresentational State Transfer).
• Single Page Application: ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScrip. This template is available after installing the Web Tools 2012 update for Visual Studio 2012. It allows you to build single page applications using Knockout.js and ASP.NET Web API. Knockout (http://knockoutjs.com) is a Javascript library that helps you implement the Model-View-ViewModel (MVVM) pattern including templates. The template includes a “to do” list application that demonstrates common practices for building a JavaScript HTML5 application that uses a RESTful server API
• Facebook Application: The Web Tools 2012 update also includes this template. It helps you build Facebook applications. The template includes a new library that takes care of all the plumbing involved in building a Facebook application to let you focus in the logic of the application rather than in the integration with Facebook.
Choose a View Engine
ASP.NET MVC is highly configurable and allows you to select a view engine in the New Project dialog. A view engine is simply a templating language that will ultimately generate HTML in your application once the view has been processed.
You need to select one view engine, but you are not limited to the out-of-the-box options, which are ASPX (or the Web Forms view engine) and Razor (see Figure 4).
Figure 4. View Engine drop-down list
Create a Unit Test Project for Your Application
The last portion of the New ASP.NET MVC 4 Project dialog, shown in Figure 5, is related to unit testing your application. This is an optional step, the purpose of which is to create an additional project that will be used to host unit tests for the application. Although this is optional, keep in mind that the capability to test more easily the functionality you are building is one of the core benefits of using ASP.NET MVC 4. Therefore, I recommend that you choose this option.
Figure 5. Create a unit test project option
In this section of the dialog, you are given the option to enter the name of the project. By default, it is given the same name as your MVC application but with the suffix “.Tests,” which I personally think is a nice name selection. Then you can select the test framework. Visual Studio Unit Test, which uses the Microsoft Test Framework,is selected by default (and is the only option unless you have installed and configured a custom testing framework such as NUnit, MbUnit, or xUnit.net).
Anatomy of an ASP.NET MVC 4 Internet Application
After creating an ASP.NET MVC 4 Internet Application (and test project), you will see in the Solution Explorer window a solution with two projects, as shown in Figure 6. The default directory structure is simple but provides a well-structured convention to create elements in your application.
Figure 6. Solution structure of an ASP.NET MVC 4 Internet Application
The directory structure can handle almost any scenario you will encounter. If by chance it doesn’t, you can modify the structure. I do not advise doing so unless you know how to properly do it. Modifying this structure is an advanced topic that is outside the scope of this blog.
ASP.NET MVC 4 Internet Application Directory Structure:
• App_Data: You can place in this folder the files for which you require read/write permissions, such as LocalDB database files.
• App_Start: This folder contains the configuration files for the different technologies you use in the application, such as authentication, bundling, filtering, routing, and Web API.
• Content: This folder is designed for CSS files and other assets in your website design.
• Controllers: This folder is where you create controller classes. These classes are in charge of handling user requests. The methods in the classes are called action methods because they return some kind of action result. The action result can be HTML, a file, an object, or even an exception. Action methods and controllers are mapped to request URLs, which is how controllers know how to handle the requests.
• Filters: Action filters are custom attributes that provide a declarative means to add a specific behavior to controller action methods. They are used to simplify the implementation of logic in action methods that otherwise would have to be added manually (and repetitively) in every action method. They facilitate the centralization of logic that will then be reused by any action method that needs it.
• Images: This folder is a place to store the images you will be using in your website.
• Models: This is the folder where you create the data and business logic classes.
• Scripts: You add JavaScript files to this folder.
• Views: This folder is for the files containing the UI logic. The files are normally just called views and use a syntax defined by the view engine you selected when you created the project. Views are used to render HTML to the client browser.
• Properties: Double clicking on the Properties node will open the project’s properties window where you can modify options such as the .NET version used by the project, build and publishing options and many more. Expanding the node gives you access to the AssemblyInfo.cs file that stores metadata associated with the project’s assembly.
• References: The References node contains all assemblies used in the application. Configuration files The Web.Config and App.Config files are files in XML format that define configuration options for ASP.NET applications.
• Global.asax: Is a file where ASP.NET applications declare and handle application and session-level events.
• Packages.Config: Is a file in XML format that stores the information of NuGet packages installed in the
application.
Installing ASP.NET MVC 4 on a server is different from installing it on your development machine in the sense that the stand-alone installer (or WebPI) will skip installation of the development tools, recognizing that you’re installing it on a server and that the operating system is different (e.g., Windows Server 2012). By making this distinction and skipping unnecessary components, the server ends up having only the components that it needs to host and serve ASP.NET MVC 4 applications.
An additional advantage of installing ASP.NET MVC 4 on the server is that the required assemblies are registered in the Global Assembly Cache (GAC), which means that any web site that runs on ASP.NET MVC 4 in that server now has the required assemblies available because the GAC works as a repository of assemblies for the whole server, not just for individual applications
Visual Studio Application Templates
After you have installed ASP.NET MVC 4 to work with Visual Studio 2010, or have installed Visual Studio 2012 (which already includes ASP.NET MVC 4), you can start creating new ASP.NET MVC 4 projects.
Figure 1. Creating a new project in Visual Studio 2012
This option opens the New Project dialog, shown in Figure 2, which is divided into four sections. The navigation pane on the left allows you to navigate through the available project templates, either online or installed in your computer. As shown in Figure 2, expand the navigation pane to Installed ➤ Templates ➤ Visual C#. That instructs Visual Studio to display from the set of installed project templates all those that are preconfigured to work with the Visual C# language. As you can see, Visual Studio can be used to build all kinds of different projects under the Visual C# node. We’re going to be creating a web application, so select Web.
Figure 2. The New Project dialog
The middle section displays all the different types of Web project templates available for Visual C#. Select the ASP.NET MVC 4 Web Application template, as shown in Figure 2.
In the drop-down list boxes at the top of the middle section of the dialog, you can select the version of .NET Framework to work with and how the list of templates should be sorted. For the samples in the blog, we will use .NET Framework 4.5.
The section on the right side of the dialog provides a brief description of the template selected in the middle section. Above that description is a search box, enabling you to search for a specific installed template.
At the bottom of the dialog, you type the name of your application and specify the directory where Visual Studio will save the solution files. To the right are two checkboxes:
• Create directory for solution: Selecting this instructs Visual Studio to create a separate directory for the solution files.
• Add to source control: Selecting this will add your application to a source-control system.
I strongly suggest keeping all solution files in a separate folder, so select the “Create directory for solution” checkbox (if it isn’t already selected). As for the source control checkbox, if you already use a source-control system, you can use it (as long as it is compatible with Visual Studio).
After you have filled in all the necessary information in the New Project dialog, click the “OK” button. The New ASP.NET MVC 4 Project dialog is displayed (see Figure 3), which gives you three important options: choose the ASP.NET MVC 4 project template for your new project, choose a view engine, and choose whether to create a unit test project or not. Each option is discussed in turn next.
Figure 3. New ASP.NET MVC 4 Project dialog
Choose the Project Template
You can choose the ASP.NET MVC 4 project template from one of the following eight available options. Each of the templates serves a specific purpose depending on what kind of project you are building.
• Empty: This template creates a solution and project with only the references and minimum configuration to start building an ASP.NET MVC 4 application from scratch. Only the directory structure is added. It does not create any controllers, views, or functionality.
• Basic: Similar to the Empty template, the Basic template has a minimum configuration, but it adds some shared views for an initial (very) basic layout but still no controllers are added and no default functionality implemented.
• Internet Application: This template creates an entire working website that implements a nicely done HTML5-based layout with CSS files, jQuery, and some plug-ins already setup. It has Forms Authentication implemented in the Account controller for handling users with the ASP.NET Membership system. This template is intended for public-facing applications, enabling users to be authenticated using either username and password or OAuth with Facebook, Google, or Twitter.
• Intranet Application: This template is similar to the Internet Application template but, instead of implementing Forms Authentication, it uses Windows Authentication. Windows Authentication is used here because normally intranet users are authenticated against an Active Directory domain.
• Mobile Application: This template is a new kid on the block. It implements a new layout based on jQuery Mobile specifically designed for mobile browsers.
• Web API: Another new kid on the block, this template is similar to the Internet Application template but is specifically designed for creating HTTP services that can reach a broad range of clients, including browsers and mobile devices. With it, you can also build RESTful services, which are nothing more than HTTP services that implement the principals of REST (REpresentational State Transfer).
• Single Page Application: ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScrip. This template is available after installing the Web Tools 2012 update for Visual Studio 2012. It allows you to build single page applications using Knockout.js and ASP.NET Web API. Knockout (http://knockoutjs.com) is a Javascript library that helps you implement the Model-View-ViewModel (MVVM) pattern including templates. The template includes a “to do” list application that demonstrates common practices for building a JavaScript HTML5 application that uses a RESTful server API
• Facebook Application: The Web Tools 2012 update also includes this template. It helps you build Facebook applications. The template includes a new library that takes care of all the plumbing involved in building a Facebook application to let you focus in the logic of the application rather than in the integration with Facebook.
Choose a View Engine
ASP.NET MVC is highly configurable and allows you to select a view engine in the New Project dialog. A view engine is simply a templating language that will ultimately generate HTML in your application once the view has been processed.
You need to select one view engine, but you are not limited to the out-of-the-box options, which are ASPX (or the Web Forms view engine) and Razor (see Figure 4).
Figure 4. View Engine drop-down list
Create a Unit Test Project for Your Application
The last portion of the New ASP.NET MVC 4 Project dialog, shown in Figure 5, is related to unit testing your application. This is an optional step, the purpose of which is to create an additional project that will be used to host unit tests for the application. Although this is optional, keep in mind that the capability to test more easily the functionality you are building is one of the core benefits of using ASP.NET MVC 4. Therefore, I recommend that you choose this option.
Figure 5. Create a unit test project option
In this section of the dialog, you are given the option to enter the name of the project. By default, it is given the same name as your MVC application but with the suffix “.Tests,” which I personally think is a nice name selection. Then you can select the test framework. Visual Studio Unit Test, which uses the Microsoft Test Framework,is selected by default (and is the only option unless you have installed and configured a custom testing framework such as NUnit, MbUnit, or xUnit.net).
Anatomy of an ASP.NET MVC 4 Internet Application
After creating an ASP.NET MVC 4 Internet Application (and test project), you will see in the Solution Explorer window a solution with two projects, as shown in Figure 6. The default directory structure is simple but provides a well-structured convention to create elements in your application.
Figure 6. Solution structure of an ASP.NET MVC 4 Internet Application
The directory structure can handle almost any scenario you will encounter. If by chance it doesn’t, you can modify the structure. I do not advise doing so unless you know how to properly do it. Modifying this structure is an advanced topic that is outside the scope of this blog.
ASP.NET MVC 4 Internet Application Directory Structure:
• App_Data: You can place in this folder the files for which you require read/write permissions, such as LocalDB database files.
• App_Start: This folder contains the configuration files for the different technologies you use in the application, such as authentication, bundling, filtering, routing, and Web API.
• Content: This folder is designed for CSS files and other assets in your website design.
• Controllers: This folder is where you create controller classes. These classes are in charge of handling user requests. The methods in the classes are called action methods because they return some kind of action result. The action result can be HTML, a file, an object, or even an exception. Action methods and controllers are mapped to request URLs, which is how controllers know how to handle the requests.
• Filters: Action filters are custom attributes that provide a declarative means to add a specific behavior to controller action methods. They are used to simplify the implementation of logic in action methods that otherwise would have to be added manually (and repetitively) in every action method. They facilitate the centralization of logic that will then be reused by any action method that needs it.
• Images: This folder is a place to store the images you will be using in your website.
• Models: This is the folder where you create the data and business logic classes.
• Scripts: You add JavaScript files to this folder.
• Views: This folder is for the files containing the UI logic. The files are normally just called views and use a syntax defined by the view engine you selected when you created the project. Views are used to render HTML to the client browser.
• Properties: Double clicking on the Properties node will open the project’s properties window where you can modify options such as the .NET version used by the project, build and publishing options and many more. Expanding the node gives you access to the AssemblyInfo.cs file that stores metadata associated with the project’s assembly.
• References: The References node contains all assemblies used in the application. Configuration files The Web.Config and App.Config files are files in XML format that define configuration options for ASP.NET applications.
• Global.asax: Is a file where ASP.NET applications declare and handle application and session-level events.
• Packages.Config: Is a file in XML format that stores the information of NuGet packages installed in the
application.
No comments:
Post a Comment