使用jquery向gridview添加行

Question

最初我的gridview与一个数据绑定，当用户点击添加更多按钮时，我一次通过jquery添加一行到gridview。我的代码工作正常，但问题是当我从客户端通过jquery向gridview添加5行时，当我尝试从服务器端迭代这些行时，GridView1.Rows.Count总是返回一行。所以我的问题是，当从客户端通过jquery添加行时，我无法从服务器端迭代行集合。所以在这里我给出了我的整个代码，并告诉我我能做什么，因此我可以通过jquery添加这些行后从服务器端读取所有行。

ASPX

<script>
     $(document).ready(function () {
        $("#datepicker").datepicker({ 
            dateFormat: 'dd/mm/yy',
            showOn: "both",
            buttonImageOnly: true,
            buttonImage: "images/date_picker.gif",
            buttonText: "Calendar"
         });


        $('#<%=btnAdd.ClientID %>').bind('click', function (event) {
            var $grid = $('#<%=GridView1.ClientID %>');
            var $row = $grid.find('tr:last').clone().appendTo($grid);
            $row.find('select')[0].selectedIndex = 0;
            return false;
        });
    });
</script>

<asp:Button ID="btnAdd" Text="Add More" runat="server" /><br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeader="False">
       <Columns>
           <asp:TemplateField>
               <ItemTemplate>
                   <asp:DropDownList ID="ddlCountry" runat="server">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem>India</asp:ListItem>
                    <asp:ListItem>UK</asp:ListItem>
                    <asp:ListItem>USA</asp:ListItem>
                    <asp:ListItem>Germany</asp:ListItem>
                </asp:DropDownList>



    <asp:DropDownList ID="ddlCity" runat="server">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem>Kolkata</asp:ListItem>
                    <asp:ListItem>Mumbai</asp:ListItem>
                    <asp:ListItem>Delhi</asp:ListItem>
                    <asp:ListItem>Madras</asp:ListItem>
                </asp:DropDownList>
               </ItemTemplate>
           </asp:TemplateField>
       </Columns>
   </asp:GridView>
<br /><br />
<asp:Button ID="Button1" Text="Read gridview Value" runat="server" 
    onclick="Button1_Click" /><br />

服务器端代码

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("ID", typeof(string));
                DataRow dr = dt.NewRow();
                dr["ID"] = "";
                dt.Rows.Add(dr);
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            StringBuilder sb=new StringBuilder();

            //HtmlTable table = (HtmlTable)rpt.Items[0].FindControl("tblSample");

            for (int i = 0; i <= GridView1.Rows.Count - 1; i++)
            {
                string country = ((DropDownList)GridView1.Rows[i].FindControl("ddlCountry")).SelectedItem.Text;
                string city = ((DropDownList)GridView1.Rows[i].FindControl("ddlCity")).SelectedItem.Text;
                sb.Append("Country :- " + country + "  City :- " + city);
            }
            txtData.Text = sb.ToString();
        }

Answer 1

您无法读取从javascript添加的服务器代码中的行。相反，您需要添加服务器代码中的行。因为点击按钮会发回邮件到服务器。 javascript代码中添加的行不会使用viewstate呈现。它不会添加到视图状态。所以在回发它不会呈现。因此无法在javascript上添加它。它只能用于显示目的。您可以使用ajax部分回发来执行此类操作。它完成了更新面板及其触发过程。

use this url for the details with class model