如何将 AJAX 请求中的 id 列表传递给 MVC 中的服务器

Posted 2023-02-22

【中文标题】如何将 AJAX 请求中的 id 列表传递给 MVC 中的服务器

【英文标题】：How to pass a list of id's in a AJAX request to the Server in MVC

【发布时间】：2015-05-05 12:26:39

【问题描述】：

在 MVC 中对服务器的 AJAX 请求中，如何将 id 列表传递给控制器​​的操作函数？

我接受使用或不使用 html 帮助程序。

我知道 MVC 的模型绑定器在处理 int、string 和 bool 等简单类型时没有问题。

是不是我必须在动作中使用和数组？

我不在乎我是否必须使用array 或List，即使我使用int 或strings 的字符串我总是可以转换它们。我只需要它们在服务器上。 我的 List ids 目前为 null。

javascript：

var ids= [1,4,5];
// ajax request with ids..

MVC 动作：

public ActionResult ShowComputerPackageBuffer(List<int> ids) // ids are null

    // build model ect..
    return PartialView(model);

编辑：添加了我的 AJAX 请求

$(document).ready(function () 
    $('#spanComputerPackagesBuffer').on('click', function () 
        var ids = $('#divComputerPackagesBuffer').data('buffer');
        console.log('bufferIds: ' + bufferIds);
        var data = 
            ids: ids
        ;

        var url = getUrlShowComputerPackageBuffer();
        loadTable(url, "result", data);
    );
);

// AJAX's
function loadTable(url, updateTargetId, data) 
    var promise = $.ajax(
        url: url,
        dataType: "html",
        data: data
    )
    .done(function (result) 
        $('#' + updateTargetId).html(result);
    )
    .fail(function (jqXhr, textStatus, errorThrown) 
        var errMsg = textStatus.toUpperCase() + ": " + errorThrown + '. Could not load HTML.';
        alert(errMsg);
    );
;

// URL's
function getUrlShowComputerPackageBuffer() 
    return '@Url.Action("ShowComputerPackageBuffer", "Buffer")';
;

解决方案：//感谢@aherrick 评论。我错过了古老的“传统”

$.ajax(
    type: "POST",
    url: '@Url.Action("ShowComputerPackageBuffer", "Buffer")',
    dataType: "json",
    traditional: true,
    data: 
        bufferIds: bufferIds
    
);

【问题讨论】：

您能展示一下您是如何发出 AJAX 请求的吗？

@OmriAharon 确定一会儿

使用traditional参数。 ***.com/questions/4402036/…

啊，是的，这敲响了一些钟声！我认为它会有很大帮助，我现在就试试。

@aherrick Brilliant 它有效。如果你回答我会接受。我也会为其他人编辑我的解决方案。

【参考方案1】：

使用traditional参数并将其设置为true。

$.ajax(
    type: "POST",
    url: "/URL",
    dataType: "json",
    traditional: true,
    data: 
);

【参考方案2】：

试试这个（我已经检查过了）：

$(function () 
        var ids = [1, 4, 5];
        $.ajax(
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: '@Url.Action("YourAction", "YourController")',
            data: JSON.stringify(  ids: ids )
        ).done(function () 

        );
    );

您必须确保您的 contentType 是 application/json 并且您的数据是字符串化的。

【讨论】：

我试过了，服务器上的bufferIds（或ids）仍然为空。你的动作签名是什么样的？

【参考方案3】：

public ActionResult SaveSomething(int[] requestData) 
//or
public ActionResult SaveSomething(IEnumerable<int> requestData)

使用 Action Result 您无法接收 JSON 对象：

使用控制器：

[HttpPost]
    [Route( "api/Controller/SaveSomething" )]
    public object SaveTimeSheet( int[] requestData )
    
        try
        
            doSomethingWith( requestData );

            return new
            
                status = "Ok",
                message = "Updated!"
            ;
        
        catch( Exception ex )
        
            return new
            
                status = "Error",
                message = ex.Message
            ;
        

java脚本：

var ids = [1,4,5];
var baseUrl: 'localhost/yourwebsite'
$.ajax(
                    url: baseUrl + '/api/Controller/SaveSomething',
                    type: 'POST',
                    data: JSON.stringify(ids),
                    dataType: 'json',
                    contentType: 'application/json',
                    error: function (xhr) 
                        alert('Error: ' + xhr.statusText);
                    ,
                    success: function (result) 
                        if (result != undefined) 
                            window.location.href = window.location.href;
                        
                    ,
                    async: false,
                );

【讨论】：

为什么在这种情况下使用 async:false？

没有原因，只是为了解锁页面直到收到响应，同步请求可能会暂时锁定浏览器。