Very simple DropDown in EditForm

Hello

I have an edit form looking like this

<EditForm Model="@CurContact" OnValidSubmit="@SaveContact" Readonly=true>

    <DataAnnotationsValidator />

    <ValidationSummary />

    <SfDatePicker id="CONTACT_Date_entree" CssClass="e-small" Width="130px" Placeholder="Date d'entrée" TValue="DateTime?" @bind-Value="@CurContact.CONTACT_Date_entree" FloatLabelType="@FloatLabelType.Always" Readonly=@FormReadOnly Enabled=@FormEnabled />

    <br />

    <SfTextBox id="CONTACT_Genre" CssClass="e-small" Width="100px" Placeholder="Genre" @bind-Value="CurContact.CONTACT_Genre" FloatLabelType="@FloatLabelType.Always" Readonly=@FormReadOnly Enabled=@FormEnabled />

 [---]

Everything is working perfectly, now i wish to replace the last SfTextBox with a Simple DropDown with 3 fixed string , lets say "String1" "String2" "String3" and have it binded on the same  CurContact.CONTACT_Genre

Can you please tell me what is the simplest way to do it please ?
Every example i find are with multimembers classes

Thanks a lot

David


3 Replies 1 reply marked as answer

UD UdhayaKumar Duraisamy Syncfusion Team May 31, 2022 08:26 AM UTC

Hi David,


We have created a sample using the DropDownList component for your requirement. We can bind the values to the dropdown using the @bind-value property. For more details please refer to the documentation and attached sample.


 

<EditForm Model="@CurContact">

    <DataAnnotationsValidator />

    <div class="form-group">

        <label for="country">Country:</label>

        <SfDropDownList ID="country"

                        @bind-Value="@CurContact.CONTACT_Genre"

                        DataSource="@CONTACT_Genre"

                        Width="200px"

                        Placeholder="Genre"

                        FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Always"

                        Readonly="@FormReadOnly">

            <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>

        </SfDropDownList>

        <ValidationMessage For="@(() => CurContact.CONTACT_Genre)"></ValidationMessage>

    </div>

    <SfButton>Submit</SfButton>

</EditForm>

 

@code {

    privateDropdownModel CurContact = new DropdownModel();

 

    publicbool FormReadOnly = false;

 

    publicclass DropdownModel

    {

        [Required(ErrorMessage = "Please select your country.")]

        publicstring CONTACT_Genre { get; set; }

    }

 

    publicclass Country

    {

        publicstring Name { get; set; }

        publicstring Code { get; set; }

    }

 

    publicList<Country> CONTACT_Genre = new List<Country>

    {

        newCountry() { Name = "String1", Code = "1" },

        newCountry() { Name = "String2", Code = "2" },

        newCountry() { Name = "String3", Code = "3" }

    };

}

 



Regards,

Udhaya Kumar D


Attachment: FormValidation_b70b7723.zip

Marked as answer

DA David May 31, 2022 03:11 PM UTC

It seems weird to me there's no way to make it much easier, it's basically a textbox with 3 pre defined word that could be set only in the xml part.
I have a form with plenty of drop down to build, that mean plenty of code, plenty of variables, plenty of definitions, plenty of initialisation and such...

But anyway you guys are the best support i have ever experienced
Thanks a bunch for this

David



UD UdhayaKumar Duraisamy Syncfusion Team June 1, 2022 05:58 AM UTC

Hi David,


Thanks for your appreciation. Please get back to us if you need any further assistance.


Regards,

Udhaya Kumar D



Loader.
Up arrow icon