CODEWITHSUNDEEP
javascriptasp.nethttp-post
Josh Fletcher
Josh Fletcher

Reputation: 178

Calling [HTTPPost] from Javascript ASP.NET

I am using a method in my controller which imports data from an API. This method I am wanted to be called from two locations. First the view (currently working) and secondly a javascript function.

Start of controller method:

[ActionName("ImportRosters")]
    [HttpPost]
    public ActionResult PerformImportRosterData(int id, int? actualLength, int? rosterLength)
    {
        var authenticator = Authenticator(id);
        var rosters = authenticator.Api().RosterData().ToDictionary(x => x.Id);

        var databaseRosterDatas = SiteDatabase.DeputyRosterData.Where(x => x.SiteID == id)
            .ToDictionary(x => x.Id);

Javascript Function:

$("#btnDeputyRunNowUpdate").click(function() {
    $("#btnRunDeputyNow").modal("hide");
    ActualLength = $("#actualRunLength").val();
    RosterLength = $("#rosterRunLength").val();
    $.ajax({
        type: "POST",
        url: "/deputy/PerformImportRosterData",
        data: { SiteIDRoster, ActualLength, RosterLength }
    });
    SiteIDRoster = null;
    location.reload();
    $("#btnRunDeputyNow").modal("hide");
    toast.show("Import Successful", 3000);
});

All values are being set but i am getting a 404 error on the url line POST https://example.org/deputy/PerformImportRosterData 404 ()

I need a way to be able to call this c# method from both html and JS

Upvotes: 1

Views: 1488

Answers (2)

Josh Fletcher
Josh Fletcher

Reputation: 178

After attempting to solve for a few days, I created a workaround by creating two methods for importing the data. one for the httpPost and the second for import calling from javascript.

Not a great solution but it works. Thanks for your help Yuri

Upvotes: 0

Yuri
Yuri

Reputation: 2900

This can be done if you will modify the URL in your AJAX. It should look something like

url: '<%= Url.Action("YourActionName", "YourControllerName") %>'

or 

url: @Url.Action("YourActionName", "YourControllerName")

one more thing, I don't see if you do anything with the result of the call. your script does not have success part

 success: function(data) {//do something with the return}

and would be very helpful to have error handler in your call. full example on how AJAX should look like:

$.ajax({
  url: "target.aspx",
  type: "GET",
  dataType: "html",
  success: function (data, status, jqXHR) {
   $("#container").html(data);
    alert("Local success callback.");
   },
   error: function (jqXHR, status, err) {
     alert("Local error callback.");
  },
  complete: function (jqXHR, status) {
     alert("Local completion callback.");
  }
})

For a good tutorial on AJAX read this document

Change after Comment: my current code is below:

$("#btnDeputyRunNowUpdate").click(function() {
    $("#btnRunDeputyNow").modal("hide");
    ActualLength = $("#actualRunLength").val();
    RosterLength = $("#rosterRunLength").val();
    $.ajax({
        type: "POST",
        url: '<%= Url.Action("PerformImportRosterData", "DeputyController") %>',
        data: { SiteIDRoster, ActualLength, RosterLength },

        success: function(data) {
            console.log(data);
            console.log("TESTHERE");

        }
    });
}

UPDATE: Noticed one more thing. Your parameters in the controller and AJAX do not match. Please try to replace your a few lines in your AJAX call with:

    url: "/deputy/PerformImportRosterData",
    data: { id: yourIDValue,  actualLength: youractualLengthValue,  
            rosterLength :yourrosterLengthValue }

remember to set all variable values in javascript , if they have no values set them = to null.

Can you try copy paste code below

$.ajax({
    type: "POST",
    url: "/deputy/PerformImportRosterData",
    data: { SiteIDRoster:999, ActualLength:1, RosterLength:2 }
});

And let me know if it wall cause any errors.

Upvotes: 1

Related Questions