Question posted in
You can find the official documentation here.

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

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

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

    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.com/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.


  2. 0

    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);
    });
  });
});
    Login or Signup to reply.
  3. 0

    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.com/[email protected]&lang=EN' target="_blank" )"></a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search