How can create and remove HTML Control and fetch its value in asp.net
How can create and remove HTML Control and fetch its value in asp.net
In my previous post, I was generating controls dynamically using asp.net.in this post I am showing
how can we generate and remove
controls Using Html and fetch its
value in our c# code.
Here I am generating three textbox’s in row .
This is my whole page code ,you can change its page name.
.ASPX part
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="test_con.aspx.cs"
Inherits="UILayer.test_con"
%>
<!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 id="Head1" runat="server">
<title></title>
<script language="javascript"
type="text/javascript">
//this function generate new row
function addRowToTable() {
var tbl = document.getElementById('tblDept');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
row.id = 'row' + iteration;
// department
var cellRight = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txt_dept' + iteration;
el.id = 'txt_dept' + iteration;
el.size = 35;
cellRight.appendChild(el);
// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txt_titel' + iteration;
el.id = 'txt_titel' + iteration;
el.size = 35;
cellRight.appendChild(el);
// right cell
var cellRight = row.insertCell(2);
var el = document.createElement('input');
el.type = 'text';
el.name = 'txt_code' + iteration;
el.id = 'txt_code' + iteration;
el.size = 35;
cellRight.appendChild(el);
var cellRight = row.insertCell(3);
var el = document.createElement('input');
el.type = 'image';
el.name = 'img_remove' + iteration;
el.id = 'img_remove' + iteration;
el.src = 'Images/remove.png';
el.alt
= 'Remove Department';
el.title = 'Remove Department';
el.setAttribute("onclick", 'return removerow('+'"row'
+ iteration + '",'+'"hdnFlagDept'+ iteration +'")');
el.size = 35;
cellRight.appendChild(el);
var el = document.createElement('input');
el.type = 'hidden';
el.name = 'hdnFlagDept' + iteration;
el.id = 'hdnFlagDept' + iteration;
el.value = 'true';
el.size = 35;
cellRight.appendChild(el);
var objhdnDept = document.getElementById('hdnDept');
objhdnDept.value = parseInt(objhdnDept.value) + 1;
// alert(objhdnDept.value);
return false;
}
/// This function remove any particular row
function removerow(objTr, objHdn) {
var objHdn = document.getElementById(objHdn)
var row = document.getElementById(objTr);
// alert(objTr);
// alert(objHdn);
objHdn.value = 'false';
row.parentElement.removeChild(row);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblDept"
frame="border"
width="830px">
<tr>
<th class="tdClass4">
Department
</th>
<th class="tdClass4">
Project
Title
</th>
<th class="tdClass4">
Cost
Centre/Code
</th>
<th>
</th>
</tr>
<tr>
<td class="tdClass1">
<input id="txt_dept0"
type="text"
name="txt_dept0"
value="<%=Request.Form.Get("txt_dept0")%>"
size="35" />
</td>
<td class="tdClass1">
<input id="txt_titel0"
type="text"
name="txt_titel0"
size="35"
value="<%=Request.Form.Get("txt_titel0")%>" />
</td>
<td class="tdClass1">
<input id="txt_code0"
type="text"
name="txt_code0"
value="<%=Request.Form.Get("txt_code0")%>"
size="35" />
</td>
<td>
</td>
</tr>
<%
HttpContext.Current.Trace.Warn("count" + count);
for (int i = 1; i
< count; i++)
{
string
strFlagDept = "";
strFlagDept = Convert.ToString(Request.Form.Get("hdnFlagDept" + i));
Trace.Warn("strFlagDept : " + strFlagDept);
if
(strFlagDept == "true")
{
%>
<tr id="row<%=i%>">
<td class="tdClass1">
<input id="txt_dept<%=i%>" type="text" name="txt_dept<%=i%>" size="35" value="<%=Request.Form.Get("txt_dept"
+ i)%>" />
</td>
<td class="tdClass1">
<input id="txt_titel<%=i%>" type="text" name="txt_titel<%=i%>" size="35" value="<%=Request.Form.Get("txt_titel"
+ i)%>" />
</td>
<td class="tdClass1">
<input id="txt_code<%=i%>" type="text" name="txt_code<%=i%>" size="35" value="<%=Request.Form.Get("txt_code"
+ i)%>" />
</td>
<td>
<input type="image"
src="Images/remove.png" alt="Remove Image" title
="Remove Image" onclick="return
removerow('row<%=i%>','hdnFlagDept<%=i%>')" />
<input type="hidden"
id="hdnFlagDept<%=i%>" name="hdnFlagDept<%=i%>" value="true" />
</td>
</tr>
<%}
}%>
</table>
<table width="840px">
<tr>
<td align="center"
colspan="4">
<asp:ImageButton ImageUrl="~/Images/add.png"
ID="btn_dpt_count"
runat="server"
OnClientClick="javascript:return
addRowToTable();"
ToolTip="Add
Department" />
</td>
</tr>
</table>
<input type="hidden"
id="hdnDept"
name="hdnDept"
value="<%=count%>" />
</div>
<asp:Button ID="Button1"
runat="server"
onclick="Button1_Click"
Text="Button"
/>
<asp:GridView ID="gvr" runat="server"></asp:GridView>
</form>
</body>
</html>
.Cs Part
protected int count = 1;
protected void
Page_Load(object sender, EventArgs e)
{
}
protected void
Button1_Click(object sender, EventArgs e)
{
count = Convert.ToInt32(Request.Form.Get("hdnDept"));
Trace.Warn("count" +
count);
DataTable dt_dept = new DataTable();
dt_dept.Columns.Add("DeptName");
dt_dept.Columns.Add("ProjectTitle");
dt_dept.Columns.Add("CostCenter");
Trace.Warn("tblDept.Rows.Count"
+ count);
for (int i = 0; i
< count; i++)
{
Trace.Warn("dept : " +
Request.Form.Get("txt_dept" + i));
Trace.Warn("title : " +
Request.Form.Get("txt_titel" +
i));
Trace.Warn("code : " +
Request.Form.Get("txt_code" + i));
string strDept =
Convert.ToString(Request.Form.Get("txt_dept"
+ i));
string strTitle =
Convert.ToString(Request.Form.Get("txt_titel"
+ i));
string strCost =
Convert.ToString(Request.Form.Get("txt_code"
+ i));
if (string.IsNullOrEmpty(strDept)
== false && strDept != "")
{
dt_dept.Rows.Add(strDept, strTitle, strCost);
}
}
gvr.DataSource = dt_dept;
gvr.DataBind();
}
Comments
Post a Comment