JQuery - 将元素的坐标传递给后面的 ASP.NET 代码？答案

【问题标题】：JQuery - Pass coordinates of element to ASP.NET code behind?JQuery - 将元素的坐标传递给后面的 ASP.NET 代码？
【发布时间】：2012-06-01 02:26:00
【问题描述】：

我正在尝试创建一个简单的 ASP.NET 站点，该站点将使用 JQuery 提供的 offset 或 position 函数通过按钮将 <div> 元素的坐标传递给后面的 ASP.NET 代码OnClick 方法。

我搜索并找到了this example，但它似乎没有按预期工作，点击后没有返回坐标。

如何获取给定 <div> 元素的坐标并将其传递给 ASP.NET 按钮的 OnClick 方法？

【问题讨论】：

什么不起作用？该页面看起来像是在设置隐藏字段的值。您是否检查了代码隐藏中的隐藏字段？
你先点击按钮了吗？
你调试过后面的代码吗？这个例子似乎还可以。并在此处发布您的代码。

标签： c# jquery asp.net html jquery-ui

【解决方案1】：

第 1 部分
要获取元素的位置，您可以使用 offset() 或 position()

小提琴：http://jsfiddle.net/XFfLP/

function test() {
    var p = $("#testID");
    var position = p.offset();//p.position()
    $("#Field1").val(position.top);
    $("#Field2").val(position.left);
}

第 2 部分
要将数据从页面传递到服务器代码隐藏，您可以使用Web-Methods

文章：http://blog.nitinsawant.com/2011/09/draft-sending-client-side-variables-to.html

1. Web-Method 示例代码：

[System.Web.Services.WebMethod]
 public static string AcceptData(object jsonData)
 {
     Customer newCust =(Customer)JsonConvert.DeserializeObject(jsonData.ToString(),typeof(Customer));
     return "Server response: Hello "+newCust.FirstName;
 }

2. JS示例代码：

var newCustomer = {
    "FirstName": $("#txtFirstName").val(),
    "LastName": $("#txtLastName").val(),
    "Telephone": $("#txtTelephone").val()
}

var jsonData = "{'jsonData':'" + JSON.stringify(newCustomer) + "'}";//create string representation of the js object

        //post data to server
        $.ajax({
            type: "POST",
            url: 'Test.aspx/AcceptData',
            data: jsonData,
            contentType: "application/json; charset=utf-8",
            dataType: ($.browser.msie) ? "text" : "json",
            success: function(msg) {
                //call successfull
                var obj = msg.parseJSON();
                alert(obj.d); //d is data returned from web services

                //The result is wrapped inside .d object as its prevents direct execution of string as a script
            },
            error: function(xhr, status, error) {
                //error occurred
                alert(xhr.responseText);
            }
        });

【讨论】：