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

admin管理员组

文章数量:1431391

I have an anchor tag that with a javascript function on onclick, call my method to update page via Ajax.

The page show a detail of an order and a ajax update show a position for a detail order.

The problem is: how can i generate and pass URL dynamically?

This is my anchor tag:

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

And this is my javascript function:

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);
        });
}

The razor page, where anchor tag is, named Area/Details/123456-45646-123132(where 123456-45646-123132 is GUID). The problem is, I don't want to hardcode the url because GUID can change.

I have try with

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

but in javascript href is null.

I have an anchor tag that with a javascript function on onclick, call my method to update page via Ajax.

The page show a detail of an order and a ajax update show a position for a detail order.

The problem is: how can i generate and pass URL dynamically?

This is my anchor tag:

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

And this is my javascript function:

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);
        });
}

The razor page, where anchor tag is, named Area/Details/123456-45646-123132(where 123456-45646-123132 is GUID). The problem is, I don't want to hardcode the url because GUID can change.

I have try with

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

but in javascript href is null.

• javascript
• jquery
• ajax
• asp-core
• razor-pages

Share Improve this question Follow edited Nov 27, 2019 at 19:38 marc_s 757k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Nov 27, 2019 at 13:47 MrTexMrTex 24911 gold badge44 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I post here the solution; it's better than in a ment.

Originally i use this href:

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

with Url.Page because i'm using Razor and not MVC. Reading the MS doc(https://learn.microsoft./en-us/aspnet/core/mvc/controllers/areas?view=aspnetcore-3.0) i notice that i'm using the areas so, the correct href should be:

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

Details: is the name of my Page

ShowDetails: is the name of my GET handler

Area: is the name of my Area

position and GUID: is the parameter of my GET handler

The result href URL will be like:

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

that call my handler:

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

Hope this can save time to other.

Thanks to @Rory McCrossan for hers advices.

You can use the href attribute to do this. You say it doesn't work for you, yet you haven't shown what you tried. Using attr() will get you the required value. You also appear to be trying to send JSON in a GET request which isn't quite right, especially when the data you need is already in the href URL.

Also note that you should avoid using onclick and other event attributes as they are outdated. As you're using jQuery you can easily attach your event handlers unobtrusively.

Finally, async: false is incredibly bad practice and should not be used. You don't need it in any case as you've implemented the done() method. With all that said, try this:

<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);
    });
  });
});

Maybe this would help someone but recent version of razor allow to pass dynamic values from your model directly into the url, and on both side of the url... Yes, this is like magic....

<a class="nav-link" href='https://www.whatever./[email protected]&lang=EN' target="_blank" )"></a>

本文标签： javascriptASP NET Core 30 Razor Pages generate dynamic href url for AJAX with UrlPageStack Overflow