通過連接數據庫表過濾的MVC級聯下拉列表

Question

因此，我在SQL數據庫之上有一個MVC，並且正在創建一個添加到數據庫的表單。

我有四個與此有關的表：

• 俱樂部（ID，NAME）
• 體育（ID，NAME）
• SportsInClub（ClubID，SportID）
• 事件（ID，NAME，CLUBID，SPORTID）//表中包含其他內容，但這很重要。

因此，一旦按名稱選擇了Club ，我就需要根據ClubID過濾“ Sports ”。 因此，如果我選擇Club AI，則只希望顯示在Club 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);
  }
}