如何使用ajax调用MVC部分视图中的按钮单击操作方法?

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.

我新到MVC。我遇到了这样的情况:我需要在单击按钮时将一个参数从视图传递给控制器(按钮在部分视图中)，然后在同一页面中呈现另一个部分视图。

Steps followed:

步骤是:

1. I used jquery button click event for the button of partial view.
2. 我使用jquery按钮为部分视图按钮点击事件。
3. I made an ajax call to pass the parameters from my view to the controller.
4. 我做了一个ajax调用，将参数从视图传递给控制器。

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.

问题:问题是，在action方法中接收到的数据为null。

Please let me know if I'm missing anything.

如果我遗漏了什么，请告诉我。

Thanks in advance.

提前谢谢。

3 个解决方案

#1

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

这应该工作。

#2

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

#3

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:

问题是，您正在混合jquery ajax和load函数，load函数在后台发送一个ajax调用，所以您需要使用其中的一个，而不是同时使用两个，请尝试如下:

$(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(){
            }
        });
 });