Why is my data getting passed into the partial, but it is not displaying?

Viewed 43

I'm trying to use the selected RosterId from a dropdown in my view to pass through my Ajax call. This will get the correct players inside that specific roster to be viewed. However, the if (Model.AllPlayers != null) makes my players not able to be shown even though when I add a breakpoint to that if statement, the data is getting passed through correctly.

Here's my controller

[HttpGet]
        public IActionResult _Roster(int RosterId)
        {
            List<PlayerViewModel> AllPlayers = new List<PlayerViewModel>();
            var allPlayers = (from Player in _db.Players
                join RosterPlayers in _db.RosterPlayers on Player.Id equals RosterPlayers.PlayerId
                join Roster in _db.Rosters on RosterPlayers.RosterId equals Roster.RosterId
                where Roster.RosterId == RosterId
                select new
                {
                    Player.Id,
                    Player.FirstName,
                    Player.LastName,
                    RosterPlayers.Number,
                    RosterPlayers.Position,
                    RosterPlayers.Height,
                    RosterPlayers.Weight,
                    RosterPlayers.Class,
                    Roster.RosterId,
                    Roster.Year
                }).ToList();
            foreach (var player in allPlayers)
            {
                PlayerViewModel pvm = new PlayerViewModel();
                pvm.PlayerId = player.Id;
                pvm.FirstName = player.FirstName;
                pvm.LastName = player.LastName;
                pvm.Number = player.Number;
                pvm.Position = player.Position;
                pvm.Height = player.Height;
                pvm.Weight = player.Weight;
                pvm.Class = player.Class;
                pvm.RosterId = player.RosterId;
                AllPlayers.Add(pvm);
            }

            RosterViewModel rvm = new RosterViewModel();
            rvm.AllPlayers = AllPlayers;

            return PartialView(rvm);
        }

Here's my Ajax. When I pass the data through the console here, it shows the correct data being passed through. I can see all the correct HTML in the console, but for some reason the players aren't showing up on the page.

$.ajax({
   type: "GET",
   url: '@Url.Action("_Roster")',
   data: { RosterId: RosterId },
   success: function(data) {
        $("#RosterByYear").html(data);
        console.log(data);
        console.log($("#RosterByYear").text());
   }, error: function () {
        alert("Something went wrong in the controller");
   }
});

Here's what I'm using to call it in my View

<partial name="_Roster" />

Here's the code inside my partial view

@model Centerville_Football.ViewModels.RosterViewModel


<div class="table">
    <div class="thead">
        <p>#</p>
        <p>Last Name</p>
        <p>First Name</p>
        <p>Position</p>
        <p>Class</p>
        <p>Height</p>
        <p>Weight</p>
    </div>
    @if (Model.AllPlayers != null)
    {
        <div class="tbody" id="RosterByYear">
            @foreach (var player in Model.AllPlayers)
            {
            <div class="row">
                <p class="number">@player.Number</p>
                <p class="name">@player.LastName</p>
                <p class="name">@player.FirstName</p>
                <p class="position">@player.Position</p>
                <p class="class">@player.Class</p>
                <p class="height">@player.Height</p>
                <p class="weight">@player.Weight</p>
            </div>
            }
        </div>
    }
</div>
1 Answers
Related