Creating Custom Field in Orchard CMS to render Dropdown from a separate module

Question

I'm creating website using OrchardCMS and here I want to have a dropdown in custom form. I have created a module to which I make an ajax call and it returns dropdown populated with db fetched values. All I need is to use this dropdown in custom form. I'm figuring out how I can make it happen? I have tried creating custom field using this link http://docs.orchardproject.net/Documentation/Creating-a-custom-field-type but I'm still find my self no where. There should be some way to do this. Please guide me how I can go about it. I appreciate your response. Thanks Sohaib

Answer 1

You can simply create a field for this.

MyModule/Fields/MyCustomField.cs:

public class MyCustomField : ContentField {
    public string SelectedValue {
        get { return Storage.Get<string>(); }
        set { Storage.Set(value); }
    }
}

MyModule/Drivers/MyCustomFieldDriver.cs:

public class MyCustomFieldDriver : ContentFieldDriver<MyCustomField> {

    // EditorTemplates/Fields/MyCustom.cshtml
    private const string TemplateName = "Fields/MyCustom";

    private static string GetPrefix(ContentField field, ContentPart part) {
        // handles spaces in field names
        return (part.PartDefinition.Name + "." + field.Name)
               .Replace(" ", "_");
    }

    protected override DriverResult Display(ContentPart part, MyCustomField field, string displayType, dynamic shapeHelper) {
        return ContentShape("Fields_MyCustom",
            field.Name,
            f => f.Name(field.Name)
                .SelectedValue(field.SelectedValue));
    }

    protected override DriverResult Editor(ContentPart part, MyCustomField field, dynamic shapeHelper) {
        return ContentShape("Fields_MyCustom_Edit", () => shapeHelper.EditorTemplate(
            TemplateName: TemplateName,
            Model: field,
            Prefix: GetPrefix(field, part)));
    }

    protected override DriverResult Editor(ContentPart part, MyCustomField field, IUpdateModel updater, dynamic shapeHelper) {
        updater.TryUpdateModel(field, GetPrefix(field, part), null, null);
        return Editor(part, field, shapeHelper);
    }
}

MyModule/Views/Fields/MyCustom.cshtml:

@{ 
    var selectedValue = Model.SelectedValue;
}

<h1>@selectedValue</h1>

MyModule/Views/EditorTemplates/Fields/MyCustom.cshtml:

@model MyModule.Fields.MyCustomField

<select id="@Html.IdFor(m => m.SelectedValue)" name="@Html.NameFor(m => m.SelectedValue)"></select>

@using (Script.Foot()) {
    Script.Require("jQuery");

    <script>

        $(function () {
            // your own url ofcourse
            var url = 'http://jsonplaceholder.typicode.com/users',
                dd = $("#@Html.IdFor(m => m.SelectedValue)");

            $.getJSON(url, function (data) {
                $.each(data, function () {
                    dd.append("<option value='" + this.name + "'>" + this.name + "</option>");
                });
            });
        });
    </script>
}

MyModule/Placement.info:

<Placement>
  <Place Fields_MyCustom_Edit="Content:3" />
  <Place Fields_MyCustom="Content:3" />
</Placement>

And that should be all :)