【问题标题】:How to pass a list of id's in a AJAX request to the Server in MVC如何将 AJAX 请求中的 id 列表传递给 MVC 中的服务器
【发布时间】:2015-05-05 12:26:39
【问题描述】:

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

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

我知道 MVC 的模型绑定器在处理 intstringbool 等简单类型时没有问题。

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

我不在乎我是否必须使用arrayList,即使我使用intstrings 的字符串我总是可以转换它们。我只需要它们在服务器上。 我的 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参数。 stackoverflow.com/questions/4402036/…
  • 啊,是的,这敲响了一些钟声!我认为它会有很大帮助,我现在就试试。
  • @aherrick Brilliant 它有效。如果你回答我会接受。我也会为其他人编辑我的解决方案。

标签: javascript ajax asp.net-mvc asp.net-mvc-4 asp.net-mvc-5


【解决方案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 () {
    
            });
        });
    

    您必须确保您的 contentTypeapplication/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?
    • 没有原因,只是为了解锁页面直到收到响应,同步请求可能会暂时锁定浏览器。
    猜你喜欢
    • 1970-01-01
    • 2014-09-16
    • 1970-01-01
    • 2017-02-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-02-02
    • 1970-01-01
    相关资源
    最近更新 更多