Nesting oForm module widget into a tab

Topics: Customizing Orchard, Troubleshooting
Sep 16, 2013 at 5:46 PM
Edited Sep 16, 2013 at 5:55 PM
Hi,

I'm looking to nest a simple oForm module widget into a page that has uses tabs, but not entirely sure the best way to implement this. The page has two tabs, one to explain an application, and the second to contain the oForm module.

Currently, the page's basic HTML content is as such:
<h3>Apply to the Institute</h3>
<div class="tabbable"> 
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Application Notes</a></li>
    <li><a href="#tab2" data-toggle="tab">Application Form</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <h5>Application Notes...</h5>
    </div>
    <div class="tab-pane" id="tab2">
<p> __FORM GOES HERE__</p>
</div></p>
    </div>
  </div>
I saw that someone requested how to do something similar with an Accordion, and was told to create an alternate shape, but it didn't seem to be resolved. Is that the correct way to approach this?

Any tips on other methods, or steps on fully creating an alternate shape in this instance, would be appreciated.

Thanks!
Sep 16, 2013 at 9:45 PM
Edited Sep 18, 2013 at 9:41 PM
EDITED

I've created two shapes for both the content and the oforms widget. I took the razor syntax from the widget's .cshtml template and added it to the content shape, resulting in:
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Application Notes</a></li>
    <li><a href="#tab2" data-toggle="tab">Application Form</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
@Model.Html
        </div>
    <div class="tab-pane" id="tab2">
@using Orchard.ContentManagement
@using Orchard.Utility.Extensions
@using oforms.Models
@using oforms.HtmlHelpers

@{
    ContentItem contentItem = Model.ContentItem;
    var form = (OFormPart)contentItem.Get(typeof(OFormPart));
}
 
@helper Captcha()
    {
        var random = new Random();
        var routeValues = new { area = "oforms", c = random.Next() };
    @Html.Image(Url.Action("GenerateCaptcha", "Home", routeValues), "captcha", null);
    <br />
    @Html.TextBox(oforms.OFormGlobals.CaptchaKey, null, new { remote = Url.Action("ValidateCaptcha", "Home", routeValues), @class = "required" });
    }

@{
    var formAttributes = new Dictionary<string, object>();
    formAttributes.Add("id", form.Name);
    if (form.CanUploadFiles) {
        formAttributes.Add("enctype", "multipart/form-data");
    }

    if (!string.IsNullOrEmpty(form.Target)) {
        formAttributes.Add("target", form.Target);
    }
}           

@using (Html.BeginFormAntiForgeryPost(
                                        String.IsNullOrEmpty(form.Action) ? Url.Action("SubmitForm", "Home", new { area = "oforms" }) : form.Action,
                                        form.Method == "POST" ? FormMethod.Post : FormMethod.Get,
                                        formAttributes
                                    )
       )
{
    @Html.Hidden(oforms.OFormGlobals.NameKey, form.Name)
    @Html.Hidden("ReturnUrl", Context.Request.RawUrl)
    if (!string.IsNullOrEmpty(form.InnerHtml))
    { 
        @Html.Raw(form.InnerHtml.Replace("{captcha}", Captcha().ToString()))
    }
}
@{
    String validatorCollectorString = new oforms.HtmlHelpers.Validator()
        .ValidationRuleCollector(form.ValRequiredFields, "required")
        .ValidationRuleCollector(form.ValEmail, "email")
        .ValidationRuleCollector(form.ValNumbersOnly, "number")
        .ValidationRuleCollector(form.ValUrl, "url")
        .ValidationRuleCollector(form.ValDate, "date")
        .RenderValidator();
}


@{
    Style.Require("ValidatorCss");
    Script.Require("jQuery").AtHead();
    Script.Require("ValidatorAdditional");
}

@using (Script.Foot())
{
    if (!string.IsNullOrEmpty(Model.Culture) && Model.Culture != "en")
    {
        Script.Include("validateLocalization/messages_" + Model.Culture + ".js");
    }        
    
    <script type="text/javascript">
    //<![CDATA[
    (function($) {
        $(document).ready(function() {
            $.ajaxSetup({ async: false });
            $('#@form.Name').validate({
                rules: {                                
                        @Html.Raw(validatorCollectorString)
                },
                onkeyup: false,
                messages: {
                    @oforms.OFormGlobals.CaptchaKey: {
                        remote: 'Incorrect captcha'
                    }
                }
            });
        });
    })(jQuery);
    //]]>
    </script>
}


    </div>
  </div>
</div>
However now I'm getting a server error because: Line 32: formAttributes.Add("id", form.Name); is an Object reference not set to an instance of an object.

Please help.