Question

您好我使用jQuery AJAX将数据发送到我的aspx文件。这是我的AJAX：

$(document).ready(function() {
    $('#openmodal').click(function() {
        var id = $(this).attr('data-id');
        $.ajax({
            type: "POST",
            url: "Video.aspx",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data: {
                "videoid": "id"
            },
            dataType: "json",
            success: function(resultData) {
                console.log(resultData);
            },
            error: function(errordata) {
                console.log(errordata);
            }
        });
    });
});

我的aspx.cs

protected void Page_Load(object sender, EventArgs e) {
    string query = Request.QueryString[0];
    if (query != null) {
        if (!IsPostBack) {
            gvShow.DataSource = VideoBL.GetVideo(query);
            gvShow.DataBind();
        }
    }
}

但我一直收到这个错误：

System.ArgumentOutOfRangeException

类型＆＃39; System.ArgumentOutOfRangeException＆＃39;的例外情况发生在   mscorlib.dll但未在用户代码中处理

其他信息：指数超出范围。必须是非负面的   并且小于集合的大小。

Answer 1

1.首先，您需要将data参数更改为指向id变量：

data: {"videoid": id}

2.其次，而不是使用：

string query = Request.QueryString[0];

使用

string query = Request.Form["videoid"];

3.遗憾的是，即使您在上面进行了两次更改，数据绑定逻辑也无法正常工作。您无法通过进行AJAX调用来设置GridView控件的数据源。 / p>

而是更改您的代码以使用服务器端单击事件或更改您的服务器逻辑以将数据返回到AJAX函数，循环并使用jQuery将其附加到GridView。这是一个示例 - { {3}}

代码背后：

public class MyVideo
{
    public int ID { get; set; }
    public string Name { get; set; }
}

public partial class Video : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!Page.IsPostBack)
        {
            gvShow.DataSource = new List<MyVideo> { new MyVideo { ID = 0, Name = "Initial..." } };
            gvShow.DataBind();
        }
    }

    [System.Web.Services.WebMethod]
    public static List<MyVideo> GetVideos(string videoid)
    {
        MyVideo v1 = new MyVideo { ID = 1, Name = "Video 1" };
        MyVideo v2 = new MyVideo { ID = 1, Name = "Video 2" };
        MyVideo v3 = new MyVideo { ID = 3, Name = "Video 3" };

        var videos = new List<MyVideo> { v1, v2, v3 };
        return videos.Where(v => v.ID == 1).ToList();//Hardcoding for simplicity
    }
}

<强> .ASPX：

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('#modal').click(function () {
                var id = $(this).attr('data-id');

                $.ajax({
                    type: "POST",
                    url: "Video.aspx/GetVideos",
                    contentType: "application/json;charset=utf-8",
                    data: '{videoid:"' + id + '"}',
                    dataType: "json",
                    success: function (data) {
                        var videos = data.d;
                        $("#gvShow").empty();

                        for (var i = 0; i < videos.length; i++) {
                            var id = videos[i].ID;
                            var name = videos[i].Name;
                            var tr = "<tr><td>" + id + "</td><td>" + name + "</td></tr>"
                            $("#gvShow").append(tr);
                        }
                        $('#myModal').modal('show');
                    },
                    error: function (errordata) {
                        console.log(errordata);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <a href="#" id="modal" data-id="2">Click me</a>
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">Videos</h4>
                    </div>
                    <div class="modal-body">
                        <asp:GridView ID="gvShow" runat="server">
                        </asp:GridView>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>

<强>输出：

Binding GridView using AJAX

Answer 2

在这个javascript行

data: { "videoid": "id" },

发送字符串"id"，而不是包含id的数字。

所以在这一行

 gvShow.DataSource = VideoBL.GetVideo(query);

你可能打电话给

 gvShow.DataSource = VideoBL.GetVideo("id");

或用空字符串

调用它

 gvShow.DataSource = VideoBL.GetVideo("");

或者我不知道您实际发送的是什么，并且您收到错误消息。

建议，逐行调试您的代码......然后您会发现所有错误以及如何纠正错误

Answer 3

我认为问题在于您尝试从请求查询字符串中获取数据，其中您的数据作为表单发布到服务器，您可以尝试使用

获取发布的数据

string query = Request["videoid"];

这将从cookie，表单，查询字符串或服务器变量中获取数据。或者您只能使用

从发布的表单中获取数据

string query = Request.Form["videoid"];

发布方法json数据并在aspx文件中接收

3 个答案: