Executing [HTTPPost] request using JavaScript with ASP.NET

Question

Executing [HTTPPost] request using JavaScript with ASP.NET

I have a controller method that fetches data from an API which I need to be able to call from two different places. The first location is the view (which is currently working), and the second is a JavaScript function.

Here is the beginning of the 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);
});

Although all values are being properly set, I am encountering a 404 error on the URL line: POST 404 ()

I am looking for a solution that allows me to call this C# method from both HTML and JS.

javascript asp.net http-post

Answer 1

Answer №1

Modifying the URL in your AJAX can be achieved by using:

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

or

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

If you do not handle the result of the call, remember to include a success function like this:

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

Additionally, consider adding an error handler for better control over your AJAX call. Here is a full example on how it 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 more information on AJAX, refer to this document

Update after Comment: A sample code snippet is provided 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: Mismatch between controller parameters and AJAX call parameters was identified. Modify your AJAX call as shown below:

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

Ensure all variable values are set in JavaScript, if they have no values, set them to null.

Copy paste the following code snippet and check for any errors:

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

If any errors occur, please let me know.

Answer 2

Modifying the URL in your AJAX can be achieved by using:

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

or

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

If you do not handle the result of the call, remember to include a success function like this:

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

Additionally, consider adding an error handler for better control over your AJAX call. Here is a full example on how it 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 more information on AJAX, refer to this document

Update after Comment: A sample code snippet is provided 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: Mismatch between controller parameters and AJAX call parameters was identified. Modify your AJAX call as shown below:

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

Ensure all variable values are set in JavaScript, if they have no values, set them to null.

Copy paste the following code snippet and check for any errors:

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

If any errors occur, please let me know.

Answer 3

Answer №2

Having struggled for several days to find a solution, I finally devised a workaround by developing two separate methods for importing the data: one for the httpPost and another for import calling from javascript.

While not ideal, this approach gets the job done. Special thanks to Yuri for your assistance!

Answer 4

Having struggled for several days to find a solution, I finally devised a workaround by developing two separate methods for importing the data: one for the httpPost and another for import calling from javascript.

While not ideal, this approach gets the job done. Special thanks to Yuri for your assistance!

Executing [HTTPPost] request using JavaScript with ASP.NET

Answer №1

Answer №2

Similar questions

Getting the value of an object using jQuery

By default, the HTML table will highlight the specific column based on the current month using either AngularJS or JavaScript upon loading

"Enhance Your Design with Hovering CSS Backgrounds

Implementing pagination in a Node.js application using MongoDB.ORCreating

Tips for incrementing the counter value with a button click in JavaScript

Instructions on extracting particular elements from a JSON document and converting them into an array

AngularJs throws an error: "Received an unexpected value when passing a number

Is the maxJsonLength property in the web.config referenced by JQuery's Ajax?

"Efficiently Input and Update Information in Details View Using Programming Language

Step-by-step guide on opening a modal popup, retrieving information from a database, presenting it in the popup, and saving any modifications as per the user's instruction

Optimal strategies for managing exceptions in ASP.NET web applications

I am having issues with my dropdown-list on my second script not functioning properly

Using JavaScript to cheat on a typing test by automating the typing of letters

Tips on ensuring that the Angular frontend waits for the response from an Express REST call

Using HTML and Javascript files with AJAX can sometimes be problematic due to compatibility issues

Accessing a JSON value within the AngularJS controller for the purpose of making edits

Utilize jQuery AJAX function to fetch a PDF document from a PHP file

Tips for verifying the parameter value within ASP.NET MVC routes

Failure when running npm start command in Nest js

AngularJS: $digest must be run before calling $httpBackend.flush()