how to conditionally display controls in razor view?

Question

I need to hide/show some controls in cshtml based on what is selected in a dropdown list. I want to be able hide/show these sections before the value of the dropdown list is sent back to model and saved. How do I do this? I looked at these questions but had no luck question1 question2

@model Models.EmployerModel
@{ ViewBag.Title = "Index"; }
<div>
<p class="validateTips">
    Enter the new employment details.</p>
<fieldset>
    <table>
        <tr>
            <td>
                <label>
                    <b>Employment Type:</b></label>
            </td>
            <td>
                @Html.DropDownList("EmploymentTypeDrp")
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <b>Job Title:</b></label>
            </td>
            <td>
                @Html.TextBoxFor(m => m.JobTitle, new { Value = @Model.JobTitle })
            </td>
        </tr>
    </table>
</fieldset>
</div>

So what I need is that based on what is selected in EmploymentTypeDrp, Job Title be visible or not. I have a JQuery bit to update the model based on new information.

You need javascrpt/jquery to respond to client side events (handle the .change() event of the dropdownlist and show/hide the elements). But showing/hiding them does not change what is posted back to the controller so not sure what your trying to achieve. — user3559349
– user3559349, Commented Feb 11, 2016 at 4:34
Side note: remove new { Value = @Model.JobTitle } - the value is already set by the TextBoxFor() method and you should never try and override the value attribute — user3559349
– user3559349, Commented Feb 11, 2016 at 4:53

shu · Accepted Answer · 2016-02-11 05:33:03Z

Can you please try this

Your view

@model Models.EmployerModel
@{ ViewBag.Title = "Index"; }
<div>
<p class="validateTips">
    Enter the new employment details.</p>
<fieldset>
    <table>
        <tr>
            <td>
                <label>
                    <b>Employment Type:</b></label>
            </td>
            <td>
                     @Html.DropDownList("EmploymentTypeDrp", new List<SelectListItem>

             {
                new SelectListItem{ Text="Admin", Value = "1" },
                new SelectListItem{ Text="HR", Value = "0" }
             }) // I just hard coded the departments here                
          </td>
        </tr>
        <tr>
            <td>
                <label>
                    <b>Job Title:</b></label>
            </td>
            <td>
                @Html.TextBoxFor(m => m.JobTitle, new { Value = @Model.JobTitle })
            </td>
        </tr>
    </table>
</fieldset>
</div>

In the script section of your view you can use .change() event as suggested by @Stephen Muecke

<script>
$(document).ready(function () {
  $('#EmploymentTypeDrp').on('change', function (e) {

        var selectValue = this.value;
        if (selectValue == "Admin") {
            $("#JobTitle").show();
        }
        else {
            $("#JobTitle").hide();
        }

    });
});
</script>

Collectives™ on Stack Overflow

how to conditionally display controls in razor view?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related