1. Home
  2. Forum
  3. Blazor
  4. the select value not save in database

the select value not save in database

Hello,

I have an dropdownlist on my page with a editform, when select value and after I save the record.

The binding value of dropdownlist is always null.

I try to implement the event but not working.

I use a Blazor Web Assembly asp.netcore hosted.

It's possible to have an example or tutorial where in editform save data in database with dropdownlist ?

This my code razor:

<EditForm Model="@vis" OnValidSubmit="@OnValidSubmit">

....................

<div class="form-group p-2">

                <div>

                    <SfDropDownList TValue="int?" TItem="Paziente" Placeholder="Seleziona Paziente" Query="@query" @bind-Value="@vis.Id_Paziente">

                        <SfDataManager Url="/api/Paziente" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

                        <DropDownListEvents ValueChange="ComboBoxItemSelected" TItem="Paziente" TValue="int?"></DropDownListEvents>

                        <DropDownListFieldSettings Text="Nome" Value="id"></DropDownListFieldSettings>

                    </SfDropDownList>


                </div>

            </div>


and this my code:

@code {

    [Parameter] public Visita vis { get; set; }

    [Parameter] public string ButtonText { get; set; } = "Salva";

    [Parameter] public EventCallback OnValidSubmit { get; set; }


    public Query query = new Query().Select(new List<string> { "id", "nome" }).Take(6).RequiresCount();

    async Task ComboBoxItemSelected(Syncfusion.Blazor.DropDowns.ChangeEventArgs<int?, Paziente> args)

    {

        //if (args != null)

        //{

        // //Do Work...

        //}

    }

}




5 Replies
SP Sureshkumar P Syncfusion Team March 21, 2022 01:00 PM UTC

Hi Luigi, 
 
Query 1: The binding value of dropdownlist is always null. I try to implement the event but not working. 
I use a Blazor Web Assembly asp.netcore hosted. 

We have validated your reported issue. in our component the value change event trigger after change the value. The event works as expected from our end.  

Find the code example here: 
<SfDropDownList TValue="string" TItem="EmployeeData" Placeholder="Select an Employee" @bind-Value="@model.FirstName" DataSource="@Data"> 
            <DropDownListFieldSettings Value="FirstName" Text="FirstName" /> 
             <DropDownListEvents ValueChange="ComboBoxItemSelected" TValue="string" TItem="EmployeeData"></DropDownListEvents> 
        </SfDropDownList> 
 
@code { 
    public class EmployeeData 
    { 
        [Required(ErrorMessage = "The Employee field is required.")] 
        public string FirstName { get; set; } 
        public string Designation { get; set; } 
        public string Eimg { get; set; } 
    } 
    private List<EmployeeData> Data = new List<EmployeeData> 
    { 
        new EmployeeData() { FirstName = "Andrew Fuller",  Designation = "Team Lead", Eimg= "7" }, 
        new EmployeeData() { FirstName = "Anne Dodsworth", Designation = "Developer", Eimg= "1" }, 
        new EmployeeData() { FirstName = "Janet Leverling", Designation = "HR", Eimg= "3" }, 
        new EmployeeData() { FirstName = "Laura Callahan", Designation = "Product Manager", Eimg= "2" }, 
        new EmployeeData() { FirstName = "Margaret Peacock", Designation = "Developer", Eimg= "6" }, 
        new EmployeeData() { FirstName = "Michael Suyama", Designation = "Team Lead", Eimg= "9" }, 
        new EmployeeData() { FirstName = "Nancy Davolio", Designation = "Product Manager", Eimg= "4" }, 
        new EmployeeData() { FirstName = "Robert King", Designation = "Developer", Eimg= "8" }, 
        new EmployeeData() { FirstName = "Steven Buchanan", Designation = "CEO", Eimg= "10" } 
    }; 
 
    async Task ComboBoxItemSelected(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, EmployeeData> args) 
    { 
        Console.WriteLine("changed component value: " +args.Value); 
        //if (args != null) 
 
        //{ 
 
        // //Do Work... 
 
        //} 
    } 
} 
 
Find the screen shot of value change event: 
 
 
Query 2: It's possible to have an example or tutorial where in editform save data in database with dropdownlist ?  
 
