How to submit multiple Selected values from Dropdown in Custom form control ?

sai murali sriramaneni asked on June 26, 2023 18:07

I was implementing multi-select dropdown in custom form control. To do that I had implemented custom form control with multi-select dropdown. The UI part is working well as expected but when we submit multiple values it is accepting only single value and storing it in Database.

So How could I submit multiple values to the server.

Correct Answer

Liam Goldfinch answered on June 28, 2023 16:43

It looks like you're using drpColor.SelectedValue which only returns the first selected value from a dropdown.

You're probably better changing how you're handling value, maybe try something like this:

/// <summary>
/// Gets or sets the value entered into the field, a hexadecimal color code in this case.
/// </summary>
public override object Value
{
    get
    {
        var selectedValues = new List<string>();
        foreach (ListItem item in drpColor.Items)
        {
            if (item.Selected)
            {
                selectedValues.Add(item.Value);
            }
        }
        return selectedValues.Join(";");
    }
    set
    {
        EnsureItems();

        var selectedValues = value.ToString().Split(new[] { ';' }, StringSplitOptions.RemoveEmptyEntries);

        foreach (ListItem color in drpColor.Items)
        {
            color.Selected = selectedValues.Contains(color.Value);
        }
    }
}

1 votesVote for this answer Unmark Correct answer

Recent Answers

Liam Goldfinch answered on June 28, 2023 16:10

Is this a form control (built for Page Type fields etc), or a form component built for a widget field?

Do you have any sample code you can share? We might be able to spot a problem by looking at the code.

0 votesVote for this answer Mark as a Correct answer

sai murali sriramaneni answered on June 28, 2023 16:23

Hi Liam,

This is for form control(built Type fields). I had providing sample code for reference

<asp:ListBox ID="drpColor" runat="server" SelectionMode="Multiple" CssClass="filter-multi-select"> <asp:ListItem Text="Red" Value="#FF0000"></asp:ListItem> <asp:ListItem Text="Green" Value="#008000"></asp:ListItem> <asp:ListItem Text="Blue" Value="#0000FF"></asp:ListItem> <asp:ListItem Text="Yellow" Value="#FFFF00"></asp:ListItem> </asp:ListBox>

public partial class CMSFormControls_ColorSelector : FormEngineUserControl { private string selectedColorValue = string.Empty;

    /// <summary>
    /// Gets or sets the value entered into the field, a hexadecimal color code in this case.
    /// </summary>
    public override object Value
    {
        get
        {
            return selectedColorValue;
        }
        set
        {
            EnsureItems();

            foreach (ListItem color in drpColor.Items)
            {
                if (color.Selected && string.IsNullOrEmpty(selectedColorValue))
                {
                    selectedColorValue = color.Value;
                }
                else if (color.Selected)
                {
                    selectedColorValue = selectedColorValue + "," + color.Value;
                }
            }
            drpColor.SelectedValue = selectedColorValue;
        }
    }

    /// <summary>
    /// Property used to access the Width parameter of the form control.
    /// </summary>
    public int SelectorWidth
    {
        get
        {
            return ValidationHelper.GetInteger(GetValue("SelectorWidth"), 0);
        }
        set
        {
            SetValue("SelectorWidth", value);
        }
    }

    //
    // Summary:
    //     Returns an array of values of any other fields returned by the control.
    //
    // Remarks:
    //     It returns an array where first dimension is attribute name and the second dimension
    //     is its value.
    public override object[,] GetOtherValues()
    {
        object[,] array = new object[1, 2];
        array[0, 0] = "ProductColor";
        string selectedColors = string.Empty;
        foreach(ListItem color in drpColor.Items)
        {
            if(color.Selected && string.IsNullOrEmpty(selectedColors))
            {
                selectedColors = color.Text;
            }
            else if (color.Selected)
            {
                selectedColors = selectedColors + "," + color.Text;
            }
        }
        array[0, 1] = selectedColors;
        return array;


    }

    /// <summary>
    /// Returns true if a color is selected. Otherwise, it returns false and displays an error message.
    /// </summary>
    public override bool IsValid()
    {
        if ((string)Value != "")
        {
            return true;
        }
        else
        {
            // Sets the form control validation error message
            this.ValidationError = "Please choose a color.";
            return false;
        }
    }

    /// <summary>
    /// Sets up the internal DropDownList control.
    /// </summary>
    protected void EnsureItems()
    {
        // Applies the width specified through the parameter of the form control if it is valid
        if (SelectorWidth > 0)
        {
            drpColor.Width = SelectorWidth;
        }
    }

    /// <summary>
    /// Handler for the Load event of the control.
    /// </summary>
    protected void Page_Load(object Sender, EventArgs e)
    {
        // Initializes the drop-down list options
        if (!IsPostBack)
        {
            EnsureItems();
        }

    }
}

0 votesVote for this answer Mark as a Correct answer