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
– Prashanth Benny, Commented Feb 16, 2017 at 9: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
– Nope, Commented Feb 16, 2017 at 9:43
The answers to the question mentioned above seems to answer this question too. maybe i am wrong... :) — Prashanth Benny
– Prashanth Benny, Commented Feb 16, 2017 at 9: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 — Nope
– Nope, Commented Feb 16, 2017 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
– Prashanth Benny, Commented Feb 16, 2017 at 10:27

Thiago Custodio · Accepted Answer · 2017-02-16 09:29:33Z

1

$.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.

answered Feb 16, 2017 at 9:29

Thiago Custodio

18.4k9 gold badges50 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Enix Over a year ago

I hit error : POST localhost:56110/user/controller/DeleteUser

Thiago Custodio Over a year ago

I left Controller because I didn`t know the name of your controller. Just remove it and put the right controller name

kamprasad · Accepted Answer · 2017-02-16 09:36:56Z

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, 2017 at 9:36

answered Feb 16, 2017 at 9:30

kamprasad

6484 silver badges12 bronze badges

5 Comments

Mihai Alexandru-Ionut Over a year ago

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.

kamprasad Over a year ago

sorry it should be datatype

Enix Over a year ago

I hit error : POST localhost:56110/user/controller/DeleteUser 404 (Not Found)

Cleptus Over a year ago

@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.

Mihai Alexandru-Ionut Over a year ago

@Enix, you should replace controller with your controller name.

ArpitVyas-Systematixindia · Accepted Answer · 2017-02-17 06:04:09Z

0

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);
        }
    });
}

answered Feb 17, 2017 at 6:04

ArpitVyas-Systematixindia

214 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related