如何使用带有单选按钮的AJX post方法将detailClass列表绑定到gridview

how can I bind detailClass list to gridview using AJX post method with a radio button?

本文关键字:detailClass 列表 绑定 gridview 方法 post 何使用 单选按钮 AJX      更新时间:2023-09-26

我有一个带有列和单选按钮的网格,我想使用Ajax Post方法将数据绑定到它。。但当我这样做的时候,单选按钮就消失了。。我想在网格视图中显示列表,每行都有单选按钮供选择。。

$(document).ready(function () {
            BindGridView();
        });
        function BindGridView() {
            $.ajax({
                type: "POST",
                url: "CultureHeritage.aspx/GetData",
                contentType: "application/json;charset=utf-8",
                data: {},
                dataType: "json",
                success: function (data) {
                    alert(data.d); //list is here..complete table
                    if (data.d.length > 0) {
                        
                        for (var i = 0; i < data.d.length; i++) {
                            $("#carServiceGridView").append("<tr><td></td> <td>" +
                            data.d[i].CarServiceId + "</td> <td>" +
                            data.d[i].CarServiceName + "</td> <td>" +
                            data.d[i].Address + "</td> <td>" +
                            data.d[i].Contact1 + "</td><td>" +
                            data.d[i].Contact2 + "</td><td>" +
                            data.d[i].MinimumPrice + "</td><td>" +
                            data.d[i].MaximumPrice + "</td><td>" +
                            data.d[i].NoOfCar + "</td><td>" +
                            data.d[i].CarType + "</td></tr>");
                        }
                    }
                },
                error: function (result) {
                    //alert("Error login");
                }
            });
        }
<asp:GridView ID="carServiceGridView" runat="server" ClientIDMode="Static" AutoGenerateColumns="False" DataKeyNames="CarServiceId" Width="100%" Height="100%" AlternatingRowStyle-BackColor="WhiteSmoke">
                <Columns>
                      <asp:TemplateField  HeaderText="Select">
                <ItemTemplate>
                    <asp:RadioButton ID="carServiceGridViewRadioButton" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
               
                    <asp:BoundField DataField="CarServiceId" HeaderText="Id  " />
                    <asp:BoundField DataField="CarServiceName" HeaderText="Service  " />
                    <asp:BoundField DataField="Address" HeaderText="Address  " />
                    <asp:BoundField DataField="Contact1" HeaderText="Contact 1  " />
                    <asp:BoundField DataField="Contact2" HeaderText="Contact 2  " />
                    <asp:BoundField DataField="MinimumPrice" HeaderText="Minimum Price  " />
                    <asp:BoundField DataField="MaximumPrice" HeaderText="Maximum Price  " />
                    <asp:BoundField DataField="NoOfCar" HeaderText="No Of Car  " />
                    <asp:BoundField DataField="CarType" HeaderText="Car Types  " />
                </Columns>
            </asp:GridView>
        

当您是appending时,需要添加radio按钮——ajaxsuccessgirdview中的rows

当前添加行时,添加一个空的td,因此不会显示单选按钮。

试试这个

$("#carServiceGridView").append("<tr><td><input type='radio' value='someValue' id='carServiceGridViewRadioButton"+i+"' onchange='RadioButtonSelectOne(this)' /></td> <td>" +
                        data.d[i].CarServiceId + "</td> <td>" +
                        data.d[i].CarServiceName + "</td> <td>" +
                        data.d[i].Address + "</td> <td>" +
                        data.d[i].Contact1 + "</td><td>" +
                        data.d[i].Contact2 + "</td><td>" +
                        data.d[i].MinimumPrice + "</td><td>" +
                        data.d[i].MaximumPrice + "</td><td>" +
                        data.d[i].NoOfCar + "</td><td>" +
                        data.d[i].CarType + "</td></tr>");