将返回的数据从ajax绑定到aspx

Question

我有一个ajax，在单击按钮时将paramether（Value）发送到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接收参数（值）并在过程中使用（（getObj.getValuesTableAdapter（Value）;）。然后将通过列表的数据表成功返回给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，第二行1，第二...第二行。

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

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

Answer 3

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" 。