Привязать возвращенные данные из ajax в aspx

Question

У меня есть ajax, который отправляет параметр (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 () {
        }
    });
});

Параметр (Value) принимается WebMethod и используется в процедуре ((getObj.getValuesTableAdapter (Value);). Список данных через список успешно возвращается в ajax (values.id; values.name; values.value;)

C # part:

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();
    }

Теперь мне нужносвязать те значения (id, name, value), которые возвращаются в ajax, в 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

Вы можете отправить данные в обработчик, который будет выполнять необходимую логику, а затем отобразить и вернуть представление сетки, которое вы уже используете.Затем вам придется заменить старую сетку на новую визуализированную

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 имеет идентификатор клиента, отличный от идентификатора сервера, используйте $('#<%= gvMyObjects.ClientID %>') или установите ClientIDMode="Static".

Answer 3

Вы можете использовать простое tr td добавление внутри вашей успешной функции ajax, например:

$(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 () {
        }
    });
});

Вам нужно решить, как вы хотите отобразить возвращаемые значения, как они есть внутри каждой функции, которая будет отображатьтолько последние итерированные значения.