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