This guide aims to provide a step by step “how to” for setting up a new ASP.NET MVC area in the MasterPortal project in the same style as other vendor provided MVC areas. A prerequisite to this guide is to have the “Basic Portal” already installed.

 Note: For more information on how to install the “Basic Portal”, please refer to the following Adxstudio Portals Installation Instructions.

The MVC area to be created will:

  1. Contain an example page that includes a Content Snippet
  2. Adhere to the guidelines provided in the following Adxstudio ASP.NET MVC Supoort

It is important to note that using ASP.NET MVC has some drawbacks when compared to using ASP.NET Web Forms – the technology Adxstudio Portals is primarily built on. It is for this reason MVC is not usually the recommended approach for building new pages.

An example of one drawback is an inability to control content access via Web Page Access Control Rules, as these records require Web Pages and Web Pages require Web Templates which are not supported using MVC.

With that said, let’s begin!

  1. Right click on the areas folder > Add > Controller.

controller

  1. Give the area the name “COE”.
  2. Open the file named “COEAreaRegistration.cs” in the root of the newly created directory.
  3. Add the highlighted yellow text and comment out the existing map route as shown below.

 

  1. Add the following folders to the new COE area (right click, add folder):
    1. Css
    2. Js
    3. ViewModels
  2. Right click on the folder named Controllers then Add>Controller.
  3. Choose the “MVC 5 Controller – Empy” and press “Next”.
  4. Give the controller the name “COEExampleController”.
  5. Right click on the folder Views > Shared > COEExample and then select Add > New Item.
  6. Select the item “Web Forms Master Page (Nested)” and give it the name “COEMaster.master”.
  7. When asked to select a master page select [root] > MasterPages > Default.master
  8. For the master page that has just been created “COEMaster.master”, comment out everything in the code behind files, i.e. “COEMaster.master.cs”& “COEMaster.master.designer.cs” or remove the two files entirely.
  9. Replace the contents of “COEMaster.master” with the following:

 

  1. Right click the Views > COEExample folder and select Add > Web Form with Master Page; give it the name “COEExampleView.aspx” and press the “Add” button.
  2. For the master page select [root] > Areas > COE > Views > Shared > COEMaster.master.
  3. For the “COExampleView.aspx” file that has just been created, comment out everything in the code behind files, i.e.: “COExampleView.aspx.cs” & “COExampleView.designer.cs”or remove the two files entirely.
  4. Replace the contents of the “COEExampleView.aspx” file with the following:

 

  1. Right click the folder named ViewModels > Add > NewItem.
  2. Add a class file with the following (Note: we won’t be using this view model any further in this guide):

 

  1. Copy the contents of web.config file from [root] > Areas > Accounts > Views and paste it over the contents of the web.config file in [root] > Areas > COE > Views (this will allow the ViewModel to operate correctly as it contains the appropriate references).
  2. Open the file COE > Controllers > COEExampleController.cs.
  3. Update it to return the “COEExampleView” as follows add the adx attributes as follows:

 

  1. In CRM, create the following Content Snippet:

test controller

  1. Run the portal project.
  2. You should now be able to navigate to: http://<server:port>/COE/COEExample and see the end result.

basic portal

If you have any comments or suggestions on ways to improve this guide, please comment below as I’d love to hear your feedback. I also recommend you look at the MasterPortal project, in particular the Ideas area for more examples on how MVC can be used in Adxstudio Portals.