通过 AJAX 将数据传递给 MVC 中的控制器

Posted 2023-05-08

【中文标题】通过 AJAX 将数据传递给 MVC 中的控制器

【英文标题】：Pass Data by AJAX to Controller in MVC

【发布时间】：2017-09-30 17:53:59

【问题描述】：

我正在尝试将数据传递给控制器​​以进行进一步处理，但我在控制器中得到 null，但是 js (ajax) 的调试无论如何都会显示该数字。可能是什么问题？

阿贾克斯：

 $('.toggler_btn').on('click', function (event)
            
                var id = $(this).attr('data-id');
                    if ($(this).text() === '+') 
                        $.ajax(
                            url: "/List/GetSubItems",
                            type: "POST",
                            contentType: "html",
                            dataType: "text",
                            data: '"id":"' + id + '"', // here it show the data, like 5 or some other number
                            success: function (data)
                            
                                $('.element_wrapper [data-id="' + id + '"]').html(data);
                            
                            )
                        $(this).html('-');
                    
                    else $(this).html('+');
            );

控制器：

  [HttpPost]
    public ActionResult GetSubItems(string id) // here I get null
    
        int pID = 0;
        int.TryParse(id, out pID);
        List<H_Table> list = new List<H_Table>();

        foreach (var item in db_connection.H_Table.Where(i => i.PARENT_ID == pID))
        
            list.Add(item);
        
        return PartialView(list);
    

【问题讨论】：

删除contentType: "html",，只使用data: id: id

contentType : 要发送到服务器的数据类型，其中 dataType 从服务器返回数据的数据类型

【参考方案1】：

$('.toggler_btn').on('click', function (event) 
    var id = $(this).attr('data-id');
    if ($(this).text() === '+') 
        $.ajax(
            url: '/List/GetSubItems',
            type: 'POST',
            dataType: 'json',
            data: '"id":"' + id + '"',
            contentType: 'application/json; charset=utf-8',
            success: function (data) 
                $('.element_wrapper [data-id="' + id + '"]').html(data);
            ,
            error: function (XMLHttpRequest, textStatus, errorThrown) 
                alert("responseText=" + XMLHttpRequest.responseText + "\n textStatus=" + textStatus + "\n errorThrown=" + errorThrown);
            
        );
        $(this).html('-');
    
    else $(this).html('+');
);

使用这个只需复制和粘贴

【讨论】：

这将抛出一个500 Internal Server Error - 该方法返回html，而不是json。

@StephenMuecke 您是否在控制器中获得了“id”的值？你能告诉我你想做什么吗？

它必须是dataType: "html",，因为该方法返回html（可以简单地是data: id: id 并删除contentType选项）

【参考方案2】：

将您的内容类型更改为“文本”并同时更改数据。

【讨论】：

我不需要json，我只需要将数据传递给表单列表并将其传递给部分视图。 Json 不是必需的

然后将您的内容类型更改为“文本”。根据您的评论更新答案

【参考方案3】：

将数据类型更改为“application/json”并将数据更改为此：

   data :
          id : id
   

【参考方案4】：

您的 AJAX 请求已设置 contentType: "html"，但您实际上是在发送 JSON（使用 data: '"id":"' + id + '"'）。您的控制器正在接收string。

所以要么更改您的 AJAX 调用以发送原始字符串：

contentType: "text",
data:  id: id 

...或更新您的控制器以接收 JSON。后者可以通过创建类似这样的东西来实现：

public ActionResult GetSubItems(ViewModel model)

public class ViewModel 
    public string Id  get; set; 

编辑：另外，作为参考，您可能希望查看difference between contentType and dataType。