Monday, July 27, 2015

Steps to add a new custom page in nopCommerce

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







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

In the Scaffolding options, make sure you have selected "Empty controller"







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







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






Step 7) Leave the view name as "Index"
The view engine should be Razor (CSHTML)
The only box on this window that should be checked will be "Use a layout or master page:"
(Select the layout / masterpage by clicking the [...] button: I am selecting "_ColumnsTwo.cshtml" in this case)


CLICK 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, install , products etc. Similar to that you need to map the route of your new page by adding the code like this:
//My New Page Test
            routes.MapLocalizedRoute("ThisIsMyNewPage", "MyNewPage",
                            new { controller = "MyNewPage", action = "Index" },
                            new[] { "Nop.Web.Controllers" });

In new { controller = "MyNewPage", action = "Index" }, = "MyNewPage" is the name of your controller

In routes.MapLocalizedRoute("ThisIsMyNewPage", "MyNewPage", "MyNewPage" is the name of your View folder



Step 11) Now, recompile your solution and press F5 

No comments: