Add rows to gridview using jquery

问题

initially my gridview is bind with one data and when user click on add more button then i add one row at a time to gridview by jquery. my code is working fine but the problem is when i added 5 rows to gridview from client side by jquery and when i try to iterate in those rows from server side then GridView1.Rows.Count always return one row. so my problem is i am not being able to iterate in rows collection from server side when rows are added from client side by jquery. so here i am giving my whole code and just tell me what i can do as a result i will be able to read all rows from server side after adding those rows by 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 />

ServerSide Code

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

回答1:

you cannot read the rows in the server code that added from the javascript. Instead you need to add the rows from the server code. Because on clicking on the button it happens the post back to the server. the rows added on the javascript code willnot renderd using viewstate. it willnot added on the viewstate. so on the postback it willnot rendered. So it is not possible to add it on javascript. It can use only for a display purpose. You can use ajax partial post back for this kind of actions. its done with update panel and its triggering process.

use this url for the details with class model

来源：https://stackoverflow.com/questions/15110427/add-rows-to-gridview-using-jquery

标签

jquery

ASP.NET

gridview