Загружать определенные данные на основе переданного идентификатора при нажатии ссылки в ASP.NET

Question

Моя цель - создать AJAX, который будет показывать детали конкретного Building, когда пользователь нажимает на конкретный link <a...>

Мой контроллер

    public IActionResult BuildingDetail(int id)
    {
      return PartialView("_BuildingDetailsPartial", _buildingRepository.GetById(id));
    }

Мой взгляд

 @foreach (var employee in Model.employees)
 { 
  ...
   <a id="LoadBuildingDetail" href="#LoadBuildingDetail" data-assigned-id="@employee.Office.BuildingId"
   onclick="AssignButtonClicked(this)">@employee.Office.Name</a>
  ...
 }

Место для отображения сведений о здании, когда пользователь нажимает на ссылку. Так что _BuildingDetailsPartial будет отображаться здесь.

<div id="BuildingDetail">

</div>

Сценарии: я застрял здесь. Мне нужно загрузить конкретные BuildingDetail на основе переданных id.

<script type="text/javascript">
        $(document).ready(function () {
            function AssignButtonClicked(buildingId) {
                var BuildingId = $(buildingId).data('assigned-id');
            }

            $("#LoadBuildingDetail").click(function () {
                $("#BuildingDetail").load("/employees/buildingdetail/", { id: AssignButtonClicked() }, );
            });
        })
    </script>

Answer 1

Проблема связана с логикой обработчика щелчков в jQuery. Вы пытаетесь вызвать функцию в атрибуте onclick элемента, который не будет доступен, так как он определен в области действия document.ready.

Также вы пытаетесь установить свойство id объекта, который вы отправляете в запросе функции, которая не имеет возвращаемого значения.

Чтобы исправить это, удалите атрибут onclick из сгенерированного вами HTML-кода и просто прочитайте атрибут data из элемента непосредственно в обработчике событий jQuery перед отправкой запроса AJAX. Попробуйте это:

@foreach (var employee in Model.employees)
{ 
  <a class="LoadBuildingDetail" href="#LoadBuildingDetail" data-assigned-id="@employee.Office.BuildingId">@employee.Office.Name</a>
}

<script type="text/javascript">
  $(function () {
    $(".LoadBuildingDetail").click(function () {
      $("#BuildingDetail").load("/employees/buildingdetail/", { 
        id: $(this).data('assigned-id') 
      });
    });
  })
</script>