locked
asp.net MVC RRS feed

All replies

  • User475983607 posted

    This logic to display different select lists can exist in C# or JavaScript.  It depends on how your application is designed.  Is there any way you can share the code you've tried?  Explain what you expect and what actually happens?  

    Below is a basic JavaScript/jQuery example.

    @model MvcDemo.Controllers.GenderViewModel
    
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <h4>EmailVm</h4>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <form asp-action="Index">
                Male @Html.RadioButtonFor(model => model.Gender, "Male")
                Female @Html.RadioButtonFor(model => model.Gender,"Female")
                <div>
                    <select name="FemaleId" style="display:block" class="gender-select">
                        <option value="1">Female Option 1</option>
                        <option value="2">Female Option 2</option>
                        <option value="3">Female Option 3</option>
                    </select>
                    <select name="MaleId" style="display:none" class="gender-select">
                        <option value="1">Male Option 1</option>
                        <option value="2">Male Option 2</option>
                        <option value="3">Male Option 3</option>
                    </select>
                </div>
                <div class="form-group">
                    <input type="submit" value="Create" class="btn btn-primary" />
                </div>
            </form>
        </div>
    </div>
    
    <div>
        <a asp-action="Index">Back to List</a>
    </div>
    
    @section Scripts {
       <script>
           $('[name="Gender"]').change(function () {
               $('.gender-select').hide();
               $('[name="' + $(this).val() + 'Id"]').show();
           });
       </script>
    }
    

    Thursday, April 15, 2021 11:50 AM
  • User591932912 posted

    I got it and I have tried with the below code check if you need . Thanks

    <div class="form-group">
    <label class="control-label col-md-2">Relation</label>
    &emsp;
    <div id="femalelist">
    <select name=”color” style="width:150px;height:25px">
    <option value=”red” style="font-size:16px">wife</option>
    <option value=”purple” style="font-size:16px">Daughter </option>
    <option value=”red” style="font-size:16px">Sister</option>
    <option value=”purple” style="font-size:16px">Anut </option>
    <option value=”red” style="font-size:16px">Daugther In Law</option>
    <option value=”purple” style="font-size:16px">Grand Mother </option>
    <option value=”purple” style="font-size:16px">Mother </option>
    </select>
    </div>
    <div id="malelist">
    &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;
    <select name=”color” style="width:150px;height:25px">
    <option value=”red” style="font-size:16px">Husband</option>
    <option value=”purple” style="font-size:16px">son </option>
    <option value=”red” style="font-size:16px">brother</option>
    <option value=”purple” style="font-size:16px">Uncle </option>
    <option value=”red” style="font-size:16px">Son In Law</option>
    <option value=”purple” style="font-size:16px">Grand Father </option>
    <option value=”purple” style="font-size:16px">Father </option>
    </select>
    </div>
    </div>
    <div id="Gender">
    <label class="control-label col-md-2">Gender</label>

    @Html.RadioButtonFor(model => model.Gender, true, new
    {
    id =
    "TrueValueID",
    @onclick = "buttonValue(this)"
    }) Male
    @Html.RadioButtonFor(model => model.Gender, false, new
    {
    id =
    "FalseValueID",
    @onclick = "buttonValue(this)"
    }) Female
    <script type="text/javascript">

    function buttonValue(e) {

    if (e.value === 'True') {
    var div = document.getElementById('femalelist');
    div.style.visibility = 'hidden';
    var div = document.getElementById('malelist');
    div.style.visibility = 'visible';
    }
    else {
    var div = document.getElementById('femalelist');
    div.style.visibility = 'visible';
    var div = document.getElementById('malelist');
    div.style.visibility = 'hidden';
    }

    }
    </script>
    </div>
    Thursday, April 15, 2021 3:23 PM