CODEWITHSUNDEEP
c#jqueryasp.net-mvcdrop-down-menu
Charles Okwuagwu
Charles Okwuagwu

Reputation: 10896

Use simple MVC Html.DropDownList to control visibility of a div, onLoad and on selectChange

I have the following code:

<div class="form-group">
    <label class="col-xs-3 control-label">Intermediary Bank Required?:</label>
    <div class="col-xs-9">
        <p class="form-control-static">@Html.DropDownList("IntermediaryRequired",(SelectList)ViewBag.IntermediaryRequired,"NO", new { @class = "form-control" })</p>
    </div>
</div>

IntermediaryRequired is a bool field on my model

I also have this Extension Helper:

public static class BooleanExtensions
{
    public static string ToYesNoString(this bool value)
    {
        return value ? "YES" : "NO";
    }
    public static string ToDislay(this bool value)
    {
        return value ? "normal" : "none";
    }
    public static string ToChar(this bool value)
    {
        return value ? "1" : "0";
    }
}

My aim is to hide/display a <div> in response to the selected value in the DropDownList for two cases:

  1. when the user Manually changes the DropDownList selection
  2. when the form loads with an existing value for the model field IntermediaryRequired

Please how can we achieve this.

Upvotes: 0

Views: 1623

Answers (2)

Shyju
Shyju

Reputation: 218962

You should be able to do this with a little bit of javascript. Listen to the change event of the dropdown, check the value and hide/show the div. do the samething on document.ready (page loaded) as well to work with existing value of the model.

<script type="text/javascript">
$(function(){

  //On page load, update the visiblity
  var v=$("#IntermediaryRequired").val();
  UpdateDivVisibility(v);

  //When user changes the dropdown, update visibility
  $("#IntermediaryRequired").change(function(e){
    var v=$("#IntermediaryRequired").val();
    UpdateDivVisibility(v);
  });

});

function UpdateDivVisibility(isVisible)
{
    if(v=="YES") 
    {
      $("#DivIdtoHide").show();
    }
    else
    {
       $("#DivIdtoHide").hide();
    }
}
</script>

EDIT : As per the question in the comment

Usually I create a viewmodel like this

public class CreateCustomerVM
{
  public string Name { set;get;}
  public List<SelectListItem> IntermediaryOptions {set;get;}
  public string IntermediaryRequired {set;get;}

  public CreateCustomerVM()
  {
    this.IntermediaryOptions =new List<SelectListItem>() 
  }
}

and in your GET actions for create

public ActionResult create()
{
  var vm = new CreateCustomerVM();
  vm.IntermediaryOptions = GetOptions();
  return View(vm);
}
private List<SelectListItem> GetOptions()
{
    return new List<SelectListItem>
    {
        new SelectListItem {Value = "0", Text = "No"},
        new SelectListItem {Value = "1", Text = "Yes"}
    };
}

And your view will be bounded to the viewmodel

@model CreateCustomerVM
@using(Html.Beginform())
{
  <div>
   <p>Required?</p>
   <p>@Html.DropdowListFor(s=>s.IntermediaryRequired,Model.IntermediaryOptions)
   <div id="ExtraOptions">
      <!-- Your additional UI elements here -->
   </div>
   <input type="submit" />
  </div>
}

In your Form post, you can read the IntermediaryRequired value and convert that to boolean value

[HttpPost]
public ActionResult Create(CreateCustomerVM model)
{
  //check model.IntermediaryRequired  
 // to do : Save and Redirect(PRG pattern)
}

Upvotes: 1

Ahmed
Ahmed

Reputation: 525

You can do something like this to show/hide the div when the user Manually changes the Drop Down

var yourDiv = $('#yourDiv');
$('#IntermediaryRequired').on('change', function(){
    if ($(this).val() == 'YES') {
        yourDiv.show();
    }
    else {
        yourDiv.hide();
    }
});

And to get the same result on page load you can try

@if (Model.value)
{
    <div id="yourDiv">
       ....
    </div>
}

As a side note use p only when you want to add a paragraph, if you just want to add -meaningless- block element, you can use a div. You can read more about semantics here.

Upvotes: 1

Related Questions