处理此 jquery ajax 请求的 web 方法的正确签名是什么？

Question

我的 webmethod 需要什么签名才能将“paramlist”作为参数传递？

<script type="text/javascript">
    $(document).ready(function () {
        var slider = $('.slider').slider({
            range: "min",
            min: 0,
            max: 100,
            change: function (e, ui) {
                var set = new Array();

                var values = $('.slider').each(function () {
                    var s = $(this);
                    var data = {
                        Name: s.attr('itemName'),
                        SelectedIndex: s.slider("option","value"),
                        Description: "this is the description",
                        CalculatedValue: 0
                    }

                    set.push(data);    
                });

                CallPageMethod("SliderChanged", set, successful, failure);
            },
            slide: function (e, ui) {
                var point = ui.value;
                $("#selected_value").html(point);
                // var width = 100 - point;
                // $("#range").css({ "width": point + "%" });
            }
        });

        function CallPageMethod(methodName, paramArray, onSuccess, onFail) {
            //get the current location
            var loc = window.location.href;
            loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "default.aspx" : loc;

            //call the page method
            $.ajax({
                type: "POST",
                url: loc + "/" + methodName,
                data:  JSON.stringify(paramArray),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: onSuccess,
                fail: onFail
            });
        }

        function successful(response) {
            var lbl = $('#<%= Label1.ClientID %>')
            lbl.html("Your report is now ready for download.");
            alert(response.d);
        }

        function failure(response) {
            alert("An error occurred.");
        }
    });
</script> 

我试过了：

[WebMethod]
public static string SliderChanged(MyModel[] values)
{
    return "success";
}

在哪里

public class MyModel
{
   public string Name {get;set;}
   public string Description {get;set;}
   public int SelectedIndex{get;set;}
   public int CalculatedValue(get;set;}
}

它失败了。

你能看出我的错误吗？

Answer 1

好的，让我们简化一下，因为这些字符串连接很丑陋。一旦在服务器上复制相同的结构，就很容易实现这一点。

所以我们假设您想将以下 javascript 对象发送到服务器：

var myObject = { a: { one: 1, two: 2 }, b: [1, 2, 3] };

您将定义匹配此签名的类：

public class MyModel
{
    public Foo A { get; set; }
    public int[] B { get; set; }
}

public class Foo
{
    public int One { get; set; }
    public int Two { get; set; }
}

并且有一个网络方法：

[WebMethod]
public string SomeMethod(MyModel model)
{
    ...
}

你会像这样调用它：

var myObject = { a: { one: 1, two: 2 }, b: [1, 2, 3] };
$.ajax({
    url: '/SomeService.asmx/SomeMethod',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(myObject),
    success: function(result) {
        // Notice the .d property here. That's specific to ASP.NET web methods, 
        // which wrap the response using this property, like this:
        // { d: ... }
        alert(result.d);
    }
});

注意JSON.stringify 方法。它将 javascript 对象转换为 JSON 字符串表示。此方法本机内置于现代 Web 浏览器中，但如果您需要支持旧版浏览器，您可以在页面中包含 json2.js，这将测试浏览器是否本机支持该方法并使用它，或者它是否不提供替代实现。

另一个例子，如果你想发送一个对象数组，像这样：

var myObject = [
    { a: { one: 1, two: 2 }, b: [1, 2, 3] },
    { a: { one: 5, two: 9 }, b: [7, 3, 4] },
    { a: { one: 3, two: 0 }, b: [3, 9, 3] },
]

那么您的网络方法将如下所示：

[WebMethod]
public string SomeMethod(MyModel[] model)
{
    ...
}

有了这些知识，您可以非常轻松地在 javascript 和 Web 方法之间交换数据结构。