将ajax返回的数据绑定到aspx

Question

我有一个 ajax，可以在单击按钮时将参数（值）发送到 C# 中的过程。

$(document).on('click', ".Btn", function () {
    header = $(this).closest('tr').find('.ColumnID').text()
    console.log(Value);   

    $.ajax({
        type: "POST",
        url: "MyAdmin.aspx/GetObject",
        data: JSON.stringify({ 'Value': Value }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
 success: function (data) {
           if(data.d.length>0)
           {
             $.each(data,function(i,values){
             values.id;
             values.name;
             values.value;
             });
           }

        }

        error: function () {
        }
    });
});

WebMethod 接收参数(Value) 并在过程中使用((getObj.getValuesTableAdapter(Value);)。然后通过list 成功返回数据表到ajax( values.id; , values.name; values.value ;)

C#部分：

public class DataForClientSide
    {
        public string id { get; set; }
        public string name { get; set; }
        public string value{ get; set; }
    }
[WebMethod(EnableSession = true)]

    public static DataForClientSide[] GetObject(int Value)
    {
List<DataForClientSide> details = new List<DataForClientSide>();
        LogicTableAdapters.getValuesTableAdapter getObj = new LogicTableAdapters.getValuesTableAdapter();

        DataTable getObj = getObj.getValuesTableAdapter(Value);
        DataTable dtObj = new DataTable();
        dtObj.Columns.AddRange(new DataColumn[4]{ new DataColumn("ObjectID", typeof(string)), new DataColumn("ObjectName", typeof(string)), new DataColumn("ObjectValue", typeof(string)),

                    });

        foreach (DataRow dr in getObj.Rows)
        {
                        DataForClientSide Info= new DataForClientSide();
                        Info.id = dr["ObjectID"].ToString();
                        Info.name = dr["ObjectName"].ToString();
                        Info.value = dr["ObjectValue"].ToString();
                        //multiple data as u want. . . . . 
                        details.Add(Info);

        }
        return details.ToArray();
    }

现在我需要将那些返回到 ajax 的值（id、name、value）绑定到 aspx。 这是我的 aspx 代码。

 <asp:GridView ID="gvMyObjects" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" CssClass="GridView" AutoPostBack="False"  AutoGenerateColumns="False" >

            <AlternatingRowStyle BackColor="White" />
            <Columns>

                <asp:TemplateField>
                    <ItemTemplate>
  <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
                        <button class="myBtn" id="Button1" type="button" data-toggle="modal" data-target="#myModal" style="vertical-align: middle" onserverclick="Button1_click"   OnClientClick="return false;" runat="server" ><span>Select</span></button>
 </ContentTemplate>
    </asp:UpdatePanel>
                    </ItemTemplate>
                </asp:TemplateField>

                <asp:TemplateField HeaderText="ID" >
                    <ItemTemplate>
                        <asp:Label ID="ID" runat="server" class="ObjekatID" Width="118px" Height="36px"  style="text-align:center" Font-Names="Georgia"  margin-Left="100px"  Text='<%# Bind("ID") %>'></asp:Label>


                    </ItemTemplate>
                </asp:TemplateField>
                 <asp:TemplateField HeaderText="Name">
                    <ItemTemplate>

                        <asp:Label ID="Name" runat="server" Width="118px" Height="26px" style="text-align:center" Font-Names="Georgia" margin-Left="100px" Text='<%# Bind("Name") %>'></asp:Label>

                    </ItemTemplate>
                </asp:TemplateField>
                  <asp:TemplateField HeaderText="Value">
                    <ItemTemplate>

                        <asp:Label ID="Value" runat="server" Width="118px" Height="26px" style="text-align:center" Font-Names="Georgia" margin-Left="100px" Text='<%# Bind("Value") %>'></asp:Label>

                    </ItemTemplate>
                </asp:TemplateField>

            </Columns>


        </asp:GridView>

有人可以帮我解决这个绑定部分的代码吗？ 我想我需要在 ajax 中做点什么。

返回json。在必须显示的表格中，一行 0，第二行 1，第三行 2...。

d   […]
0   {…}
ID  Name
Name    ObjectNameZero
Value   Somevalue

1   {…}
ID  1
Name    ObjectNameOne
Value   MyValus1
2   {…}
ID  2
Name    ObjectNameTwo
Value   MyValus2
3   {…}    
ID  3
Name    ObjectNameThree
Value   MyValus3

提前致谢！

Answer 1

您可以像这样在您的 ajax 成功函数中使用简单的 tr td append

$(document).on('click', ".Btn", function () {
    header = $(this).closest('tr').find('.ColumnID').text()
    console.log(Value);   

    $.ajax({
        type: "POST",
        url: "MyAdmin.aspx/GetObject",
        data: JSON.stringify({ 'Value': Value }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
 success: function (data) {
           if(data.d.length>0)
           {
             var newRows="";
             $.each(data,function(i,values){
             values.id;
             values.name;
             values.value;
             newRows +="<tr><td>"+values.id+"</td><td>"+values.name+"</td><td>"+values.value+"</td></tr>";
             });
             $("#gvMyObjects").append(newRows);
           }

        }

        error: function () {
        }
    });
});

您需要决定如何显示返回值，因为它在每个函数中只显示最后一次迭代的值。

Answer 2

GridView 本身就是一个表格元素。如果您想将数据与表中的现有数据追加，请使用<tr> 和<td> 标记来构建额外的行：

$.ajax({
    type: "POST",
    url: "MyAdmin.aspx/GetObject",
    data: JSON.stringify({ 'Value': Value }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        if (data.d.length > 0) {
            $.each(data, function (i, values) {
                // build table data
                $('#gvMyObjects').append('<tr><td>' + values.ID + 
                  '</td><td>' + values.Name + '</td><td>' + 
                  values.Value + '</td></tr>');
            });
        }
    }
    error: function () {
    }
});

如果要将所有现有数据替换为新数据，请在从响应创建行之前添加 empty() 方法：

$.ajax({
    type: "POST",
    url: "MyAdmin.aspx/GetObject",
    data: JSON.stringify({ 'Value': Value }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $('#gvMyObjects').empty(); // remove all rows

        // append new header and rows
        if (data.d.length > 0) {
            $('#gvMyObjects').append('<tr><th>ID</th><th>Name</th><th>Value</th></tr>');

            $.each(data, function (i, values) {
                // build table data
                $('#gvMyObjects').append('<tr><td>' + values.ID + 
                  '</td><td>' + values.Name + '</td><td>' + 
                  values.Value + '</td></tr>');
            });
        }
    }
    error: function () {
    }
});

如果由于GridView 的客户端 ID 与服务器 ID 不同，网格选择器不起作用，请使用 $('#<%= gvMyObjects.ClientID %>') 或设置 ClientIDMode="Static"。

Answer 3

您可以将数据发布到将执行所需逻辑的处理程序，然后呈现并返回您已经在使用的网格视图。然后，您将不得不用新渲染的网格替换旧网格