Cześć, mam problem z moim widokiem, w którym po wciśnięciu przycisku wysyłam requesta GET. Strona odświeża się i nie dość, że nie dodaje mi się html, który zdefiniowałem w jquery to dodatkowo wybrane w dropdownach przez użytkownika wartości zostają utracone.

Chciałbym osiągnąć taki stan, że po kliknięciu przycisku ładuje mi się html (dane do tabeli), kiedy użytkownik zmieni jakiekolwiek wartości w dropdownach i ponownie kliknie przycisk - tabela ma się przeładować z nowymi danymi.

Html:

Kopiuj
@model Bukmacherka.ViewModels.ChooseTeamViewModel

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    <form asp-controller="Home" asp-action="Index" method="post" class="form-horizontal" role="form">
        <div class="form-group">
            <div class="row">
                <div asp-validation-summary="ModelOnly"></div>
                <div class="col-sm-4">
                    <label asp-for="CountryName" class="control-label"></label>
                    <select asp-for="CountryId" class="form-control"
                            asp-items="@(new SelectList(ViewBag.ListOfCountries, "Key", "Value"))"></select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div asp-validation-summary="ModelOnly"></div>
                <div class="col-sm-4">
                    <label class="control-label">Liga/Turniej</label>
                    <select class="form-control" id="LeagueId" name="LeagueId" asp-for="LeagueId"
                            asp-items="@(new SelectList(string.Empty, "Key", "Value"))"></select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div asp-validation-summary="ModelOnly"></div>
                <div class="col-sm-4">
                    <label class="control-label">Zespół</label>
                    <select class="form-control" id="TeamId" name="TeamId" asp-for="TeamId"
                            asp-items="@(new SelectList(string.Empty, "Key", "Value"))"></select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="row">
                <div class="col-sm-4">
                    <input class="btn btn-primary" id="Submit1" type="submit" value="Sprawdź" />
                </div>
            </div>
        </div>
    </form>
    <!--Table-->
    <table id="tableMatches" class="table table-striped table-hover">
        <!--Table head-->
        <thead>
            <tr>
                <th>Data</th>
                <th>Gospodarze</th>
                <th>Goście</th>
                <th>Wynik</th>
            </tr>
        </thead>
        <!--Table head-->
        <!--Table body-->
        <tbody id="bodyTable">
            @if (Model.TeamResult.MatchResults.Count > 0)
            {
                @foreach (var item in Model.TeamResult.MatchResults)
                {
                    <tr>
                        <td>@item.Date</td>
                        <td>@item.HomeTeam</td>
                        <td>@item.AwayTeam</td>
                        <td>@item.Score</td>
                    </tr>
                }
            }
            else
            {
                <tr><th>Brak danych</th></tr>
            }

        </tbody>
        <!--Table body-->
    </table>
    <!--Table-->

Javascript:

Kopiuj
<script type="text/javascript">
        $(document).ready(function () {
            var items = "<option value='0'>-- Wybierz ligę/turniej --</option>";
            $('#LeagueId').html(items);
            var items = "<option value='0'>-- Wybierz zespół --</option>";
            $('#TeamId').html(items);
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#CountryId').change(function () {
                var url = '@Url.Content("~/")' + "Home/GetTeams";
                var ddlsource = "#CountryId";
                $.getJSON(url, { CountryId: $(ddlsource).val() }, function (data) {
                    var items = '';
                    $("#TeamId").empty();
                    $.each(data, function (i, team) {
                        items += "<option value='" + team.value + "'>" + team.text + "</option>";
                    });
                    $('#TeamId').html(items);
                });
            });
            $('#CountryId').change(function () {
                var url = '@Url.Content("~/")' + "Home/GetCompetitions";
                var ddlsource = "#CountryId";
                $.getJSON(url, { CountryId: $(ddlsource).val() }, function (data) {
                    var items = '';
                    $("#LeagueId").empty();
                    $.each(data, function (i, team) {
                        items += "<option value='" + team.value + "'>" + team.text + "</option>";
                    });
                    $('#LeagueId').html(items);
                });
            });
        });
        $(document).ready(function () {
            var bodyTable = document.getElementById("bodyTable")
            var btn = document.getElementById("Submit1");
            btn.addEventListener("click", function () {
            var myRequest = new XMLHttpRequest();
            var url = '@Url.Content("~/")' + "Home/CheckTeam";
            var param = "competitionId=" + $('#LeagueId').val() + "&teamId=" + $('#TeamId').val();
            myRequest.open('GET', url +"?" + param, true);
            myRequest.onload = function () {
                var myData = JSON.parse(myRequest.responseText);
                renderHTML(myData);
            };
                myRequest.send();
            })
            function renderHTML(data) {
                var htmlString = "";

                for (var i = 0; i < data.length; i++) {
                    htmlString += "<tr><td>" + data[i].Date + "</td></tr>";
                }
                bodyTable.insertAdjacentHTML('beforeend', htmlString);
            }
        });

    </script>

Akcja kontrolera, którą wywołuję w żądaniu GET:

Kopiuj
        public async Task<JsonResult> CheckTeam(string competitionId, string teamId)
        {
            var teams = await _liveScoreAPI.CheckTeam(competitionId,teamId);

            return Json(teams);
        }