jQuery填充的Gridview在回发时丢失数据

Question

我有一个使用 javascript (jQuery) 填充客户端的 gridview，我需要在回发时将数据发送到服务器。显然，客户端处理的任何数据在正常回发时都会丢失，因此需要寻找在回发时保留客户端数据的最佳方法。

我的每月付款计划的 jQuery 代码（完美运行）：

totalmonths = moment(paymentbydate).diff(today, 'month');
var totalamount = ((amountdue / totalmonths) + ((amountdue / totalmonths) * processingfee));

var weeklyamount = toFixed(amountdue / totalmonths, 2);
var paymentprocessingfee = toFixed((amountdue / totalmonths) * processingfee, 2);
var lastpayment = 0;
totalamount = toFixed(parseFloat(weeklyamount) + parseFloat(paymentprocessingfee), 2); //(amountdue/totalweeks) + ((amountdue / totalweeks) * processingfee);

// Add first payment to grid
$("#<%=GridView_PaymentSchedule.ClientID%>").append("<tr><td>" + todaydate + "</td><td>" + weeklyamount + "</td><td>" + paymentprocessingfee + "</td><td>" + totalamount + "</td></tr>");
// Add second payment, startdate, to grid
var nextdate = moment(datevalue, 'MM/DD/YYYY').add(1, 'months').format('MM/DD/YYYY');
$("#<%=GridView_PaymentSchedule.ClientID%>").append("<tr><td>" + datevalue + "</td><td>" + weeklyamount + "</td><td>" + paymentprocessingfee + "</td><td>" + totalamount + "</td></tr>");

var totalpaymentsmade = parseFloat(totalamount) * 2;
// Total up payment so you can calculate overage/underpayment if any
// add all subsequet payments until paid in full
for (i = 0; i < (totalmonths - 2) ; i++) {
    totalpaymentsmade = totalpaymentsmade + parseFloat(totalamount); // Total up the next payment
    var nextpayment  = toFixed(totalpaymentsmade - amountduewithfee, 2);
    if (nextpayment == 0) {
        $("#<%=GridView_PaymentSchedule.ClientID%>").append("<tr><td>" + nextdate + "</td><td>Final Payment: " + weeklyamount + "</td><td>" + paymentprocessingfee + "</td><td>" + totalamount + "</td></tr>");
        break;
    } else {
        $("#<%=GridView_PaymentSchedule.ClientID%>").append("<tr><td>" + nextdate + "</td><td>" + weeklyamount + "</td><td>" + paymentprocessingfee + "</td><td>" + totalamount + "</td></tr>");
    }
    nextdate = moment(nextdate, 'MM/DD/YYYY').add(1, 'months').format('MM/DD/YYYY');
    numpayments += 1;
    // check if next payment is overpayment or underpayment but under payment amount
    lastpayment = toFixed(amountduewithfee - totalpaymentsmade, 2);
    if (totalpaymentsmade > amountduewithfee) {
        $("#<%=GridView_PaymentSchedule.ClientID%>").append("<tr><td>" + nextdate + "</td><td>Final Payment</td><td>0</td><td>" + lastpayment + "</td></tr>");
        break;
    } else if ((amountduewithfee - totalpaymentsmade) < amountduewithfee && (amountduewithfee - totalpaymentsmade) < totalamount) {
        $("#<%=GridView_PaymentSchedule.ClientID%>").append("<tr><td>" + nextdate + "</td><td>Final Payment</td><td>0</td><td>" + lastpayment + "</td></tr>");
        break;
    } else if (totalpaymentsmade == amountduewithfee) {
        $("#<%=GridView_PaymentSchedule.ClientID%>").append("<tr><td>" + nextdate + "</td><td>Final Payment</td><td>0</td><td>" + lastpayment + "</td></tr>");
        break;
    }
}

更新： 经过一些研究，似乎处理这种情况的最佳方法是使用 ajax 通过我所做的 web 方法将数据发布到服务器，但现在当我使用字符串数组数组调用该方法时，它执行时没有错误但是服务器端没有收到数据，我得到一个空列表。

我的 ajax 调用：

$.ajax({
    type: "POST",
    url: "PaymentPlan.aspx/SaveGridViewData",
    data: '{pPayments: ' + JSON.stringify({ payments: payments }) + '}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    traditional: true,
    success: function (response) {
    alert("Data sucessfully transmited.");
        window.location.reload();
    },
    error: function (response) {
        alert("Data not transmited: error = " + response.responseText);
    }
});

payments 是一个数组数组，[date,amount,fee,total]，所有字符串都是为了让事情变得简单。

后面的代码： 我保持简单，我在x += 1 上放了一个断点来检查参数。

<WebMethod()> _
Public Shared Sub SaveGridViewData(ByVal pPayments As List(Of String()))
    Dim x As Integer
    x += 1
End Sub

结果是 pPayments 是一个空列表，我试过pPayments as List(of string)，结果相同。我还尝试使用四个属性和一个无参数构造函数和一个带参数的构造函数创建一个支付类，我得到no parameterless constructor defined for this object。显然我不明白这个问题。有人有什么建议吗？

Answer 1

好的，我想通了。我改变了构造 JSON 对象的方式，而不是数组数组，而是构造对象数组：

jQuery (ajax) 代码：

var thepayment = new Array();

// Pull the data out of the gridview
$('[id*=GridView_PaymentSchedule]').find('tr:has(td)').each(function () {
    var obj = new Object;
    obj.paymentdate = $(this).find('td').eq(0)[0].innerHTML;
    obj.amount = $(this).find('td').eq(1)[0].innerHTML;
    obj.processingfee = $(this).find('td').eq(2)[0].innerHTML;
    obj.totalamount = $(this).find('td').eq(3)[0].innerHTML;

    thepayment.push(obj);
});

// This is the line of code that made the difference
// DTO stands for Data Transfer Object
// Then you JSON stringify it, not all at once.

// This DOES NOT work:
// '{pPayments: ' + JSON.stringify({ payments: thepayment }) + '}'

// This does:
var DTO = { 'pPayments': thepayment };

$.ajax({
    type: "POST",
    url: "PaymentPlan.aspx/SaveGridViewData",
    data: JSON.stringify(DTO), // '{pPayments: ' + JSON.stringify({ payments: thepayment }) + '}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    traditional: true,
    success: function (response) {
        alert("Data sucessfully transmited.");
        window.location.reload();
    },
    error: function (response) {
        alert("Data not transmited: error = " + response.responseText);
    }

});

支付类：

Public Class payments
    Public Sub New()
        MyClass.New("", "", "", "")
    End Sub
    Public Sub New(ByVal pPaymentdate As String, ByVal pAmount As String, ByVal pProcessingfee As String, ByVal pTotalamount As String)
        paymendate = pPaymentdate
        amount = pAmount
        processingfee = pProcessingfee
        totalamount = pTotalamount
    End Sub

    Public Property paymendate As String

    Public Property amount As String

    Public Property processingfee As String

    Public Property totalamount As String

End Class

网络方式：

<WebMethod()> _
Public Shared Sub SaveGridViewData(ByVal pPayments As List(Of payments))
    ' Do Stuff
End Sub