DNN MVC Template - Is there a good documentation on how to develop modules

Question

I have been struggling from last 2 days to find clear and exemplified documentation on how to build modules using MVC framework for DOTNETNUKE CMS.

It is very unfortunate for a CMS of that size to first advertise app developers that they support MVC, and then have next to negligible information on how to build say a very simple form to begin with.

This is what I have achieved by now. I am trying to build a basic contact us form:

1. Set up Controller Actions

   // GET: FormEntry Index .. 
   [ModuleAction(ControlKey = "Add", TitleKey = "AddItem")]
   public ActionResult Index()
   {
       return View();
   }
   
   
   
   [HttpPost] // POST: 
   [ActionName("FormEntry")]
   
   public string Post(FormEntry formEntry)
   {
       try
       {
           if (ModelState.IsValid)
           {
               FormEntryManager.Instance.CreateItem(formEntry);
           }
           return "success";
       }
       catch(Exception ex)
       {
           return "error";
       }
   
   }
   

2. Set up a View.

   <div id="[email protected]">
   
       <form id="formcontactus">
           @*@Html.ValidationSummary(true)*@
   
           <fieldset>
               <div class="dnnFormItem">
                   <div><label for="itemName">@Dnn.LocalizeString("lblName")</label></div>
                   @Html.TextBoxFor(m => m.VisitorName)
                   @Html.ValidationMessageFor(m => m.VisitorName, @Dnn.LocalizeString("VisitorNameRequired"))
               </div>
               <div class="dnnFormItem">
                   <div><label for="itemDescription">@Dnn.LocalizeString("lblVisitorEmail")</label></div>
                   @Html.TextBoxFor(m => m.VisitorEmail)
                   @Html.ValidationMessageFor(m => m.VisitorEmail, @Dnn.LocalizeString("VisitorEmailRequired"))
               </div>
               <div class="dnnFormItem">
                   <div><label for="itemDescription">@Dnn.LocalizeString("lblPhone")</label></div>
                   @Html.TextBoxFor(m => m.VisitorPhone)
               </div>
               <div class="dnnFormItem">
                   <div><label for="itemDescription">@Dnn.LocalizeString("lblMessage")</label></div>
                   @Html.TextAreaFor(m => m.VisitorMessage)
                   @Html.ValidationMessageFor(m => m.VisitorMessage, @Dnn.LocalizeString("VisitorMessageRequired"))
               </div>
   
               @Html.HiddenFor(m => m.ModuleId)
           </fieldset>
   
           <button id="btnSumbit" type="button" class="dnnPrimaryAction">@Dnn.LocalizeString("Submit")</button>
           <a id="cancelEdit" href="#" class="dnnSecondaryAction">@Dnn.LocalizeString("Cancel")</a>
       </form>
   
   </div>
   

My index view does get rendered successfully, and I can see my form. Issue is in understanding the way in which I post this data to the MVC Post method. Also my data annotations for validations on my modal class does not work on client side.

I tried posting through jQuery Ajax on the Post method, but that throws an internal error.

Looking forward to hear from DNN community.

Answer 1

A good DNN8 MVC module sample project is my Restaurant Menu MVC project which you can download from github.

My Edit view and controller has form fields with working validation that you can check out.

Make sure when the submit button is clicked, it is entering your controller method (I assume the view is called FormEntry based on your action method?).

Also, your action method that handles your post should return an action result, not a string.

In my post handler, I return a RedirectToRouteResult after persisting the form data if the ModelState.IsValid is true, otherwise I will return the current View with the same model which will fire the validation.

[HttpPost]
[DotNetNuke.Web.Mvc.Framework.ActionFilters.ValidateAntiForgeryToken]
public ActionResult Edit(MenuItem item)
{
    if (ModelState.IsValid)
    {
        //Persist form information

        //Go to default view (Index)
        return RedirectToDefaultRoute();
    }

    // Return to my edit view if there was an error.
    return View(item);
}