Ajax request not hitting the right Post Method in Controller Class

Question

I have a controller which contains two Post method, But whenever I make ajax request it is taking me to the first post method in the controller, instead I want to go to the second one, how do I route it to the second Post method? This is the code I have so far, It works fine but only takes me to the first POST method, I am not sure on how to use my url in ajax ( may be that is causing the problem).

var ajax = Ext.Ajax.request({
    url: './../ImportCSVFile',
    data: details,
    method: 'POST',
    headers: { 'accept': '*/*' },
    success: function (response, options) {
        var result = JSON.parse(response.responseText);
        if (mask) {
            mask.destroy();
        }
        Ext.Msg.alert("File Upload Successful");
    }
});

And here is my method in the controller that I want to reach:

[HttpPost]
public IActionResult ImportCSVFile(IFormFile formFile)
{
    //sample of import file 
}

Did you specify enctype="multipart/form-data" ? try using json.stringify while sending data in your ajax call, something like data: json.stringify(details). Also, check whether that url path points to action or not — sam, Jan 03 '20 at 14:32
It gives 415 Unsupported Media Type but at the end Point I have a method that accepts the formfile that means it is still taking me to the other Post Method — wax, Jan 03 '20 at 14:36
Could you please post other controller action as well? If its taking you different POST Action, then I would suspect its most probably has to do with your route that you mentioned in url. Please verify whether url is pointing to right controller and right action — sam, Jan 03 '20 at 14:54
Here It is, so there are two post method in the same controller, one takes in a list and other takes in a form file. Since I am getting unsupported media type, I think it might be referencing to the wrong post method: [HttpPost("ab/cd")] public IActionResult Post([FromBody]List XYModel) { } And the other one is [HttpPost] public IActionResult ImportCSVFile(IFormFile formFile) { } — wax, Jan 03 '20 at 14:58

score 0 · Answer 1 · edited Jan 10 '20 at 14:16

0

If you are using Razor syntax than you should use Url.Action method

var ajax = Ext.Ajax.request({
    url: '@Url.Action("ImportCSVFile","ControllerNameHere")',
    data: details,
    method: 'POST',
    headers: { 'accept': '*/*' },
    success: function (response, options) {
        var result = JSON.parse(response.responseText);
        if (mask) {
            mask.destroy();
        }
        Ext.Msg.alert("File Upload Successful");
    }
});

Also if you could paste the controller that would be helpful.

EDIT: The issue is with the file that you are submitting with Ajax. It doesnt appear to be a url issue.

submission of file using jquery can be done like this

    var fdata = new FormData();

    //Get file here.
    var fileInput = $('#File')[0];
    var file = fileInput.files[0];
    fdata.append("File", file);

    // all other data here
    $("input[type='text'").each(function (x, y) {
        fdata.append($(y).attr("name"), $(y).val());
    });
    // or you can do something like this 
    f.data.append('Name' ,"valueofName")'
    $.ajax({
        type: 'post',
        url: '../../ImportCSVFile',
        data: fdata,
        processData: false,
        contentType: false
    }).done(function(result) {
        // do something with the result now
        console.log(result);
    });

Or probably something like this using Ext.Ajax

var file = s.fileInputEl.dom.files[0],
     data = new FormData();
data.append('file', file);
Ext.Ajax.request({
   url: '/upload/files',
   rawData: data,
   headers: {'Content-Type':null}, //to use content type of FormData
   success: function(response){
   }
});

Sample referred from here: File upload in extjs 4.2 without form.submit()

edited Jan 10 '20 at 14:16

marc_s

732,580
175
1,330
1,459

answered Jan 03 '20 at 15:14

zetawars

1,023
1
12
27

It gave me an error saying 404 Not found. url: '@Url.Action("ImportCSVFile","XYController")', XY Controller is my controller name, that has ImportCSVFile Post method. – wax Jan 03 '20 at 15:21
HttpPost("ab/xy")] public IActionResult Post([FromBody]List lstXYModel) { } ///
///Used to Import Data From CSV File ///
/// Import /// [HttpPost] public IActionResult ImportCSVFile(IFormFile formFile) { try { } – wax Jan 03 '20 at 15:22
are you using asp.net mvc 5? or .net core? what url do you see in the html page by doing "inspect element "? – zetawars Jan 03 '20 at 15:22
Alright so you are also trying to submit a IFormFile using Ajax. It isnt done this way. – zetawars Jan 03 '20 at 15:25
That's right, I am trying to submit IFormFile using Ajax. – wax Jan 03 '20 at 15:32
the issue might not be in the file path. Are you sure you are getting 404 ? check that in Network Tab. I have zero Idea of doing this with the library you are using " Ext.Ajax." It can be done easily using Jquery though, Look into this answer. https://stackoverflow.com/questions/46549746/using-ajax-to-post-a-view-model-which-includes-an-iformfile-property-in-mvc-core/46550063 Here is an article that you might need to follow https://stackoverflow.com/questions/16965255/file-upload-in-extjs-4-2-without-form-submit – zetawars Jan 03 '20 at 15:34

sam · Answer 2 · 2020-01-03T15:30:05.780

415 means request is not in expected format. Pull up network tools in browser and see what request is being made and see whether its in the format that can reach ImportCSVFile controller Action or not.

with the details that you posted here this is what I came up with: try this:

var ajax = Ext.Ajax.request({
    url: './../ImportCSVFile',
    data: JSON.stringify(details),
    method: 'POST',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    headers: { 'accept': '*/*' },
    success: function (response, options) {
        var result = JSON.parse(response.responseText);
        if (mask) {
            mask.destroy();
        }
        Ext.Msg.alert("File Upload Successful");
    }
});

Ajax request not hitting the right Post Method in Controller Class

2 Answers2