Is there a way to send an AJAX request to an MVC action from a JavaScript file?

Question

Is there a way to send an AJAX request to an MVC action from a JavaScript file?

In a file named job.js, there is code that works perfectly when run on localhost but results in a 404 error when run on an intranet server with an application name.

Job.updateJob = function () {

    $.post('/Builder/ListJobItems', function (data) {
        ...
    });
}

I wish I could use @Url.Action(), but since this is a JavaScript (.js) file, it's not possible. I'm aware of the hack where data is added to the body element, but I prefer to keep this code decoupled from the DOM for architectural reasons. This code is meant for data acquisition and shouldn't have knowledge of the DOM.

If there was a way to parse window.location, I would be open to it, but it needs to work universally. What frustrates me the most is that it seems like a common issue, yet there are no widely accepted solutions available. Are people just embedding all their JavaScript in Razor views now? Is modular code isolation becoming obsolete? It's hard to believe, but the lack of solutions makes me wonder.

javascript ajax asp.net-mvc

Answer 1

Answer №1

When I require data from the server side in JavaScript files, my approach is to create an Action and a view with the JS content. Instead of including job.js directly, I make a call to my action like this:

<script type="text/javascript" src="@Url.Action("Job","JSController")"/>

In the view, I set everything up like so:

Job.updateJob = function () {
    $.post('@Url.Action("ListJobItems","Builder")', function (data) {
        // Handling the response data here
    });
}

Using this method has proven to be effective for me.

Answer 2

When I require data from the server side in JavaScript files, my approach is to create an Action and a view with the JS content. Instead of including job.js directly, I make a call to my action like this:

<script type="text/javascript" src="@Url.Action("Job","JSController")"/>

In the view, I set everything up like so:

Job.updateJob = function () {
    $.post('@Url.Action("ListJobItems","Builder")', function (data) {
        // Handling the response data here
    });
}

Using this method has proven to be effective for me.

Is there a way to send an AJAX request to an MVC action from a JavaScript file?

Answer №1

Similar questions

Error: The function pajinate is not defined for jQuery([...])

Example of Node-gallery used in isolation, displaying an error event with the message "ENOENT"

Exploring Protractor testing with Bootstrap modals

Is there a way to implement absolute imports in both Storybook and Next.js?

The resizing issue of Textarea during transitions

Using Ajax and JSON to fetch data and create multiple divs based on the number of notes retrieved from a database (using PHP and SQL)

Is it possible to modify a specific index within an array stored in Firestore?

Discover how to retrieve full response data by entering text into a text field using Reactjs

Puppeteer App Error: An error has been detected on the client side

The dynamic routing feature in React fails to function properly after the application is built or deployed

fetching a set of data entries from an entity on dynamic CRM platform utilizing the REST API along with asynchronous JavaScript and XML

Save the JSON data into a variable inside a React utility component

When my route in NextJS processes the request, it returns a ReadableStream from req

Is the parent node of the input element the input element itself?

The Puppeteer software does not automatically shut down the browser once the task is complete

Compiling TypeScript to JavaScript with Deno

JavaScript does not recognize the $ symbol

Can a string be transformed into HTTP POST parameters?

Switch between accordion items

What is the best method for combining this function?