Managing Viewsets

RazorCart Views are simply Razor Engine Template files that contain straight HTML in addition to C# code that will be compiled on the server prior to the pages being sent to the browser,  Creating custom viewsets allows you to extend RazorCart with your own business logic and customize the user interface without worrying about losing your modifications when upgrading.  Razor syntax is based on the ASP.NET framework.



  • HTML/CSS development skills
  • JavaScript frameworks (AngularJS)
  • ASP.Net MVC Razor Syntax
To access the Viewsets Managing page click on the Admin Menu in your DNN portal, then select RazorCart Admin Console:
You will be taken to the dashboard of your store. 
From the left-side menu go to Store Setup > Templates > Viewsets
Find the module that you would like to customize and click Actions menu > Copy Viewset, this will create a copy of the module views folder in DesktopModules to "Portals/{{PortalId}}/RazorCart/Viewsets". The module view list will be enabled and will show a "Customized" label next to the view files that are now copied to the Custom Viewset folder.
Select the desired MVC view file (,cshtml) and then click Edit Selected from the Actions menu
This will open the MVC Editor to modify the custom view file located in the Portal folder, edit the file and click Save
If you would like to undo your changes and roll back to the default Views, select the module and from the Actions menu click Delete Viewset, this will remove the copied view files from the Custom Viewset folder and module will now use the default views
** Please note that copying/deleting the Views require the application to be restarted as the ASP.NET MVC will determine the view location at the Application_Start() event, to restart the application Select the Server Icon from the top navigation bar and select Restart Application
Custom Viewsets are applied to the Portal/Site level and will affect all the stores you have created for this Portal! 

Viewset Properties

This section describes how to find the model properties available in a viewset.  In regards to the model properties, these double curly braces are AngularJS Expressions <> it was transferred from the MVC.Net model to the Client's AngularJS model. Using your browsers JS Console (Developer Tools) you can get all the properties, for example:
Product List Module
angular.element('[ng-controller="listCtrl as list"]').scope().list
Product Details Module
angular.element('[ng-controller="detailsCtrl as details"]').scope().details
Product Slider Module
angular.element('[ng-controller="sliderCtrl as slider"]').scope().slider
Checkout/Cart Module
angular.element('[ng-controller="checkoutCtrl as checkout"]').scope().checkout
Mini Cart Module
angular.element('[ng-controller="minicartCtrl as minicart"]').scope().minicart
Category Menu Module
angular.element('[ng-controller="categoryCtrl as catMenu"]').scope().category
Quick Order Module
angular.element('[ng-controller="entryCtrl as entry"]').scope().entry
Product Grid Module
angular.element('[ng-controller="gridCtrl as grid"]').scope().grid
My Account Module
angular.element('[ng-controller="accountCtrl as account"]').scope().account
The following screen shots are of the browser developer tools and show how to view the properties of the product slider module:
Once you have the module properties you can add your own custom logic using c# or js.

Customizing RazorCart Admin Pages

The following example illustrates how to customize the order admin screen:
  1. Create a folder "AdminConsole" in "/Portals/{ID}/RazorCart/Viewsets/"
  2. Copy the file "_ViewStart.cshtml" from "/DesktopModules/RazorCart/AdminConsole/Views" to the above location. Don't modify it unless if you also want to change the layout location to edit it!
  3. Create another folder "Order" and copy the file "Edit.cshtml" from "/DesktopModules/RazorCart/AdminConsole/Views/Order" into it.
  4. Edit the view file "Edit.cshtml" as needed. Add the html label and use @model.Order.UDF1 to populate that field.
  5. Recycle AppPool or you can click "Restart Application" from server icon in Admin-Console if you're logged in as a super user. This is needed to update the MVC view locations.
** Only the copied view files will be loaded from Portals folder, the rest will be loaded from the DesktopModules by default, also viewset files inside the Portals folder will not be lost during installation/upgrading.

Resx Files

All front end user facing modules use Resx files to store labels so that they can be changed and localized for different languages.  The following is the path to all the resx files in RazorCart:
If you have any questions, please Contact Us.

Add Feedback