Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Steps to Add a New Custom Page in nopCommerce (ASP.NET MVC Based e-Commerce Solution)

DZone's Guide to

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 regards to adding a new custom page in nopCommerce. As nopCommerce switched from Web Forms to MVC in version 2.X, I completely understand that it can be quite an overwhelming change. Let's see if we can clear up the confusion...

· Web Dev Zone
Free Resource

Should you build your own web experimentation solution? Download this whitepaper by Optimizely to find out.

Every now and then, I get the same question from many nopCommerce users in regards 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: 

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: https://github.com/nopSolutions/nopCommerce/releases/

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)

Image title

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

Image title

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)   

Steps to add a new custom page in nopCommerce (ASP.NET MVC based e-Commerce solution) Step 3) In the add scaffold window, select the "MVC 5 Controller – Empty" and click "Add"

Image title

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

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

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

Image title

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") 

Image title

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

Image title

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.

Image title

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

Image title

After selecting your layout page, click on the "Add" button. 

Image title

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) 

Image title

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

Image title

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" },

Steps to add a new custom page in nopCommerce (ASP.NET MVC based e-Commerce solution) "MyNewPage" is the name of your controller 

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

"MyNewPage" is the name of your View folder 


Steps to add a new custom page in nopCommerce (ASP.NET MVC based e-Commerce solution) 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 

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

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"

Image title

Implementing an Experimentation Solution: Choosing whether to build or buy?

Topics:
webdev ,asp.net ,asp.net mvc ,ecommerce ,open source ,web developement ,custom ,page ,mvc ,.net framework

Published at DZone with permission of Lavish Kumar. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}