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

Question

所以我有一个MVC的顶部的SQL数据库，我创建一个添加到数据库的形式。

我有4代表所关心的：

• 俱乐部（ID，姓名）
• 运动（ID，姓名）
• SportsInClub（ClubID，SportID）
• 事件（ID，姓名，CLUBID，SPORTID）//表格包含其他内容，但这是重要的。

所以事情是，一旦一个Club按名称选择我需要根据ClubID过滤Sports。所以如果我选择Club A，我只想要在A俱乐部出场的比赛。

有关如何完成此任何想法？

Answer 1

我告诉过你我的评论，你可以使用jQuery和它的级联下拉插件，但如果你仍然想使用香草JS，你可以做这样的事情：

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); 
    } 
}