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中的click处理程序的逻辑。您尝试在元素的onclick属性中调用函数，该函数在文档内已定义，因此无法访问该元素.ready范围。

此外，您尝试将请求中发送的对象的id属性设置为没有返回值的函数。

要解决此问题，请从您生成的HTML中删除onclick属性，并在发送AJAX请求之前直接从jQuery事件处理程序中的元素中读取data属性。试试这个：

@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>

根据ASP.NET中链接点击时传递的Id加载特定数据

1 个答案: