What will be approach in Composite C1 for Creating Custom Form?

Question

I wanted to create a page like following image in Composite-C1 with File upload functionality. But I am stucked here unable to find any thing on google. What will be the best approach to do this. How to create a simple razor functions to do this. What will be in form actions.

Answer 1

I would go ahead and use the free and very flexible Contrib FormBuilder which you can get from here https://bitbucket.org/burningice/compositec1contrib.formbuilder. Under 'Downloads' is the zip-files, which you would go ahead and download and install as Local Packages from within the C1 Console.

For this example you would need CompositeC1Contrib.FormBuilder.0.8.7 and CompositeC1Contrib.FormBuilder.POCO, and if you don't already use the Contrib.Core package, you need grab that one from here https://bitbucket.org/burningice/compositec1contrib/downloads. Install them in this order

• Core
• FormBuilder
• FormBuilder.POCO

When that is all done, you need to create two thing, the form definition and a razor file to present the form

1. The form defintion is a .cs class file, kinda like a Model in NVC, with a number of properties and a submit handler

Form.cs

using System;

using CompositeC1Contrib.FormBuilder;
using CompositeC1Contrib.FormBuilder.Attributes;
using CompositeC1Contrib.FormBuilder.Validation;
using CompositeC1Contrib.FormBuilder.Web.UI;

namespace StackExchange
{
    [FormName("Forms", "Feedback")]
    public class Form : IPOCOForm
    {
        [FieldLabel("Feedback type")]
        [RequiredField("Required")]
        [DropdownInputElement]
        public string FeedbackType { get; set; }

        [FieldLabel("Version")]
        [RequiredField("Required")]
        [DropdownInputElement]
        public string Version { get; set; }

        [FieldLabel("Attachment")]
        [RequiredField("Required")]
        public FormField File { get; set; }

        [FieldLabel("Version")]
        [RequiredField("Required")]
        [TextAreaInputElement]
        public string Description { get; set; }

        public void Submit()
        {
            throw new NotImplementedException();
        }
    }
}

2. The razor file is what controls the layout of the form. Out of the box it has helper methods to just dump all your fields downwards, you're free to add any html, markup and styling in it as you want.

Go ahead and create a .cshtml file named Feedback.cshtml and put in in your ~/App_Data/Razor/Forms folder

@inherits POCOBasedFormsPage<Feedback>

@if (IsSuccess && (SuccessResponse != null && !SuccessResponse.IsEmpty))
{
    @EvaluateMarkup(SuccessResponse.Root)
}
else
{
    @EvaluateMarkup(IntroText.Root)

    using (BeginForm(new { @class = "form-horizontal" }))
    {
        @WriteErrors()
        @WriteAllFields()
        @WriteCaptcha()

        <div class="control-group submit-buttons">
            <div class="controls">
                <input type="submit" name="SubmitForm" class="btn btn-primary" value="Send Enquiry" />
            </div>
        </div>
    }
}

Now you're ready to insert the form on a page on in a template as you'd like. It will turn up as a function named Forms.Feedback and is used like any other C1 Function as you're used to.