dropdown with preselect
bmaster001 opened this issue · comments
I'm playing around with FormFactory to build programatically created forms. I noticed that setting the preselect value for a dropdown box, doesn't work - the "selected" attribute somehow doesn't make it to the generated html output. It's easy to reproduce: on the examples, remove the radioattribute from the Operating System optionlist... like this:
new PropertyVm(typeof(string), "os")
{
DisplayName = "Operating System",
NotOptional = true,
Choices = new List<>() {"OSX", "IOS", "Windows", "Android"},
Value = "Windows" //Preselect windows
}
You'll notice that the selected attribute for the Windows option isn't generated.
What HTML is output for the <select> element?
The code that generates it is in here: https://github.com/mcintyre321/FormFactory/blob/master/FormFactory/Views/Shared/FormFactory/Property.System.String.cshtml#L33
<select name="os" class="form-control">
<option value="OSX">OSX</option>
<option value="IOS">IOS</option>
<option value="Windows">Windows</option>
<option value="Android">Android</option>
</select>
I know that the code is there, I tried debugging it, and I see that it adds selected="selected" to the option with value Windows, but in the generated html that I see in the browser, that attribute is gone.
Is it there in the "View Source"
Are you using Firefox https://stackoverflow.com/questions/4831848/firefox-ignores-option-selected-selected ?
I would check what the raw response is like using Fiddler/Charles, then you will know if the browser is transforming it at all.
You can override the template (by creating your own copy of the template in /views/shared/formfactory/Property.System.String ) and see if you can get it working, if you do please let me know.
The raw response shows the exact same thing: no option has the selected-attribute.
All this was with the AspNetCore Example project. Today I tried the same thing with the AspMvc example, and this one works like it should? I would think they should give the same results? Anyhow, I'm only just starting with .net core and mvc and c# (I previously only developped in vb.net), so this is pretty complicated for me :-)
No problem, thanks for finding the bug. It's probably something in the core .Attr extension implementation.
I suspect switching the code for <option value="@option.Item2" @Html.Raw((Model.Value?.ToString() == option.Item2) ? "selected" : "")>@option.Item1</option> might do the trick, I'll give it a go when I can .
I tried that line of code by modifying the existing Property.System.String.cshtml file, but that doesn't seem to change anything. To make sure I am changing the correct file, I added @Html.Raw((Model.Value?.ToString() == option.Item2) ? "<option value=\"test\">test</option>" : "") to the foreach-loop and then I see the test-option in the dropdown, so it's definately the correct code I was playing with. Anything else I can try?
Update...
I've been playing with this some more today, and found a solution!
In the file mentioned above (https://github.com/mcintyre321/FormFactory/blob/master/FormFactory/Views/Shared/FormFactory/Property.System.String.cshtml#L33), I changed the foreach-loop to the following:
@foreach (var option in choices) {
bool isSelected = Model.Value != null && option.Item2 == Model.Value.ToString();
<option selected="@isSelected" value="@option.Item2" >@option.Item1</option>
}
which renders the following html:
<select name="os" class="form-control" >
<option value="OSX">OSX</option>
<option value="IOS">IOS</option>
<option selected="selected" value="Windows">Windows</option>
<option value="Android">Android</option>
</select>
That's great! Does it work in both MVC5 and Core? If you send me a pull request I will merge it and push a new package.
I've tried it with the FormFactory.AspNetCore.Example and FormFactory.AspMvc.Example projects. No idea what all the other projects in the solution are...
And about the pull request: I've never done that before, so I don't really know how to do that :-)
Done!
Yup, looking good! thanks for the help...