Cannot Call .NET Method From Js Blazor WASM

Question

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?

Answer 1

Hi @Prathamesh Shende ,

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

Answer 2

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.