question

PrathameshShende avatar image
0 Votes"
PrathameshShende asked BruceBarker-8516 edited

Cannot Call .NET Method From Js Blazor WASM

I m getting an error
The assembly 'ProjectClient' does not contain a public invokable method with [JSInvokableAttribute("UpdateDealsStageAsync")].
in blazor wasm project

I have created the JSinvokable function
This is file DealService.cs
[JSInvokable("UpdateDealsStageAsync")]
public async Task<Deal> UpdateDealsStageAsync(int dealID, int stageID)
{
return await HttpClient.GetFromJsonAsync<Deal>($"{HttpClient.BaseAddress}api/deals/updatestage?dealid={dealID}&stageId={stageID}");
}

Site.js

window.dragdrop = () => {
$(function () {
$(".deal-card").draggable({ helper: 'clone', start: function () { $("#winlost").show(); }, });

     $(".stage-container").droppable({
         accept: ".deal-card",
         drop: function (ev, ui) {
             //   $("#winlost").show();
             var droppedItem = $(ui.draggable); //.clone()
             var targetid = $(ev.target).attr('id');
             var dealid = ui.draggable.attr('id');

             $(ev.target).effect("highlight", {}, 3000);


DotNet.invokeMethodAsync('CRM.Client', 'UpdateDealsStageAsync', targetid, dealid)
.then(data => {
console.log(data);
});

             $(this).append(droppedItem);
         }
     });
 });

}

on drag, I need to call the JsInvokable Method But I m getting errors. and How do I pass the parameters too?

dotnet-aspnet-core-blazor
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JasonPan-MSFT avatar image
0 Votes"
JasonPan-MSFT answered JasonPan-MSFT commented

Hi @PrathameshShende ,

Update

You should use HttpClient client = new HttpClient();, not return await HttpClient.GetFromJsonAsync<Deal>($"{HttpClient.BaseAddress}api/deals/updatestage?dealid={dealID}&stageId={stageID}");.

 [JSInvokable]
 public static async Task<String> BackendCode(string dealID)
 {
     var request = new HttpRequestMessage(HttpMethod.Get,
              "http://localhost:44366/counter/testapi");
     HttpClient client = new HttpClient();
     var response = await client.GetAsync($"your_api_url");
     if (response.IsSuccessStatusCode)
     {
         return await response.Content.ReadAsStringAsync();
     }
     else
     {
          return "Request Failed ";
     }
 }

You should add static in your method, it works for me. Like below :

 public static async Task<Deal> UpdateDealsStageAsync(int dealID, int stageID).


If the answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best Regards,
Jason




· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Ok. But HttpClient need not static method or property so it's showing error of it.

0 Votes 0 ·

@PrathameshShende I have updated my answer, please try again.

0 Votes 0 ·
BruceBarker-8516 avatar image
0 Votes"
BruceBarker-8516 answered BruceBarker-8516 edited

Not sure why you would have javascript call blazor code to do an ajax call, especially as the blazor code does no processing of the response. The HttpClient has to call javascript to make the real ajax call anyway.

it would be easier to just do it in javascript:

      $(".stage-container").droppable({ 
          accept: ".deal-card", 
          drop: function (ev, ui) { 
              //   $("#winlost").show(); 
              var droppedItem = $(ui.draggable); //.clone() 
              var targetid = $(ev.target).attr('id'); 
              var dealid = ui.draggable.attr('id'); 
              $(ev.target).effect("highlight", {}, 3000); 
     
              // base url set in index.html 
              $.ajax("/api/deals/updatestage", { 
                    dealid, 
                    stageid = targetid  //not sure mapping 
               }).then(data => { 
                    console.log(data); 
               }); 
     
              $(this).append(droppedItem); 
          } 
      }); 
  }); 


your code implies that you are storing ints in html id attributes. this is bad coding, as an id should start with a number. a custom (data-) attribute would be better.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.