Как передать значение кнопки из частичного в родительский вид с помощью JQuery?

Question

Я создал частичное и родительское представление, где я хочу передать raceid значение из частичного в родительское представление. Я пробовал этот код, но он не попадает в код Jquery. Также я хочу нажать на контроллер после этого кода var raceName = '@Url.Action("RacesName", "Races")?id=' + race;.

Пожалуйста, ведите меня, если я делаю что-то не так. Спасибо.

Родительский вид

 <div class="panel panel-default">

        <div class="panel-body">

                @Html.DropDownListFor(m => m.Country, new List<SelectListItem>
                  {

                    new SelectListItem {Value = "PER", Text = "Peru" },
                    new SelectListItem {Value = "SAF", Text="South Africa" },

                  },
                    new { @id = "CountryList", @class = "form-control" })

            <div id="mypartial"> </div>

        </div>
    </div>

Скрипт для выполнения частичного

     $(document).ready(function () {
           var route = '@Url.Action("PartialView", "Stakes")';
              route = encodeURI(route);
               $('#mypartial').load(route);
        });

Контроллер для загрузки Partial

  public ActionResult PartialView(string countrylist, ClsStakesRaces clsStakesRaces)
        {
            if(countrylist==null)
            {
                clsStakesRaces.Country = "PER";
            }
            else
            {
                clsStakesRaces.Country = countrylist;
            }

            StakesRacesDetails stakesRacesDetails = new StakesRacesDetails();
           return PartialView("~/Views/Stakes/_PartialStakes.cshtml", stakesRacesDetails.StacksRacesList(clsStakesRaces.Country));

        }

Это скрипт, который я хочу выполнить, когда нажимаю linkClass

    <script>
        $(document).ready(function () {
            $('#myform').on('click', '.linkClass', function () {
                debugger;
                var race = $(this).data("raceid");
                var raceName = '@Url.Action("RacesName", "Races")?id=' + race;
                 $(this).load(raceName);
            });
        });
    </script>

Частичный вид

<table class="table table-hover" id="myform">
        <tr>
            <th>@Html.DisplayNameFor(m => m.Date)</th>
            <th>@Html.DisplayNameFor(m => m.Race)</th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Date)

                </td>
                <td>
                    <button class="linkClass" type="button" data-raceid="@item.RaceId">@Html.DisplayFor(modelItem => item.Race)</button>

                </td>

            </tr>
        }
    </table>

Answer 1

Вы загружаете элемент <table id="myform"> после загрузки начального представления, поэтому вам необходимо использовать делегирование событий с помощью функции .on(). Пока вы используете .on(), вы используете его не на том элементе - его нужно применить к элементу, который существует в DOM, когда страница загружается впервые.

Измените скрипт для использования элемента <div id="mypartial">

$('#mypartial').on('click', '.linkClass', function () {
    debugger;
    var race = $(this).data("raceid");
    var raceName = '@Url.Action("RacesName", "Races")?id=' + race;
     $(this).load(raceName); // modify as required
});