CODEWITHSUNDEEP
parametersblazorwebassembly
Cody
Cody

Reputation: 353

Blazor - Sending a Parameter to an API controller

I am Trying to pass an Url from a mouseOver event to pull data using HttpGet but i don't know why it is not sending the parameter to the target APIcontroller. See what i have done.

<div Class="mud-img" style="background-image: url( @items.thumbnail );"
                     height="180" width="300"
                      @onpointerover="@((e) => httpGet(items.href))">
                   <MudIcon Icon="fas fa-play" Size="Size.Large" Style="position:relative" />
                </div>

that is the EVENT the method that fires when the mouse is focus at a div is the

 public  async void httpGet(string url)
{
  result =  await Http.GetFromJsonAsync<string>(string.Format("GetYoutubeVid/{0}", url));
}

and the target controller

 [ApiController]
[Route("GetYoutubeVid")]
public class YouTubeController : ControllerBase
{

    [HttpGet("{url}")]
    
    public string GetYoutubeVid(string url)
    {
        return url;
    }
}

it works fine if i am not trying to send a parameter(url)

Upvotes: 0

Views: 1961

Answers (1)

enet
enet

Reputation: 45596

@onpointerover="@((e) => httpGet(items.href))"

I guess this method should have two parameters: the first is e Do it like this:

@onpointerover="@((e) => httpGet(e, items.href))"

And define the httpGet method with two parameters of the correct type

this part is ok. i am trying to pass this parameter (@((e) => httpGet(e, items.href))") to an api controller

Your httpGet method's signature should look like that:

public  async Task httpGet(PointerEventArgs args, string url)
 {
     // You should define a public class in the Shared project, so that
     // it can be used in both your front end and Web Api. If you do not 
     // have a Shared project, define this class in both locations. This
     // class should contain the data you can take from the args 
     // parameter, as for instance, args.pointerType, as well as the url
     // parameter... And an instance of this class should be send to the
     // Web Api end point.
     result =  await Http.GetFromJsonAsync<string> 
     (string.Format("GetYoutubeVid/{0}", <An instance of your class>));
}

Note: You should add to the div element @onpointerover:preventDefault to keep the mouse event from being sent as well

Important: You are saying

I am Trying to pass an Url from a mouseOver event to pull

If you want to use the mouseover event as you've stated above, then use onmouseover instead: @onmouseover="@((MouseEventArgs args) => httpGet(args, items.href))"

Upvotes: 1

Related Questions