I have 2 dropdownlists: Teams and Players. When I choose a Team, players for these Team are displayed in dropdownlist "Players". I do it thanks to JavaScript (who get Team Id in the dropdownlist) and partial view for the second dropdownlist. It work very well.
Next, I want to dynamically add a new line of this cascading dropdownlist. Currently, I'm able to do it but my problem is that in the second line, the dropdownlist "Players" (DL 4) get value of the first dropdownlist "Team" (DL1) and not from the dropdownlist of his line (DL3). And it's the same if I add another lines : in dropdownlist "Team" I've all teams but in the dropdownlist "Players" I've values from the selected Id in the first dropdownlist "Team".
======================================================
EDITION :
2 images added to clarify my problem => Database and Workflow
As you can see in the image "Workflow", the list of players displayed in panel 9 for the new line is wrong. The list of players refers to the first team selected and not (as it should be) to the second selected Team.
======================================================
My Code:
In View:
<form method="post">
<a style="margin: 10px 0;" href="javascript:addRow();">Add Row</a>
<table id="formTable">
<thead>
<tr>
<th>Team</th>
<th>Player</th>
</tr>
</thead>
<tbody>
<tr>
<td>
@if (ViewBag.TeamList != null)
{
@Html.DropDownListFor(m => m.TeamId, ViewBag.TeamList as SelectList, "-- Select Team--", new { @class = "form-control" })
}
</td>
<td>
@Html.DropDownListFor(m => m.PlayerId, new SelectList(""), "--Select Player--", new { @class = "form-control" })
</td>
</tr>
</tbody>
</table>
</form>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Styles.Render("~/Content/css")
@Styles.Render("~/Script/js")
<!-- Cascading dropdownlist-->
<script>
$(document).ready(function () {
$("#TeamId").change(function () {
var teamId = $(this).val();
debugger
$.ajax({
type: "Post",
url: "/OCs/GetPlayerList?TeamId=" + teamId,
contentType:"html",
success: function (response) {
debugger
$("#PlayerId").empty();
$("#PlayerId").append(response);
}
})
})
})
</script>
<!-- Add new row-->
<script type="text/javascript">// <![CDATA[
function addRow() {
//copy the table row and clear the value of the input, then append the row to the end of the table
$("#formTable tbody tr:first").clone().find("select").each(function () {
$(this).val('');
}).end().appendTo("#formTable");
}
// ]]></script>
In Partial View:
<option value="">--Select Player--</option>
@if (ViewBag.PlayerOptions != null)
{
foreach (var item in ViewBag.PlayerOptions) {
<option value="@item.Value">@item.Text </option>
}
}
In Controller:
public ActionResult Create()
{
ViewBag.TeamList = new SelectList(GetTeamList(), "IdTeam", "NameTeam");
....
return View(stuModel);
}
public List<Team> GetTeamList()
{
MyDbEntities db = new MyDbEntities();
List<Team> teamList = db.Teams.ToList();
return teamList
}
public ActionResult GetPlayerList(int TeamId)
{
MyDbEntities db = new MyDbEntities();
List<Playert> playerList = db.Players.Where(x => x.IdRefTeam == TeamId).ToList();
ViewBag.PlayerOptions = new SelectListplayerList "IdPlayer", "PlayerNom");
return PartialView("PlayerOptionsPartial");
}
I think there is a problem with Team's Id which is not unique... It's always TeamId (coming from "@Html.DropDownListFor(m => m.TeamId, ..."
Does somebody have a solution to my problem? How to add dynamically cascading dropdownlist (with 2 or 3 levels)?
