Tips for effectively invoking an MVC Controller using AJAX

Question

Tips for effectively invoking an MVC Controller using AJAX

I am currently working on initiating an AJAX call to a controller ActionResult within the MVC framework. While I have experience with AJAX, I am relatively new to MVC. I have set up an AJAX call in a separate .js file that is triggered by a button click event in one of the views. The AJAX call is executed as expected but consistently returns a "resource not found" error message. See the code snippet below:

Button in View:

<input type="button" class="btn btn-success" value="Download Pictures" id="btnGetPics"/>

AJAX Call:

    var ajaxURL = 'MMRController/TestAjax';
    $('#btnGetPics').on('click',
        function () {
            $.ajax({
                type: 'POST',
                url: ajaxURL,
                data: param = "this",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                beforeSend: function () {
                    console.log('initiating ajax call');
                },
                success: function (data) {
                    alert(data);
                },
                error: function (ex) {
                    console.log('Error');
                    console.log(ex.responseText);
                    alert("Error occurred while downloading images. Please contact IT support.");
                }
            });
        });

ActionResult within Controller:

        [HttpPost]
        public ActionResult TextAjax(string param)
        {
            return Json(param + " works", JsonRequestBehavior.AllowGet);
        }

Displayed error message:

If you can provide any assistance, it would be highly appreciated.

javascript c#ajax asp.net-mvc

Answer 1

Answer №1

The data property is not being set correctly.

data: param = "this"

This should be corrected to:

data: { param : "this"},

Additionally, the URL should include a forward slash before the controller (/) and the word controller should be removed. In full...

var ajaxURL = '/MMR/TestAjax';

//... etc..

$.ajax({
            type: 'POST',
            url: ajaxURL,
            data: { param : "this"},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                console.log('firing ajax call');
            },
            success: function (data) {
                alert(data);
            },
            error: function (ex) {
                console.log('Error');
                console.log(ex.responseText);
                alert("Error downloading images.  Please contact IT.");
            }
        });

Answer 2

The data property is not being set correctly.

data: param = "this"

This should be corrected to:

data: { param : "this"},

Additionally, the URL should include a forward slash before the controller (/) and the word controller should be removed. In full...

var ajaxURL = '/MMR/TestAjax';

//... etc..

$.ajax({
            type: 'POST',
            url: ajaxURL,
            data: { param : "this"},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            beforeSend: function () {
                console.log('firing ajax call');
            },
            success: function (data) {
                alert(data);
            },
            error: function (ex) {
                console.log('Error');
                console.log(ex.responseText);
                alert("Error downloading images.  Please contact IT.");
            }
        });

Answer 3

Answer №2

My approach would involve making three key changes:

Opt for the concise jQuery post method $.post (https://api.jquery.com/jQuery.post/)
Utilize the @Url.Action functionality (https://learn.microsoft.com/en-us/dotnet/api/system.web.mvc.urlhelper.action?view=aspnet-mvc-5.2)

Ensure that your data is properly formatted as valid JSON

var url = '@Url.Action("TestAjax","MMR")';

// Use this line if you are working within an MVC area
// var url = '@Url.Action("TestAjax","MMRController", new { Area = "AreaNameGoesHere" })';

$.post(url, { param: 'this' }, function(){
    // Handle success scenario here
}).fail(function(){
    // Handle failure scenario here
});

Answer 4

My approach would involve making three key changes:

Opt for the concise jQuery post method $.post (https://api.jquery.com/jQuery.post/)
Utilize the @Url.Action functionality (https://learn.microsoft.com/en-us/dotnet/api/system.web.mvc.urlhelper.action?view=aspnet-mvc-5.2)

Ensure that your data is properly formatted as valid JSON

var url = '@Url.Action("TestAjax","MMR")';

// Use this line if you are working within an MVC area
// var url = '@Url.Action("TestAjax","MMRController", new { Area = "AreaNameGoesHere" })';

$.post(url, { param: 'this' }, function(){
    // Handle success scenario here
}).fail(function(){
    // Handle failure scenario here
});

Answer 5

Answer №3

Substitute

var ajaxURL = 'MMRController/TestAjax';
data: param = "this",

for

var ajaxURL = '/MMR/TestAjax';
data: {param :"this"},

Answer 6

Substitute

var ajaxURL = 'MMRController/TestAjax';
data: param = "this",

for

var ajaxURL = '/MMR/TestAjax';
data: {param :"this"},

Tips for effectively invoking an MVC Controller using AJAX

Answer №1

Answer №2

Answer №3

Similar questions

Span wrapped in a hover effect

Tips for ensuring the Google Maps API script has loaded before executing a custom directive on the homepage of an Angular website

Stop unauthorized direct access to PHP forms and only allow submission through AJAX requests

Creating a custom loading page in Next.js 13: A step-by-step guide

Transferring data from a form to PHP using AJAX

Guide to incorporating an input field within a select option in ant design and react

Ways to split images and text in list items using CSS

Retrieving visual information from Google Street View entity

SMMRY API bug stemming from a lack of necessary variables

The left and right arrows maintain their visibility even when they are outside of the image

What is the correct way to insert a new key-value pair into an object within the state of functional components?

Creating a fantastic Image Gallery in JavaScript

Issue with jQuery.parseJSON causing empty data structure to return

Setting up a Web application testing environment on its own

Authentication with Laravel and Vue.js

Implementing es6 syntax for overloading a library class

Use JavaScript executor in Selenium WebDriver to interact with list items by clicking on them

Is there a possibility for the code following the await call to be executed in a random order if an async Vuex action is triggered twice?

Share a URL seamlessly without the need for a page refresh or AJAX request

Developing a personalized camera feature using ReactJS