猿问

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

我有一个锚标记,在 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 中为空。


人到中年有点甜
浏览 276回答 2
2回答

蝴蝶刀刀

我在这里发布解决方案;这比在评论中要好。最初我使用这个href:href="@Url.Page("Area/Details/" + @Model.wItem.GUID,&nbsp; "ShowDetails")">&nbsp;&nbsp;使用 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",&nbsp; 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){&nbsp; &nbsp; ...}希望这可以节省其他时间。

芜湖不芜

您可以使用该href属性来执行此操作。你说它对你不起作用,但你还没有展示你尝试过的东西。使用attr()将为您提供所需的值。您似乎还试图在不太正确的 GET 请求中发送 JSON,尤其是当您需要的数据已经在hrefURL 中时。另请注意,您应避免使用onclick和其他事件属性,因为它们已过时。当您使用 jQuery 时,您可以轻松地不显眼地附加您的事件处理程序。最后,async: false这是非常糟糕的做法,不应使用。您在任何情况下都不需要它,因为您已经实现了该done()方法。说了这么多,试试这个:<a class="nav-link text-dark text-center p-0 collapsed"&nbsp; data-toggle="collapse"&nbsp; data-target="#Details"&nbsp; aria-expanded="true"&nbsp; aria-controls="Details"&nbsp; href="@Url.Page("Area/Details/" + @Model.wItem.GUID,&nbsp; "ShowDetails")">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; @item.Position</a>jQuery(function($) {&nbsp; $('.nav-link').on('click', function(e) {&nbsp; &nbsp; e.preventDefault(); // stop the standard link behaviour&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; url: $(this).attr('href'),&nbsp; &nbsp; &nbsp; type: 'GET',&nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; headers: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; RequestVerificationToken:&nbsp; $('input:hidden[name="__RequestVerificationToken"]').val()&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }).done(function(result) {&nbsp; &nbsp; &nbsp; $('#MainframeContents').html(result);&nbsp; &nbsp; });&nbsp; });});
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答