Steps to add a new custom page in nopCommerce (ASP.NET MVC based e-Commerce solution)

Every now and then I get the same question from many nopCommerce users in regard to adding a new custom page is nopCommerce. nopCommerce switched from Web Forms to MVC in version 2.X and everything was rewritten from scratch along with the architecture improvements. While ASP.NET MVC tends to get the most attention these days, many ASP.NET developers are still new to MVC, as it can be a learning curve for any .NET developer. So, I completely understand that it can be quite overwhelming to work with something that is totally different from Web Forms. 
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication. The MVC framework is defined in the System.Web.Mvc assembly. (Source: MSDN
There are many differences in Web Forms and MVC but their basis is still the same. A good way to look at ASP.NET MVC is like: 
Web Form’s ASCX can be considered a VIEW in MVC 
Web Form’s ASCX.CS can be considered as a CONTROLLER in MVC 
Web Form’s ASCX.DESIGNER.CS can be considered as a MODEL in MVC 

What do you need to add a custom page in nopCommerce? 
Source Code: First, you will need full source code of nopCommerce in order to add a custom page. If you are wondering, what is the difference between no source (web) and source code of nopCommerce, please look at this article: Difference between No Source / Web OR Source Code of nopCommerce 

You can download the full source code for nopCommerce from GitHub: 

Note: In this article we will be using the latest version of nopCommerce (i.e. nopCommerce 3.70). 

Before we go further, you need to understand how custom pages are different from topic (pages). Topics (pages) are free form content blocks that can be displayed on your site, either embedded within other pages, or on a page of their own. These are often used for FAQ pages, policy pages, special instructions, and so on. On the other hand, custom pages gives you a full control over the functionality of the page. A topic (page) can be embedded within your custom page but you can’t embed a custom page into a topic page. 

I would like to point out one important thing here that if you are adding / creating a new custom page in your project / solution, and if you plan to upgrade your nopCommerce version, you will have to add the custom page once again in your updated solution.   

Please follow the following steps: 

Step 1) Open the nopCommerce solution in Visual Studio (remember you need full source code) 

Step 2) Now, right click the "Controllers" folder > Select "Add" > Select "Controller.." 

What are Controllers in ASP.NET MVC? 
Controllers are the components that handle user interaction, work with the model, and ultimately select a view to render that displays UI. In an MVC application, the view only displays information; the controller handles and responds to user input and interaction. For example, the controller handles query-string values, and passes these values to the model, which in turn might use these values to query the database. (Source: MSDN)   

Step 3) In the add scaffold window, select the “MVC 5 Controller – Empty” and click “Add” 

Step 4) Name the controller: I am naming it by changing the controller name from "DefaultController" to "MyNewPageController" 

Step 5) Click "Add" and you will see the result (see below) in solution explorer as a new controller page called (in my case: "MyNewPageController.cs")  

Step 6) On the left side (code): Right click on the Public ActionResult Index( ) line and select "Add View..." 

What are Views in ASP.NET MVC?  
Views are the components that display the application's user interface (UI). Typically, this UI is created from the model data. An example would be an edit view of a Products table that displays text boxes, drop-down lists, and check boxes based on the current state of a Product object. (Source: MSDN

Step 7) Leave the view name as "Index" 
You can leave the template as “Empty (without model) 
The only box on this window that should be checked will be "Use a layout page:" 
Select the layout page by clicking the [...] button   

I am selecting "_ColumnsOne.cshtml" in this case (and press OK)

After selecting your layout page, click on the “Add” button 

Step 8) Now, you will get a "Index.cshtml" page  
(In the solution explorer, the location of this page will be in "Views" folder like this: Views > MyNewPage > Index.cshtml) 

Step 9) In your solution, open RouteProvider.cs - You will find this file in this location: Nop.Web/Infrastructure/RouteProvider.cs 

Step 10) Now, it is time to map the route so that solution can locate the new page. You will see different mapped routes like home page, login, register etc. Similar to that you need to map the route of your new page by adding the code like this:  

new { controller = "MyNewPage", action = "Index" },

"MyNewPage" is the name of your controller 

routes.MapLocalizedRoute("ThisIsMyNewCustomPage",                             "MyNewPage/",

"MyNewPage" is the name of your View folder 

My RouteProvider.cs looks like this now:

using System.Web.Mvc;
using System.Web.Routing;
using Nop.Web.Framework.Localization;
using Nop.Web.Framework.Mvc.Routes;
namespace Nop.Web.Infrastructure
    public partial class RouteProvider : IRouteProvider
        public void RegisterRoutes(RouteCollection routes)
            //We reordered our routes so the most used ones are on top. It can improve performance.
            //home page
                            new { controller = "Home", action = "Index" },
                            new[] { "Nop.Web.Controllers" });
            //we have this route for performance optimization because named routes are MUCH faster than usual Html.Action(...)
            //and this route is highly used
                            new { controller = "Widget", action = "WidgetsByZone" },
                            new[] { "Nop.Web.Controllers" });
                            new { controller = "MyNewPage", action = "Index" },
                            new[] { "Nop.Web.Controllers" });
                            new { controller = "Customer", action = "Login" },
                            new[] { "Nop.Web.Controllers" });

Routing in nopCommerce 
nopCommerce is based on ASP.NET (MVC) and it follows the IRouteProvider interface for registering the routes during the application start event. All the routes are registered in the "Route Provider" class in the Nop.Web project.   

Step 11) Now, recompile your solution and press F5 

The URL in the browser (address bar) might be something like this - http://localhost:15536/Views/MyNewPage/Index.cshtml 

So, you might get error something like "Page not found" or "you typed the URL incorrectly". No need to panic! Simple change the URL to this - http://localhost:15536/YourPageName 

(In my case, I will change the URL to: http://localhost:15536/MyNewPage
You should see a page with the layout that you chose and in the content it should say "Index" 

Now you can add your custom content/code in this page or you can create a topic and add topic section in the page so that you can easily maintain the content from the administration section. 
nopCommerce Version (used in this article): Version 3.70 

Hope it helps - Let me know if you have any questions or comments.

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment
5/1/2017 6:08 AM
How can it possible in nopcommerce 3.09, i am geting error.
Please help me,
5/3/2017 9:55 AM
Hi Rajnish,

What error message are you getting? Please provide some details including the steps that you have followed to create a new page in your nopCommerce site.