Sometimes we need a row-based control that can dynamically add/remove rows on the fly, without being bound to a database. For example, we give the user a row of text-boxes to enter a car Year, Make, and Model. If they need more than one row to enter multiple cars, they click an Add button for each extra car they need. Each row also has a Remove button in case the user needs to remove a car. although that might not be useful in this particular example, there are many occasions where it is convenient to be able to reorder rows.
Add One page Default2.aspx
To achieve the desired effect, we could resort to Javascript and dynamically add/remove table rows via the DOM. But instead let's stick with C#.NET.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="deshi_Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="repeater1" runat="server" OnItemCommand="repeater1_ItemCommand" >
<HeaderTemplate>
<table cellpadding="0" cellspacing="5">
<tr style="padding-top: 5px;">
<td colspan="6" style="text-align:right;">
<asp:Button ID="btnAdd" runat="server"
Text="Add New" CommandName="Add" />
</td>
</tr>
<tr style="padding-top: 5px;">
<td colspan="6">
<asp:Label ID="lblInstructions" runat="server" Text="Add your detail here:" />
</td>
</tr>
<tr runat="server" id="trHeader" style="font-weight: bold;">
<td>Name</td>
<td>Email</td>
<td>Mobile</td>
<td></td>
<td></td>
<td></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:TextBox ID="txtYear" runat="server" Width="65" Text='<%#DataBinder.Eval(Container.DataItem, "Name")%>' /></td>
<td><asp:TextBox ID="txtMake" runat="server" Width="70"
Text='<%#DataBinder.Eval(Container.DataItem, "Email")%>' /></td>
<td><asp:TextBox ID="txtModel" runat="server" Width="70"
Text='<%#DataBinder.Eval(Container.DataItem, "Mobile")%>' /></td>
<td style="text-align: center;">
<asp:Button ID="btnRemove" runat="server" Width="70"
Text="Remove" CommandName="Remove"
CommandArgument='<%# Eval("ID") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Add One page Default2.aspx
To achieve the desired effect, we could resort to Javascript and dynamically add/remove table rows via the DOM. But instead let's stick with C#.NET.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="deshi_Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="repeater1" runat="server" OnItemCommand="repeater1_ItemCommand" >
<HeaderTemplate>
<table cellpadding="0" cellspacing="5">
<tr style="padding-top: 5px;">
<td colspan="6" style="text-align:right;">
<asp:Button ID="btnAdd" runat="server"
Text="Add New" CommandName="Add" />
</td>
</tr>
<tr style="padding-top: 5px;">
<td colspan="6">
<asp:Label ID="lblInstructions" runat="server" Text="Add your detail here:" />
</td>
</tr>
<tr runat="server" id="trHeader" style="font-weight: bold;">
<td>Name</td>
<td>Email</td>
<td>Mobile</td>
<td></td>
<td></td>
<td></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><asp:TextBox ID="txtYear" runat="server" Width="65" Text='<%#DataBinder.Eval(Container.DataItem, "Name")%>' /></td>
<td><asp:TextBox ID="txtMake" runat="server" Width="70"
Text='<%#DataBinder.Eval(Container.DataItem, "Email")%>' /></td>
<td><asp:TextBox ID="txtModel" runat="server" Width="70"
Text='<%#DataBinder.Eval(Container.DataItem, "Mobile")%>' /></td>
<td style="text-align: center;">
<asp:Button ID="btnRemove" runat="server" Width="70"
Text="Remove" CommandName="Remove"
CommandArgument='<%# Eval("ID") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Write code in code behind side
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class deshi_Default2 : System.Web.UI.Page
{
private static int numOfRows = 0;
static List<Car> lst = new List<Car>();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
lst.Clear();
// int count = lst.Count() + 1;
lst.Add(new Car() { ID = 0, Name = null, Email = null, Mobile = null });
numOfRows = 0;
repeater1.DataSource = lst;
repeater1.DataBind();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
}
protected void repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Add")
{
int count = lst.Count()+1;
numOfRows = numOfRows + 1;
lst.Add(new Car() { ID = numOfRows, Name = null, Email = null, Mobile = null });
repeater1.DataSource = lst;
repeater1.DataBind();
}
if (e.CommandName == "Remove")
{
int checkcount =Convert.ToInt32(e.CommandArgument.ToString());
var itemToRemove = lst.Single(r => r.ID == checkcount);
lst.Remove(itemToRemove);
// lst.RemoveAt(checkcount);
repeater1.DataSource = lst;
repeater1.DataBind();
}
}
}
class Car
{
public int ID { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Mobile { get; set; }
}
No comments:
Post a Comment