1

I would like to render a html.dropdownlist so the user can just 'tap' an item, in the default rendering the user will have to tap on the dropdownlist then the list will appear and then the suer can select an item.

I'd like to show this like a ul\li list, but don't know how, I'm sure I can do some css stuff but how about getting the selected SelectListItem-Value back into the datasource... ? I'm pretty sure there's already something out there. Can anyone point me in the right direction ?

Best regards, Jurjen.

1
  • What you want is radio buttons. Commented Oct 30, 2012 at 12:13

1 Answer 1

2

Let's create some viewmodels for your screen. Assuming we are doing a store locator view where user has to select a state from dropdown and then we will show stores belongs to that states in radio buttons.

public class LocateStore
{
  public List<SelectListItem> States { set;get;}
  public int SelectedState { set;get;}
  public LocateStore()
  {
     States=new List<SelectListItem>();
  }
}
public class StoreLocation
{
  public List<Store> Stores{ set;get;}
  public int SelectedStore { set;get;}
  public StoreLocation()
  {
     Stores=new List<Store>();
  } 
}
public class Store
{
  public int ID { set;get;}
  public string Name { set;get;}
}

Now in your GET action, create an object of your LocateStore class and set the State collection property values and send it to the view.

public ActionResult Locate()
{
  var vm=new LocateStore();
  //The below code is hardcoded for demo. you mat replace with DB data.
  vm.States= new List<SelectListItem>
  {
    new SelectListItem { Value = 1, Text = "MI" },
    new SelectListItem { Value = 2, Text = "CA" },
    new SelectListItem { Value = 3, Text = "OH" }
  };  
  return View(vm);
}

Now create your Locate view which is strongly typed to LocateStore class. We will have some javascript code to listen to the change event of the dropdown and make an ajax call to get the radio button list view.

@model LocateStore
@Html.DropDownListFor(x=>x.SelectedState, 
                    new SelectList(Model.States,"Value","Text"),"Please select")
<div id="stores">

</div>
<script type="text/javascript">
   $(function(){
     $("#SelectedState").change(function(){
        $("#stores").load("@Url.Action("GetStores","Store")/"+$(this).val());
     });
   });
</script>

Now we need a GetStores action method which accepts the selected state id and return a partial view which has the Store name in a Radio button list format.

public ActionResult GetStores(int id)
{
     var vm=new StoreLocation();
      //The below code is hardcoded for demo. you mat replace with DB data.
      vm.Stores= new List<Store>
      {
        new Store{ ID= 1, Name= "Costco" },
        new Store{ ID= 2, Name= "RiteAid" },
        new Store{ ID= 3, Name= "Target" }
      };  
      return PartialView(vm);
}

and now we need a view for this method which is GetStores.cshtml which is strongly typed to StoreLocation class

@model StoreLocation
@foreach(var item in Model.Stores)
{
  @Html.RadioButtonFor(b=>b.SelectedStore,item.ID)  @item.Name
}

Now when you run the app, when the user select an item from dropdown, it will bring the partial view which has the radio buttons.

Here is a working sample using the above code for your reference.

Sign up to request clarification or add additional context in comments.

2 Comments

Shyju, thanks for your response. However your example code isn't working when I use it in a new mvc4 project. If I use the part where you rendere various radiobuttons for the same field in the model it gets rendered in a way that I can't select items.
@Jurjen: There was some syntax errors. I fixed those and uploaded even a sample working project for your reference. Let me know it helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.