ASP.NET Form Display Form Fields based off section in another field

Question

I'm new to ASP.Net development, MVC 5, and pretty much anything Windows, so I'm sure I'm doing something wrong. I searched around for an answer here and found similar questions but I'm clearly doing something wrong...probably due the answers presuming more knowledge of the environment I'm working in...

What happens is the selected box starts off as "Yes" which I would prefer to be "No", and the fields are displayed no matter.

I suspect I have the javascript in the wrong location and/or am missing something important.

I have a bit of code:

<p>
Are you a Licensee?
@Html.DropDownListFor(x => x.Licensee, new[] {
        new SelectListItem() {Text="Yes", Value = bool.TrueString},
        new SelectListItem() {Text="No", Value = bool.TrueString} }, new {id = "Licensee"})

@section scripts{ <script type="text/javascript">
    $(function ()
    {
        $('#Licensee').change(function ()
        {
            var value = $(this).val();

            if (value == true)
            {
                $('#LicName').show();
                $('#LicUrl').show();
                $('#LicRole').show();
            }
            else
            {
                $('#LicName').hide();
                $('#LicUrl').hide();
                $('#LicRole').hide();
            }
        });
    });
    </script> }

    <p>Your Licensee Name: @Html.TextBoxFor(x => x.LicenseeName, new { id = "LicName" })</p>
    <p>Your Licensee Url: @Html.TextBoxFor(x => x.LicenseURL, new { id = "LicUrl" })</p>
    <p>your LIcensee Role: @Html.TextBoxFor(x => x.LicenseRole, new { id = "LicRole" })</p>
</p>

I probably should add, my expectation of this would be the form would be rendered, and when a user changes the selection in the drop down, the other fields would appear or disappear...so I could be barking up the wrong tree entirely... — Bob, Jul 04 '15 at 12:58
And `if (value == true)` will always be true anyway - it would have to be `if (value == "true")` — , Jul 04 '15 at 13:00
@StephenMuecke Doh! I changed the "No" to be a Falsestring...I considered the checkbox, would that make this easier? — Bob, Jul 04 '15 at 13:01
`@Html.CheckBoxFor(m => m.Licensee)` - then `$('#Licensee').change(function() { if ($(this).is(':checked)) { ...} else { ...} });` but wrap all 3 textboxes in a `
` with an `id` and show/hide the div — , Jul 04 '15 at 13:05
Then of course you will probably need a [foolproof] `[RequiredIfTrue]` or similar validation attribute on your `LicenseeName`, `LicenseURL` and `LicenseRole` properties so you can get client and server side validation — , Jul 04 '15 at 13:14

score 0 · Answer 1 · answered Jul 04 '15 at 12:57

Change

@Html.DropDownListFor(x => x.Licensee, new[] {
        new SelectListItem() {Text="Yes", Value = bool.TrueString},
        new SelectListItem() {Text="No", Value = bool.TrueString} }, new {id = "Licensee"})

To

@Html.DropDownListFor(x => x.Licensee, new[] {
        new SelectListItem() {Text="No", Value = bool.TrueString} }, new {id = "Licensee"}),
        new SelectListItem() {Text="Yes", Value = bool.TrueString}

That will help with displaying the value No first.

Also the reason why they always show in the JavaScript is because you are passing in bool.TrueString for each value (Yes and No). You will need to use bool.FalseString for the option "No".

For example:

new SelectListItem() {Text="No", Value = bool.FalseString} }, new {id = "Licensee"}),

I modified it to: @Html.DropDownListFor( x => x.Licensee, new[] { new SelectListItem() {Text="No", Value = bool.FalseString}, new SelectListItem() {Text="Yes", Value = bool.TrueString} }, new {id = "Licensee"} )` — Bob, Jul 04 '15 at 13:13

score 0 · Accepted Answer · edited May 23 '17 at 12:21

Okay, I figured it out using checkboxes from the hints here, and this page in particular Show/hide div if checkbox selected

I put this in the header section of the view page:

function showMe(box, name) {

    var chboxs = document.getElementsByName(name);
    var vis = "none";
    for (var i = 0; i < chboxs.length; i++) {
        if (chboxs[i].checked) {
            vis = "block";
            break;
        }
    }
    document.getElementById(box).style.display = vis;
}

This is the code piece:

<p>
    Are you a Licensee?

    @Html.CheckBoxFor(x => x.Licensee, new { onclick="showMe('LicenseeYes', 'Licensee')" } )

    <div id="LicenseeYes", style="display:none">
        <p>Your Licensee Name: @Html.TextBoxFor(x => x.LicenseeName)</p>
        <p>Your Licensee Url: @Html.TextBoxFor(x => x.LicenseURL)</p>
        <p>your LIcensee Role: @Html.TextBoxFor(x => x.LicenseRole)</p>
    </div>
</p>

Thank you all for your help, it sent me down the right path, and it gave me the right starting points to the right searches.

I also changed the function to be because the loop wasn't necessary. The other would work if you had multiple check boxes that you wanted to cause the div section to display:

function showMe(box, name) {        
    var chkbox = document.getElementById(name);
    var vis = "none";
    if (chkbox.checked) {
        vis = "block"
    }
    document.getElementById(box).style.display = vis;
}

ASP.NET Form Display Form Fields based off section in another field

2 Answers2