ASP .NET Core 3.0 Razor Pages 使用@Url.Page 为 AJAX 生成动态 href url

Question

我有一个锚标签，在点击时带有 javascript 功能，调用我的方法通过 Ajax 更新页面。

该页面显示订单的详细信息，ajax 更新显示详细订单的位置。

问题是：如何动态生成和传递 URL？

这是我的锚标签：

<a class="nav-link text-dark text-center p-0 collapsed"
   data-toggle="collapse"
   data-target="#Details"
   aria-expanded="true"
   aria-controls="Details"
   href="@Url.Page("Area/Details/" + @Model.wItem.GUID,  "ShowDetails")"                                           
   id="ShowDetails"
   onclick="ShowDetailsAjax(this, '@Model.wItem.GUID')">
   @item.Position
</a>

这是我的 javascript 函数：

function ShowPositionAjax(x, _GUID) {

    var _url = '';
    var _position = x.outerText;
    var parameters = "{'position':'" + _position + "','GUID':'" + _GUID + "'}";

    $.ajax({
        url: _url,
        type: 'GET',
        cache: false,
        async: true,
        headers: {
            RequestVerificationToken:
                $('input:hidden[name="__RequestVerificationToken"]').val()
        },
        data: parameters
    })
        .done(function (result) {
            $('#MainframeContents').html(result);
        });
}

锚标记所在的剃刀页面名为Area/Details/123456-45646-123132（其中123456-45646-123132是GUID）。问题是，我不想硬编码 url 因为 GUID 可以更改。

我试过

href="@Url.Page("Area/Details/" + @Model.wItem.GUID,  "ShowDetails")"

但在 javascript 中 href 为空。

Answer 1

您可以使用 href 属性来执行此操作。你说它对你不起作用，但你还没有展示你的尝试。使用 attr() 将为您提供所需的值。您似乎还试图在不太正确的 GET 请求中发送 JSON ，尤其是当您需要的数据已经在 href URL.

中时

另请注意，您应避免使用 onclick 和其他事件属性，因为它们已过时。当您使用 jQuery 时，您可以轻松地不引人注意地附加您的事件处理程序。

最后，async: false 是非常糟糕的做法，不应使用。在任何情况下都不需要它，因为您已经实现了 done() 方法。尽管如此，试试这个：

<a class="nav-link text-dark text-center p-0 collapsed"
  data-toggle="collapse"
  data-target="#Details"
  aria-expanded="true"
  aria-controls="Details"
  href="@Url.Page("Area/Details/" + @Model.wItem.GUID,  "ShowDetails")">       
  @item.Position
</a>

jQuery(function($) {
  $('.nav-link').on('click', function(e) {
    e.preventDefault(); // stop the standard link behaviour
    $.ajax({
      url: $(this).attr('href'),
      type: 'GET',
      cache: false,
      headers: {
          RequestVerificationToken:  $('input:hidden[name="__RequestVerificationToken"]').val()
      }
    }).done(function(result) {
      $('#MainframeContents').html(result);
    });
  });
});

Answer 2

我在post这里解决；比在评论中更好。

最初我使用这个 href:

href="@Url.Page("Area/Details/" + @Model.wItem.GUID,  "ShowDetails")">

与 Url.Page 因为我使用的是 Razor 而不是 MVC。阅读 MS 文档 (https://docs.microsoft.com/en-us/aspnet/core/mvc/controllers/areas?view=aspnetcore-3.0) 我注意到我正在使用区域所以，正确的 href 应该是：

href='@Url.Page("Details", "ShowDetails",  new { area = "Area", position = item.Position, GUID = @Model.wItem.GUID })'

详情: 是我主页的名字

ShowDetails: 是我的 GET 处理程序的名称

区域: 是我的区域名称

position and GUID: 是我的 GET handler

的参数

结果 href URL 将如下所示：

/en/Area/Details/45646546-1213-156416-45646-5464666?position=1&handler=ShowDetails

呼叫我的处理程序：

public async Task<IActionResult> OnGetShowDetailsAsync(string GUID, string position)
{
    ...
}

希望这可以为其他人节省时间。

感谢@Rory McCrossan 的建议。

ASP .NET Core 3.0 Razor Pages 使用@Url.Page 为 AJAX 生成动态 href url

ASP .NET Core 3.0 Razor Pages generate dynamic href url for AJAX with @Url.Page

javascript

ajax

jquery

asp.net-core

razor-pages