We have got the component value in the model object when rendering component inside editform. By using the two-way variable, we can save the component value to the datasource.  
 
Find the code example:  
 
<EditForm Model="@model" OnValidSubmit="@OnValidSubmit"> 
    <DataAnnotationsValidator /> 
    <div> 
        <SfDropDownList TValue="string" TItem="EmployeeData" Placeholder="Select an Employee" @bind-Value="@model.FirstName" DataSource="@Data"> 
            <DropDownListFieldSettings Value="FirstName" Text="FirstName" /> 
             <DropDownListEvents ValueChange="ComboBoxItemSelected" TValue="string" TItem="EmployeeData"></DropDownListEvents> 
        </SfDropDownList> 
        <ValidationMessage For="()=>model.FirstName" /> 
    </div> 
    <div class="sfButton"> 
        <SfButton type="submit" IsPrimary="true">Submit</SfButton> 
    </div> 
</EditForm> 
 
@code { 
    async void OnValidSubmit() 
    { 
        var SelectedValue = model.FirstName; 
         Console.WriteLine("form submit value: "+model.FirstName); 
        StateHasChanged(); 
    } 
    private EmployeeData model = new EmployeeData(); 
    public class EmployeeData 
    { 
        [Required(ErrorMessage = "The Employee field is required.")] 
        public string FirstName { get; set; } 
        public string Designation { get; set; } 
        public string Eimg { get; set; } 
    } 
    private List<EmployeeData> Data = new List<EmployeeData> 
    { 
        new EmployeeData() { FirstName = "Andrew Fuller",  Designation = "Team Lead", Eimg= "7" }, 
        new EmployeeData() { FirstName = "Anne Dodsworth", Designation = "Developer", Eimg= "1" }, 
        new EmployeeData() { FirstName = "Janet Leverling", Designation = "HR", Eimg= "3" }, 
        new EmployeeData() { FirstName = "Laura Callahan", Designation = "Product Manager", Eimg= "2" }, 
        new EmployeeData() { FirstName = "Margaret Peacock", Designation = "Developer", Eimg= "6" }, 
        new EmployeeData() { FirstName = "Michael Suyama", Designation = "Team Lead", Eimg= "9" }, 
        new EmployeeData() { FirstName = "Nancy Davolio", Designation = "Product Manager", Eimg= "4" }, 
        new EmployeeData() { FirstName = "Robert King", Designation = "Developer", Eimg= "8" }, 
        new EmployeeData() { FirstName = "Steven Buchanan", Designation = "CEO", Eimg= "10" } 
    }; 
 
    async Task ComboBoxItemSelected(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, EmployeeData> args) 
    { 
        Console.WriteLine("changed component value: " +args.Value); 
        //if (args != null) 
 
        //{ 
 
        // //Do Work... 
 
        //} 
    } 
} 
 
Regards, 
Sureshkumar P 


LU Luigi March 21, 2022 05:05 PM UTC

Thank,

now I try.

In my code I have :

<SfDataManager Url="/api/Paziente" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

Could this be a problem? 


SP Sureshkumar P Syncfusion Team March 22, 2022 11:27 AM UTC

Luigi, 
 
Based on your code, when render the custom component value using two-way binding (bind-value) attribute then no need to set the valuechange event. hence it is not working in your end.  
 
Please find the modified code example here: 
<SfDropDownList TValue="string"  
                TItem="Countries"  
                Placeholder="Select country"  
                DataSource="@Country" @bind-Value="SetBindValue" > 
    <DropDownListFieldSettings Value="Code" Text="Name"></DropDownListFieldSettings> 
    @*<DropDownListEvents TValue="string" TItem="Countries"  ValueChange="onValueChange"></DropDownListEvents>*@ 
</SfDropDownList> 
 
 
[index.razor] 
 
<CountryComponent SetBindValue="@CountryCode"></CountryComponent> 
 
 
 
Find the modified sample with the attachment. 
 
 
Regards, 
Sureshkumar P 


LU Luigi March 22, 2022 03:30 PM UTC

Thank for all.


SP Sureshkumar P Syncfusion Team March 23, 2022 05:07 AM UTC

Luigi, 
 
Thanks for your update. 
 
Regards, 
Sureshkumar P 


Loader.
Up arrow icon