C# How to call MVC Controller function by using javascript or jquery

Question

I have this at my controller:

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> DeleteUser(UserViewModel viewModel)
{
}

I have this at my cshtml:

<input type="button" id="btnDelete" value="Delete" />

I have this at my js file:

$('#btnDelete').click(function (e) {

});

How do I call controller function from js file?

include `@Html.AntiForgeryToken()` in the form that you are posting — Prashanth Benny, Feb 16 '17 at 09:33
@PrashanthBenny How is this a duplicate of a specific antiforgery question if OP seems to have no idea how to post to a controller in the first place or ha sspecified a form is being used? How did the question become about that? I'm sure it is a duplicate of some sort but not of that question as far as I can see. - Sorry if I missed something. — Nope, Feb 16 '17 at 09:43
The answers to the question mentioned above seems to answer this question too. maybe i am wrong... :) — Prashanth Benny, Feb 16 '17 at 09:50
@PrashanthBenny Very indirectly as OP of other question already knew how to call actions from javascript and had a totally different issue. Assuming OP of this question is new to ajax and calling into controllers from JavaScript, given the question, the marked duplicate would be more than overwhelming...just saying, a more fitting duplicate would be more along the lines of ► [http://stackoverflow.com/questions/15162760/how-to-call-an-mvc-action-using-only-javascript](http://stackoverflow.com/questions/15162760/how-to-call-an-mvc-action-using-only-javascript) — Nope, Feb 16 '17 at 10:22
@Fran but this one has more possibility of breaking because of this guy `[ValidateAntiForgeryToken]` right? But the question seems to be the other way! `Confused!` :D — Prashanth Benny, Feb 16 '17 at 10:27

score 1 · Answer 1 · answered Feb 16 '17 at 09:29

$.post("Controller/CreateUser", dataToPost)
            .done(function(response, status, jqxhr){ 
                // this is the "success" callback
            })
            .fail(function(jqxhr, status, error){ 
                // this is the ""error"" callback
            });

or

var data = {
        username: $('#username').val().trim(),
        password: $('#password').val()
    };

$.ajax({
    type: "POST",
    url: "Controller/CreateUser",
    content: "application/json;",
    dataType: "json",
    data: JSON.stringify(data),
    success: function(d) {

    },
    error: function (xhr, textStatus, errorThrown) {

    }
});

ps: compose the data object according to the UserViewModel properties.

I hit error : POST localhost:56110/user/controller/DeleteUser — Enix, Feb 16 '17 at 09:45
I left Controller because I didn`t know the name of your controller. Just remove it and put the right controller name — Thiago Custodio, Feb 16 '17 at 10:27

kamprasad · Answer 2 · 2017-02-16T09:36:56.600

0

Inside the button click, execute ajax request

$('#btnDelete').click(function (e) {
   $.ajax({
      type: "POST",
      url: 'controller/DeleteUser',
      dataType: "json",
      success: function(data){
        //html content
      },
    });
 }

edited Feb 16 '17 at 09:36

answered Feb 16 '17 at 09:30

kamprasad

608
4
12

Why do you set `data:"Json"` ? Maybe you mean `dataType`. `dataType` is the type of data you are expecting from the server. `data` property is the data you will send to server. – Mihai Alexandru-Ionut Feb 16 '17 at 09:34
1

sorry it should be datatype – kamprasad Feb 16 '17 at 09:36
I hit error : POST http://localhost:56110/user/controller/DeleteUser 404 (Not Found) – Enix Feb 16 '17 at 09:45
@Alexandru-IonutMihai The `dataType: json` is not the c# User class. It can be set to: xml/html/script/json/jsonp/text. Chech the Jquery ajax function for more info. – Cleptus Feb 16 '17 at 10:16
@Enix, you should replace `controller` with your `controller` name. – Mihai Alexandru-Ionut Feb 16 '17 at 10:20

score 0 · Answer 3 · answered Feb 17 '17 at 06:04

It's very easy to access any controller method using ajax post method.

As here I'm getting states as per selected country using 'RegionesController' method name 'GetStates' also here I'm passing CountryId to get states as per this id.

EX:

function GetStates() {
    $.ajax({
        type: "POST",
        async: false,
        url: abp.appPath + 'Regiones/GetStates?CountryId=' + $("#ddlCountry").val(),
        success: function (result) {
           //return data or object
        },
        error: function (err) {
            abp.notify.info(err.statusText);
        }
    });
}

C# How to call MVC Controller function by using javascript or jquery

3 Answers3