Hi,
Sorry for delay. This delay because of that I again start the education after 1 year of web development. But now I again start the development and want to share something new that I did for my BOSS.
Requirements:
We have to make HR (Human Resource) components for some organization. Our client demanded that his client can entered multiple degrees. In start we only have text boxes for only one degree but when user press add another we must add other fields dynamically and maintain the contents of old degrees and change the buttons to remove for them and for new add and empty fields appeared.
Solution:
We have two solutions to solve this problem.
One is to use JavaScript [ But I hate it 
]
So I use repeater and DataSet to gain the same functionality that our client wanted.
We have a page on which we add repeater
Page Name: Default.aspx
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Untitled Page</title>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:Repeater ID=”Repeater1″ runat=”server” OnItemCommand=”Repeater1_ItemCommand” OnItemDataBound=”Repeater1_ItemDataBound”>
<HeaderTemplate>
<table>
<tr>
<th>Book Title</th>
<th>Book ISBN</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:TextBox ID=”txtBookTitle” runat=”server” Text=’<%# DataBinder.Eval(Container.DataItem, “Title”) %>’></asp:TextBox>
</td>
<td>
<asp:TextBox ID=”txtISBN” runat=”server” Text=’<%# DataBinder.Eval(Container.DataItem, “Isbn”) %>’></asp:TextBox>
</td>
<td>
<asp:Button ID=”btnAddAnother” runat=”server” Text=’<%# DataBinder.Eval(Container.DataItem, “Button”) %>’ CommandName=’<%# DataBinder.Eval(Container.DataItem, “Button”) %>’ />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
In ITEMTEMPLATE of repeater we add the text boxes and a button, we also set the text for text boxes to maintain their values. For button set the command and text because I want to change this in “Remove” when new one is added.
Now on the backend coding page we have to write this code
Page Name: Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
DataSet dsDummy = null; //dummy dataset use for repeater
DataTable tbDummy = null; //dummy table for dataset
protected void Page_Load(object sender, EventArgs e)
{
// Intitalization
dsDummy = new DataSet();
tbDummy = new DataTable();
//Only first time of page load
if (!Page.IsPostBack)
{
AddColumns();
//Add dummy row to table
tbDummy.Rows.Add(“”,”",”Add”);
BindWithRepeater();
}
}
On Page load we add our required columns and set the row to empty as u see and then bind this to repeater. So in initially we add only one row so only one row of text boxes is appeared.
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
int Total = Repeater1.Items.Count; //get total items in repeater
if (e.CommandName == “Add”)
{
Total = Total + 1; //increase 1 because of add
AddColumns();
foreach (RepeaterItem item in Repeater1.Items)
{
//getting the values of user entered fields
string title = ((TextBox)item.FindControl(“txtBookTitle”)).Text;
string isbn = ((TextBox)item.FindControl(“txtISBN”)).Text;
Button btnAdd = ((Button)item.FindControl(“btnAddAnother”));
//now change button text to remove, and save user entered values in table
tbDummy.Rows.Add(title, isbn, “Remove”);
}
//Add dummy row, because we need to increase
tbDummy.Rows.Add(“”, “”, “Add”);
BindWithRepeater();
}
else if (e.CommandName == “Remove”)
{
Total = Total – 1;
tbDummy.Columns.Add(“Title”);
tbDummy.Columns.Add(“Isbn”);
tbDummy.Columns.Add(“Button”);
foreach (RepeaterItem item in Repeater1.Items)
{
Button btnAdd = ((Button)item.FindControl(“btnAddAnother”));
if (btnAdd != e.CommandSource) //the current row on which user click will removed
{
string title = ((TextBox)item.FindControl(“txtBookTitle”)).Text;
string isbn = ((TextBox)item.FindControl(“txtISBN”)).Text;
if (btnAdd.Text == “Remove”)
{
tbDummy.Rows.Add(title, isbn, “Remove”);
}
else
{
tbDummy.Rows.Add(title, isbn, “Add”);
}
}
}
BindWithRepeater();
}
}
In ItemCommand, we have to tackle both Add and Remove functionality. So we did this by checking command. And you see when We add the row to table we add the previous entry by getting it from repeater and adding only one for new.
Similarly when we remove we have to check that the button that is clicked. So we check this by a condition compare with sender if not equal then we add it in table and just not adding that one on which user click remove. So by doing this we automatically remove the one row.
private void AddColumns()
{
//Add 3 dummy coloumn, this can be increase on our need basis
tbDummy.Columns.Add(“Title”);
tbDummy.Columns.Add(“Isbn”);
tbDummy.Columns.Add(“Button”);
}
private void BindWithRepeater()
{
//add this table to dataset
dsDummy.Tables.Add(tbDummy);
//bind this dataset to repeater
Repeater1.DataSource = dsDummy;
Repeater1.DataBind();
}
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
}
}
That’s it. This is not much good programming practice But I think good to do thing quickly under work load and tight deadline.
Now one request, Just Pray for ME
Regards
Rana Faisal Munir
