The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact [email protected].

Module Development in DNN 8: 2 - Creating your first MVC Action/View

In my previous blog I reviewed the development environment I will be using for my blog series on Module Development in DNN 8. As a reminder you can find all the sample code on Github at https://github.com/cnurse/DnnConnect.Demo. In this blog we will create our first MVC Action and View.

The Model

As mentioned in my previous blog I will be describing how to create a module to manage contacts on my site. The Contact List module will be scoped to the portal – i.e. all contacts for a portal will be available in any instance of the module. A Contact will have 5 simple properties:

First Name

Last Name

Email Address

Phone Number

Twitter Handle

As the domain is not what we are really focusing on in this series I have kept it simple. As we will be creating both an MVC module (as well as a SPA module in future blog posts) I have created a separate project for the Model (API) located in the Dnn.ContactList.Api project (Figure 1).

Figure 1 – The Model project

The Api uses the DAL 2 data access layer and implements a simple “Repository” facade over that framework. As with many of DNN's APIs the ContactRepository is implemented using the ServiceLocator pattern so the methods can be Unit Tested.

The IContactRepository interface provides a simple CRUD API, as shown in Figure 2.

The MVC Controller

So now we have everything set up we are ready to create our first MVC Action and View. Following the MVC convention we will create a class in the Controllers folder called ContactController. This class must inherit from the DnnController base class found in the DotNetNuke.Web.Mvc project. This base class inherits from the core MVC Controller base class, but adds extra support for the DNN Module and Portal context. You can think of this class as the equivalent to PortalModuleBase in WebForms module development.

Figure 3 – The ContactController class

1: publicclass ContactController : DnnController

2: {

3: privatereadonly IContactRepository _repository;

4:

5: public ContactController() : this(ContactRepository.Instance) { }

6:

7: public ContactController(IContactRepository repository)

8: {

9: Requires.NotNull(repository);

10:

11: _repository = repository;

12: }

13: }

This class has two constructors. The parameter-less constructor is used by the MVC framework to instantiate the controller, and the second constructor will be used by our Unit Tests. Use of either constructor will set the private IContactRepository variable.

In the future (DNN NeXt) we will be able to dispense with the parameter-less constructor and allow ASP.NET 5’s Dependency Resolver to inject the appropriate implementation of the interface. I have used this approach rather than calling DotNetNuke.Instance.<<Method>> in each action method as this will be the pattern used in DNN NeXt.

The Index Action

Next we need to add an action method – the default method is usually called Index by convention. As we are not really using ASP.NET routing the name is not that important, as DNN actually determines the controller and action to call from the “ControlSrc” property of the Module Control (Contact/Index.mvc).

The Index action is listed in Figure 4.

Figure 4 – The Index Action

1: [HttpGet]

2: public ActionResult Index()

3: {

4: var contacts = _repository.GetContacts(PortalSettings.PortalId);

5:

6: return View(contacts.ToList());

7: }

This is a fairly simple MVC Action method. In the first line we use the HttpGet attribute to indicate that this method should only be called by HTTP “GET” calls. In line 2 we return an ActionResult – the DNN MVC framework captures this result and renders it in the MvcHostControl. In line 4 we call the GetContacts method of the repository interface to get all the contacts for the portal. Note, that just like PortalModuleBase the DnnController base class provides access to the PortalSettings object. Finally in line 6 we return a strongly typed View, passing in our List of contacts.

The Index View

We now turn our attention to the View. DNN supports all the MVC 5.1 conventions for Views. Thus, you can provide a _ViewStart.cshtml razor script which will execute for all Views before any other View code, and it supports the use of layout views. Figure 5 shows this layout.

The first thing to note is Line 1. DNN Views need to inherit from the DnnWebViewPage class. This is because we need to modify some of the helper methods, as well as provide support for DNN context (ModuleContext and PortalSettings). The rest of the code is fairly straightforward Razor script. We loop over all the contacts in the Model property (which is a List of Contact objects), and render the properties of the contact. With some simple styling we can see the View output in Figure 9.

Figure 9 – The View output

So thats our first MVC Action/View. In my next blog post (on MVC modules) I will show how we can add support for other Actions/Views.

To make working MVC project with DNN 8 CTP4 I had to make some steps in addition to those listed in the articles:- execute the script Install.sql under src/Dnn.ContactList.Api/Scripts/ - fix the _ViewStart.cshtml adding at first line: @inherits System.Web.WebPages.StartPage- compile the MVC project in release mode- install the module package under yourwebsite/Install/Module folder

I want also to thank Charles for these wonderful articles. These are aids that make the community grow in the right direction!...I hope in the future to find many more!

Another little fix to do to run github project is that in Install.sql script the table name is "dnn_Contacts" but in Contact.cs the table name is simply "Contacs", so you need to fix the script before execute it or to fix the class Contact with the right table name.Regards.

Nice Article, Charles! Please I have some few questions to ask. 1. If I download the latest DNN 8.0 CTP 4, can I start building the MVC modules inside the WAP, rather than going through the examples you gave in your articles.2. Can I configure Ninject to Injection my dependences in the constructor of my controller because i used this in all my MVC project.

When inherits from DotNetNuke.Web.Mvc.Framework.DnnWebViewPage the HtmlHelper(@Html) is overrides and all the methods in System.Web.WebPages.Html.HtmlHelper is gone (ex. DropDownList, Raw, CheckBox, ListBox)

Im now developing some stuff using new MVC features supported by DNN8. In webforms we can use controls like DnnJsInclude or DnnCssInclude to include client scripts throught Client Resources Management API. Now, it's possible to use the same capabilities in a MVC module?

Hello, I am new to dotnetnuke. I have many tables with many columns, how can I generate the Model / view / controller classes to use? I know I can copy the Item.cs file and change all the columns to my table's column, but that is really a huge job and I think it will save a lot of time if we have a way to generate all the model classes.

Where is there a written article series on using the C# DNN8 DAL2 MVC template? I can't find one anywhere and the frustration experienced thus far is very intense and agonizing to be frank.

The videos I can find show *nothing* and it's not like I can't do MVC. I use it at work and have rewritten some half a dozen classic ASP sites for my employer using some Ext JavaScript but mostly jQuery and Bootstrap.

Finding full examples on DNN ... good luck.

This article does not show *what file* to add the ModuleAction attribute to in a template nor how to set up a file in a template to work with DNN.

It also says you can't add a Module Action attribute to a Controller but in Chris Hammond's template, this is where the Module Action attribute *is*.

The problem is the pencil icon isn't showing up.

Here are the steps taken:

1. Set up VS 2015 Professional2. Set up IIS3. I use the hosts file to set up my own custom URL so did not use dnndev.me -- but I like this idea that it already does the loop back for me.4. SQL Server is set up.5. Site works ...

Created a module project for the DAL2 MVC and it's under .../DesktopModules/MVC/ where it should be.

Built the module, dropped it on a page.

Was able to make sure debugging works from the project solution. It does.

Added some text to a Setting file for a sanity check. It will show up.

So ... where's the pencil icon for this critter? Also, where in the *heck* (sorry for the frustration) is there a simple written series on how to develop a DAL2 module from this template?

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.