通过连接数据库表过滤的MVC级联下拉列表

Question

So I have a MVC on top of a SQL database and I'm creating a add to database form.

I have 4 tables that concern this:

• Club (ID, NAME)
• Sport (ID, NAME)
• SportsInClub (ClubID, SportID)
• Event (ID, NAME, CLUBID, SPORTID) // the tables contains other thing but this is what matters.

So the thing is once a Club is selected by name I need to filter the Sports based on the ClubID . So If I select Club AI only want sports played at club A to show up.

Any ideas on how to accomplish this?

Answer 1

As I've told you in my comment you could use JQuery and its cascading dropdown plugin but if you still want to use vanilla JS you could do something like that:

HTML:

<select id="club" name="ClubId">
  <option selected="selected" value="?">Select a club</option>
  <option value="1">Club 1</option><!-- value is the ClubId -->
  <option value="2">Club 2</option>
  <option value="3">Club 3</option>
</select>
<select id="sport" name="SportId">
  <option value="?">Select a club first</option>
</select>

JS:

var clubSelect = document.getElementById("club");
var sportSelect = document.getElementById("sport");

var resetSportsOptions = function () {
    sportSelect.options.length = 1;
    if (clubSelect.value == "?") {
        sportSelect.options[0].text = "Select a club first ";
    } else {
        sportSelect.options[0].text = "Select a sport ";
    }
}

var addSportOption = function (sport) {
    var option = document.createElement("option");
    option.text = sport.Name;
    option.setAttribute("value", sport.SportId);
    sportSelect.add(option);
}

var sendAjaxRequest = function () {
    var r = new XMLHttpRequest();
    r.open("POST", "/Sports/InClub", true);
    r.onreadystatechange = function () {
        if (r.readyState != 4 || r.status != 200) 
            return;
        var sports = JSON.parse(r.responseText);
        for (var i = 0; i < sports.length; ++i) {
            addSportOption(sports[i]);
        }
    };
    r.send("clubId=" + sportSelect.value);
}

clubSelect.addEventListener("change", function () {
    resetSportsOptions();
    if (clubSelect.value != "?") {
      sendAjaxRequest();
    }
});

ASP.NET MVC:

public class SportsController : Controller{
  // Your usual code
  public ActionResult InClub(int clubId){
    var sports = from s in db.Sport
                 join sic in db.SportInClub on s.SportId = sic.SportId
                 where sic.ClubId == ClubId 
                 select s
    return Json(sports);
  }
}