CODEWITHSUNDEEP
htmlselect
mohandes
mohandes

Reputation: 137

How can I set the default value for a html <select> when the default value comes from database (it`s a page to edit an object) in blazor?

Here I want to get a project from database to edit or change its properties for ex. destination country. when the project is loaded the select element should be already selected same as the project.DestinationCountry. Then I may change this property if needed.

<select type="text" class="form-control" id="Destination" value="@project.DestinationCountry">
       <option value="Canada">Canada</option>
       <option value="Sweden">Sweden</option>
       <option value="Switzerland">Switzerland</option>
</select>

I tried to use value="@project.DestinationCountry" within select element but it did not work.

Here is c# code

private ProjectModel project;
protected override void OnInitialized()
    {
        project = _db.GetProject<ProjectModel>(id);
    }

Upvotes: 1

Views: 1574

Answers (2)

mohandes
mohandes

Reputation: 137

I did like this and it worked but I want to know if there is smarter solution for that.

<select type="text" class="form-control" id="Destination">
  <option value="">Select a country</option>
  @foreach (var country in Countries)
  {
     if (project.DestinationCountry != null)
     {
        <option value="@country" selected=@(project.DestinationCountry.ToLower() == 
        country.ToString().ToLower())>@country</option>
     }
     else
     {
        <option value="@country">@country</option>
     }
}
</select>

Upvotes: 0

ghoshriju33
ghoshriju33

Reputation: 87

This won't work since you can't add a value to the select element.

<select type="text" class="form-control" id="Destination" value="@project.DestinationCountry">
       <option value="Canada">Canada</option>
       <option value="Sweden">Sweden</option>
       <option value="Switzerland">Switzerland</option>
</select>

However, to make an option selected by default you need to use the selected attribute on option. To make sure the select element shows the fetched value from database, the best bet would be to use conditionals. If project.DestinationCountry matches the value add the selected attribute.

<select type="text" class="form-control" id="Destination">
   <option value="Canada" selected>Canada</option>
   <option value="Sweden">Sweden</option>
   <option value="Switzerland">Switzerland</option>
</select>

You can achieve this using conditional attributes

<select type="text" class="form-control" id="Destination">
    <option value="Canada" selected="@(project.DestinationCountry == "Canada")">Canada</option>
    <option value="Sweden" selected="@(project.DestinationCountry == "Sweden")">Sweden</option>
    <option value="Switzerland" selected="@(project.DestinationCountry == "Switzerland")">Switzerland</option>
</select>

This checks whether the condition matches. If true then the value assigned is same as the attribute name thus resulting in selected="selected". When the value is false the attribute won't render at all. Or better use a for loop to output the options and for each entry you can check whether it's the current value and then add selected attribute to it to it.

Upvotes: 1

Related Questions