在MVC4中限制列表框中的总选择

Question

I'm setting up a front end that uses MVC4. There's several Listboxfor boxes but I want to limit the number of each box up to a certain amount. For instance Listboxfor1 should have a max of 5 selectable items whereas Listboxfor2 should have a max of 7.

I've done several searches around the web and only found a server side fix using webforms and javascript. While that's all peaches and cream I can't seem to figure out how apply it to MVC.

Below is a snippet of what my listboxfor code looks like

@Html.ListBoxFor(model => model.Games,
   new SelectList(Model.Games.Where(m => m.action == action), "GameID", "Title"),
   new { id="listbox" + action, @class="lbGames"})

Answer 1

You cant fix this problem using just using Html helpers. You can make some workaround using javascript. This @Html.ListBoxFor will be converted into html and will look like:

   <select id="listbox" class="lbGames">
      <option value="Action1">Action1</option>
      <option value="Action2">Action2</option>
      ...
   </select>

so you can write something like this using jquery:

$("#listbox").change(function() {
  var mySelectedOptions = $.find('#listbox option:selected');
  if(if(mySelectedOptions).length > 5){
     // Your code here, if selected amount exceeds 5
     alert('hey bro you selected more than 5 elements!!!');
  }
});

Notice, i didn't tested this code. This is just a fast example, to help you to find right way.