CODEWITHSUNDEEP
asp.net-mvc
Jurjen
Jurjen

Reputation: 794

MVC4 - render html.dropdownlist

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.

Upvotes: 1

Views: 7988

Answers (1)

Shyju
Shyju

Reputation: 218732

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.

Upvotes: 2

Related Questions