添加行使用jquery的GridView [英] Add rows to gridview using jquery
问题描述
最初我的GridView控件绑定上添加更多按钮，然后我在同一时间通过jQuery来GridView控件添加一行一个数据，当用户点击。我的code工作正常，但问题是，当我加入5行的GridView从客户端的jQuery，当我尝试从服务器端则这些行遍历 GridView1.Rows.Count 总是返回一行。所以我的问题是我没有能够从服务器端的rows集合遍历时行从客户端的jQuery补充说。所以在这里我给我的整个code，只是告诉我，我可以作为一个结果，我就能jQuery的通过添加这些行后，读取服务器端的所有行做的。
ASPX
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（＃日期选择器）。日期选择器（{
DATEFORMAT：'DD / MM / YY'，
showOn：既
buttonImageOnly：真实，
按钮画面：图像/ date_picker.gif
buttonText：日历
}）;
$（'＃＆LT;％= btnAdd.ClientID％GT;'）。绑定（点击，函数（事件）{
变量$ =格$（'＃＆LT;％= GridView1.ClientID％GT;'）;
。变量$行= $ grid.find（'TR：去年'）的clone（）appendTo（$网格）。
$ row.find（'选择'）[0] .selectedIndex = 0;
返回false;
}）;
}）;
＆LT; / SCRIPT＆GT;＆LT; ASP：按钮的ID =btnAdd文本=添加更多=服务器/＆GT;＆LT; BR /＆GT;
＆LT; ASP：GridView控件ID =GridView1=服务器的AutoGenerateColumns =FALSEShowHeader =FALSE＆GT;
＆LT;柱体和GT;
＆LT; ASP：的TemplateField＆GT;
＆LT;＆ItemTemplate中GT;
＆LT; ASP：DropDownList的ID =ddlCountry=服务器＆GT;
＆LT; ASP：ListItem的＆GT; - 选择 - ＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的＆GT;印度和LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的＆GT; UK＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的＆GT;美国＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的＆GT;德国＆LT; / ASP：ListItem的＆GT;
＆LT; / ASP：DropDownList的＆GT; ＆LT; ASP：DropDownList的ID =ddlCity=服务器＆GT;
＆LT; ASP：ListItem的＆GT; - 选择 - ＆LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的＆GT;＆加尔各答LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的＆GT;孟买与LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的＆GT;＆德里LT; / ASP：ListItem的＆GT;
＆LT; ASP：ListItem的＆GT;＆马德拉斯LT; / ASP：ListItem的＆GT;
＆LT; / ASP：DropDownList的＆GT;
＆LT; / ItemTemplate中＆GT;
＆LT; / ASP：的TemplateField＆GT;
＆LT; /专栏＆GT;
＆LT; / ASP：GridView的＆GT;
＆LT; BR /＆GT;＆LT; BR /＆GT;
＆LT; ASP：按钮的ID =Button1的文本=阅读gridview的值=服务器
的onclick =的button1_Click/＆GT;＆LT; BR /＆GT;
服务器端的code
保护无效的Page_Load（对象发件人，EventArgs的发送）
{
如果（！的IsPostBack）
{
DataTable的DT =新的DataTable（）;
dt.Columns.Add（ID，typeof运算（字符串））;
DataRow的博士= dt.NewRow（）;
博士[ID] =;
dt.Rows.Add（DR）;
GridView1.DataSource = DT;
GridView1.DataBind（）;
}
} 保护无效的button1_Click（对象发件人，EventArgs的发送）
{
StringBuilder的SB =新的StringBuilder（）; // HTMLTABLE表=（HTMLTABLE）rpt.Items [0] .FindControl（tblSample）; 的for（int i = 0; I＆LT; = GridView1.Rows.Count - 1;我++）
{
字符串国家=（（DropDownList的）GridView1.Rows [I] .FindControl（ddlCountry））SelectedItem.Text。
串城市=（（DropDownList的）GridView1.Rows [I] .FindControl（ddlCity））SelectedItem.Text。
sb.Append（国家： - +国家+城市： - +市）;
}
txtData.Text = sb.ToString（）;
}
您无法读取，从JavaScript添加的服务器code行。相反，你需要从服务器code添加行。由于上点击按钮，它发生在回发到服务器。上的JavaScript code添加的行willnot renderd使用视图状态。它willnot添加的视图状态。等回发其willnot渲染。所以，不可能将其添加上的JavaScript。它只能用于显示的目的。您可以使用AJAX部分回发了这样的行动。其与更新面板及其触发过程完成。
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();
}
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
这篇关于添加行使用jquery的GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
