CODEWITHSUNDEEP
asp.net-mvc
ssspfx
ssspfx

Reputation: 103

Static DropdownList get selected in view

I need to change the TextBox based on the dropdown selection. How to do this? As in the view if user selects Fulll Name and enters username it should bing to the fullname which is then passed to the controller. Currently I am displaying both the textboxes.

view

@model IEnumerable<AdminUpdate.Models.Employee>
@{
ViewBag.Title = "Web API";
}

<h2>Search for the User by Organization(Account) or Full Name(Contact)</h2>
<br />
<br />
<fieldset>

@using (Html.BeginForm("index","Home"))
{
    @Html.ValidationSummary(true)
    <div id="divUpdateDetails"></div>

        <text>Do you want to search by </text>
           @Html.DropDownList("FooBarDropDown", new List<SelectListItem>
                {
                    new SelectListItem{ Text="Full Name", Value = "1" },
                    new SelectListItem{ Text="Organization", Value = "2" },

                }) 

            @Html.TextBox("FullName")
            @Html.TextBox("Organization")

    <input type="submit" id="submitId" value="Search" />

}

`

View

Upvotes: 0

Views: 88

Answers (3)

ssspfx
ssspfx

Reputation: 103

Thanks for the answers. Both the answers helped me to use jQuery which I was not thinking about. I was thinking of using c#. Below code worked.

 <script>
    $(document).ready(function () {

        $("#DropDown").change(function () {
            if ($("#DropDown option:selected").val() == 1) {
                $("#FullName").show();
                $("#Organization").hide();
            } else {
                $("#FullName").hide();
                $("#Organization").show();
            }
        });

    });


</script>

Upvotes: 0

WarHorse
WarHorse

Reputation: 31

You could use jQuery. I've edited my answer with script that I have working in an actual project. It would be a good idea to hide the option that is not the default on document load, as Sumit raj has in his post.

<script>
    $('#FooBarDropDown').change(function () {
        var selection = $(this).children(':selected').text();
        if (selection == 'Full Name') {
            $("#FullName").show();
            $("#Organization").hide();
        }
        else {
            $("#FullName").hide();
            $("#Organization").show();
        }
   });
</script>

Upvotes: 0

Sumit raj
Sumit raj

Reputation: 831

include

<script>

$(document).ready(function () {
   $("#Organization").hide();

}

$("#FooBarDropDown").change(function () {

        var selectVal = $("#FooBarDropDown").find(":selected").val();
        if(selectVal==1){
           $("#FullName").show();
           $("#Organization").hide();
        }
        else{
           $("#Organization").show();
           $("#FullName").hide();
        }

    });
</script>

Upvotes: 1

Related Questions