ASP .NET Core 3.0 Razor 页面使用 @Url.Page 为 AJAX 生成动态

Question

我有一个锚标记，在 onclick 上有一个 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）。问题是，我不想硬编码网址，因为 GUID 可以更改。我试过了href="@Url.Page("Area/Details/" + @Model.wItem.GUID,  "ShowDetails")"但在 javascript href 中为空。

Answer 1

我在这里发布解决方案；这比在评论中要好。

最初我使用这个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 处理程序的名称

区域：是我的区域的名称

位置和GUID：是我的 GET 处理程序的参数

结果 href URL 将如下所示：

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

调用我的处理程序：

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

{

    ...

}

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

Answer 2

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

另请注意，您应避免使用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);

    });

  });

});