JavaScript、页面方法和 Gridview

Question

我现在知道如何在 JavaScript 和 ASP.Net (VB.Net) 中使用页面方法，但它仅限制我进行单次插入。我的问题是当我将 GridView 中的列项目批量插入数据库时​​。它不起作用，不幸的是，它没有说任何错误。这是我到目前为止所拥有的:

服务器端代码(VB)

<WebMethod()> _
    <ScriptMethod()> _
    Public Shared Sub SavetoDB(ByVal ans As Answers)
            Dim constr As String = ConfigurationManager.ConnectionStrings("CCQTConnectionString").ConnectionString
            Using con As New SqlConnection(constr)
                Using cmd As New SqlCommand("INSERT INTO tblApplicantAns (Appnr, QID, answer) VALUES(@Appnr, @QID, @ans)")
                    cmd.CommandType = CommandType.Text
                    cmd.Parameters.AddWithValue("@Appnr", ans.appnr)
                    cmd.Parameters.AddWithValue("@QID", ans.qid)
                    cmd.Parameters.AddWithValue("@ans", ans.ans)
                    cmd.Connection = con
                    con.Open()
                    cmd.ExecuteNonQuery()
                    con.Close()
                End Using
            End Using
        End Sub

Public Class Answers
    Public Property qid() As String
        Get
            Return _qid
        End Get
        Set(ByVal value As String)
            _qid = value
        End Set
    End Property
    Private _qid As String
    Public Property ans() As String
        Get
            Return _ans
        End Get
        Set(ByVal value As String)
            _ans = value
        End Set
    End Property
    Private _ans As String
    Public Property appnr() As String
        Get
            Return _appnr
        End Get
        Set(ByVal value As String)
            _appnr = value
        End Set
    End Property
    Private _appnr As String

JavaScript (AJAX)

$(function () {

var gvDrv = document.getElementById("<%= grdQ.ClientID %>");
           for (i=1; i<gvDrv.rows.length; i++)
           {
             var cell = gvDrv.rows[i].cells;
             var q = cell[0].innerHTML;
             var a = cell[1].innerHTML;

                $("[id*=Button1]").bind("click", function () {
                    var ans = {};
                    ans.appnr = $("[id*=TextBox1]").val();
                    ans.qid = $(" + q + ").val();
                    ans.ans = $(" + a + ").val();
                    $.ajax({
                        type: "POST",
                        url: "English.aspx/SavetoDB",
                        data: '{ans: ' + JSON.stringify(ans) + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            alert("Time is up! Exam will proceed to next module.");
                            window.location = "Conf_English.aspx";
                        }
                    });
                    return false;
                });
            });
}

Answer 1

由于整个网格只有一个保存按钮，因此您的客户端脚本逻辑是倒退的。您将希望在按钮的单击事件处理程序中循环遍历网格的每一行，而不是相反；像这样:

$(document).ready(function() {
    $("[id*=Button1]").bind("click", function() {
        var gvDrv = document.getElementById("<%= grdQ.ClientID %>");
        for (i = 1; i < gvDrv.rows.length; i++) {
            var cell = gvDrv.rows[i].cells;
            var q = cell[0].innerHTML;
            var a = cell[1].innerHTML;

            var ans = {};
            ans.appnr = $("[id*=TextBox1]").val();
            ans.qid = $(" + q + ").val();
            ans.ans = $(" + a + ").val();
            $.ajax({
                type: "POST",
                url: "English.aspx/SavetoDB",
                data: '{ans: ' + JSON.stringify(ans) + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert("Time is up! Exam will proceed to next module.");
                    window.location = "Conf_English.aspx";
                }
            });
        }

        return false;
    });
});

现在，您不需要为网格中的每一行调用页面方法，而是需要将值数组而不是单个值传递给服务器端 ASP.NET AJAX 页面方法。为了利用您已经定义的 Answers 类，我们可以构建一个 JavaScript 对象数组，这些对象的属性值与您的类中的属性名称相匹配(即 qid 、ans 等)；像这样:

$(document).ready(function() {
    $("[id*=Button1]").bind("click", function() {
        var gvDrv = document.getElementById("<%= grdQ.ClientID %>");

        // Create array to hold x number of Answers instances
        var answers = new Array();

        // Loop through rows of grid
        for (i = 1; i < gvDrv.rows.length; i++) {
            var cell = gvDrv.rows[i].cells;
            var q = cell[0].innerHTML;
            var a = cell[1].innerHTML;

            // Build one answer object per row
            var ans = {};
            ans.appnr = $("[id*=TextBox1]").val();
            ans.qid = $(" + q + ").val();
            ans.ans = $(" + a + ").val();

            // Add single answer to array of answer objects
            answers.push(ans);
        }

        // Make one call to ASP.NET AJAX Page Method passing in array of answer values
        $.ajax({
            type: "POST",
            url: "English.aspx/SavetoDB",
            data: '{ans: ' + JSON.stringify(answers) + '}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                alert("Time is up! Exam will proceed to next module.");
                window.location = "Conf_English.aspx";
            }
        });

        return false;
    });
});

最后，在 ASP.NET AJAX 页面方法的服务器端，您需要处理 Answers 对象列表，而不是单个 Answers对象，如下所示:

<WebMethod()> _
<ScriptMethod()> _
Public Shared Sub SavetoDB(ByVal ans As List(Of Answers))
    Dim constr As String = ConfigurationManager.ConnectionStrings("CCQTConnectionString").ConnectionString

    ' Loop through each Answers object here
    For Each answer As Answers In ans   
        Using con As New SqlConnection(constr)
            Using cmd As New SqlCommand("INSERT INTO tblApplicantAns (Appnr, QID, answer) VALUES(@Appnr, @QID, @ans)")
                cmd.CommandType = CommandType.Text
                cmd.Parameters.AddWithValue("@Appnr", answer.appnr)
                cmd.Parameters.AddWithValue("@QID", answer.qid)
                cmd.Parameters.AddWithValue("@ans", answer.ans)
                cmd.Connection = con
                con.Open()
                cmd.ExecuteNonQuery()
                con.Close()
            End Using
        End Using
    Next
End Sub