How to call an Action method using ajax for a button click which is in partial view in MVC?

Question

I'm new to MVC. I got a situation where I need to pass a parameter from view to controller on the button click (the button is in partial view), which then renders another partial view in the same page.

Steps followed:

1. I used jquery button click event for the button of partial view.
2. I made an ajax call to pass the parameters from my view to the controller.

The following is my code:

$(document).on("click", "#btninPartialView", function(e){
    var data = $("txtinPartialView").val();
    $("#mainPageContainer").load("/Controller/Action", data, function(){
        $.ajax({
            //url: @Url.Action("Action", "Controller"),
            type: GET,
            data: {
                id: data
            },
            success: function(){
            }
            error: function(){
            }
        })
    }    
})

Problem: The problem is that, the data I'm received in the action method is null.

Please let me know if I'm missing anything.

Thanks in advance.

Answer 1

The problem is that you are mixing both jquery ajax and load function, load function sends an ajax call behind the scenes, so you need to use one of them, not both, so try like:

$(document).on("click", "#btninPartialView", function(e){

        $.ajax({
            url: '@Url.Action("Action", "Controller")',
            type: GET,
            data: {
                id: $("txtinPartialView").val()
            },
            success: function(response){
                $("#mainPageContainer").html(response);
            },
            error: function(){
            }
        });
 });

Answer 2

$(document).on("click", "#btninPartialView", function(e){
var data = $("txtinPartialView").val();

$.ajax({
    url: "/Controller/Action",
    type: GET,
    data: {
        id: data
    },
    success: function(result){
$("#mainPageContainer").html(result);
    }
    error: function(){

})
})

This should work.

Answer 3

Please check with the arguments your Action method is accepting.

for example if signature is

public ActionResult Action1(string name)

then you need to pass the data as

var data = { name :  $("txtinPartialView").val() }