Question

基于以下代码...

用户可以通过单独的功能出现并添加任意数量的“支出”。然后我向DOM添加一个新的'li'并自动生成txt ID

<ul id="ulOutgoing">    
    <li>
        <label>Outgoing 1</label><input type="text" id="txtOutGoing0">
    </li>
    <li>
        <label>Outgoing 2</label><input type="text" id="txtOutGoing1">
    </li>
</ul>

在用户路径的末尾，我需要将所有txt值和标签发送到服务器，首先保存到数据库，然后根据提供的数据生成响应。

var OutGoings = {};

$('#ulOutgoing').find('li').each(function () {
    var obj = {};
    obj.text = $(this).find('label').html();
    obj.value = $(this).find('input').val();
    OutGoings.OutGoing = obj;
});

var DTO = { 'OutGoings': OutGoings };

function callBack(response) {
    //Handel my webmethods response
}

ajaxCall(DTO, 'visualise-my-outgoings.aspx/getPieData', callBack, false);

我的web方法需要接受JSON对象并使其可用，这样我就可以遍历txt值和标签并执行一些数据库交互和进一步的逻辑

[WebMethod]
public static string getPieData(OutGoings OutGoings)
{
    //Handel the object
}

public struct OutGoings
{

}

所以......我有两个问题

我是否正在创建正确的JSON对象以推送到我的Web方法

如何在web方法中反序列化对象以及我的'OutGoings'结构应采用什么结构？

Answer 1

您可能需要OutGoing的集合：

public class OutGoing
{
    public string Label { get; set; }
    public string Value { get; set; }
}

页面方法中的

：

[WebMethod]
public static string GetPieData(OutGoing[] outGoings)
{
    // Handle the object

    return "Hello World";
}

最后客户端通过循环遍历li元素来填充此集合：

var outGoings = $('#ulOutgoing li').map(function() {
    return {
        Label: $('label', this).html(),
        Value: $('input', this).val()
    };    
}).toArray();

然后将其发布到页面方法：

$.ajax({
    url: 'visualise-my-outgoings.aspx/GetPieData',
    type: 'POST',
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify({ outGoings: outGoings }),
    success: function(result) {
        // TODO : process the results
        alert(result.d);
    }
});

JSON.stringify方法正确地将javascript数组序列化为JSON字符串。它是原生内置的现代浏览器。如果您需要支持旧版浏览器，则可能需要在页面中加入json2.js脚本。

Answer 2

不要使用结构，使用类。 C＃将为您处理反序列化。你想要这样的东西：

[WebMethod]
public void  getPieData(OutGoings[] outGoings)
{
    // loop over array, interact with db
}

public class OutGoings
{
    public string Text{ get; set; }
    public string Value{ get; set; }
}

在webmethods中序列化JSON

2 个答案: