How to dynamically add rows to a table in ASP.NET?
So today I started learning ASP.NET. Unfortunately I haven't found any good tutorials online, and I can't afford to buy books at the moment, so I've had to create a ASP.NET web application in Visual Studio 2010 and just play around with the default project setup.
So far here's what I have in my Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.开发者_如何学JAVAorg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Project Management</title>
</head>
<body>
<div style="padding-bottom:10px;"> Project Management System</div>
<div> <table style="width:100%;">
<tr>
<td>Name</td>
<td>Task</td>
<td>Hours</td>
</tr>
</table></div>
</body>
</html>
I created a simple table with the header row already in there. Through a C# script, I want to be able to dynamically add rows to this HTML table. Is this the right way of thinking in ASP.NET? If so, how can I do this? I'm sure I'll need an "Add" button, which adds a new row to the table, with editable fields, and a "submit" button which adds some stuff to a database.
Basically just a rundown of how this is done would be ever so helpful.
Have you attempted the Asp:Table?
<asp:Table ID="myTable" runat="server" Width="100%">
<asp:TableRow>
<asp:TableCell>Name</asp:TableCell>
<asp:TableCell>Task</asp:TableCell>
<asp:TableCell>Hours</asp:TableCell>
</asp:TableRow>
</asp:Table>
You can then add rows as you need to in the script by creating them and adding them to myTable.Rows
TableRow row = new TableRow();
TableCell cell1 = new TableCell();
cell1.Text = "blah blah blah";
row.Cells.Add(cell1);
myTable.Rows.Add(row);
Given your question description though, I'd say you'd be better off using a GridView or Repeater as mentioned by @Kirk Woll.
EDIT - Also, if you want to learn without buying books here are a few sites you absolutely need to become familiar with:
Scott Guthrie's Blog
4 Guys from Rolla
MSDN
Code Project Asp.Net
in addition to what Kirk said I want to tell you that just "playing around" won't help you to learn asp.net, and there is a lot of free and very good tutorials .
take a look on the asp.net official site tutorials and on 4GuysFromRolla site
ASP.NET WebForms doesn't work this way. What you have above is just normal HTML, so ASP.NET isn't going to give you any facility to add/remove items. What you'll want to do is use a Repeater control, or possibly a GridView. These controls will be available in the code-behind. For example, the Repeater would expose an "Items" property upon which you can add new items (rows). In the code-front (the .aspx file) you'd provide an ItemTemplate that stubs out what the body rows would look like. There are plenty of tutorials on the web for repeaters, so I suggest you google that to obtain further information.
public partial class result : System.Web.UI.Page
{
static DataTable table1 = new DataTable("Shashank");
static DataSet set = new DataSet("office");
protected void Page_Load(object sender, EventArgs e)
{
lblEmployeeNumber.Text = HttpContext.Current.Request.Form["txtEmployeeNumber"];
lblFirstName.Text = Request.Form["txtFirstName"];
lblLastName.Text = Request.Form["txtLastName"];
lblTitle.Text = Request.Form["txtTitle"];
Int32 Rcount = Convert.ToInt32(table1.Rows.Count);
if (Rcount == 0)
{
table1.Columns.Add("ID");
table1.Columns.Add("FName");
table1.Columns.Add("LName");
table1.Columns.Add("Title");
table1.Rows.Add(lblEmployeeNumber.Text, lblFirstName.Text, lblLastName.Text, lblTitle.Text);
set.Tables.Add(table1);
}
else
{
if (lblEmployeeNumber.Text != "")
{
DataRow dr = table1.NewRow();
dr["ID"] = lblEmployeeNumber.Text;
dr["FName"] = lblFirstName.Text;
dr["LName"] = lblLastName.Text;
dr["Title"] = lblTitle.Text;
table1.Rows.Add(dr);
}
}
gvrEmp.DataSource = set;
gvrEmp.DataBind();
}
}
You need to get familiar with the idea of "Server side" vs. "Client side" code. It's been a long time since I had to start, but you may want to start with some of the video tutorials at http://www.asp.net.
Two things to note: if you're using VS2010 you actually have two different frameworks to chose from for ASP.NET: WebForms and ASP.NET MVC2. WebForms is the old legacy way, MVC2 is being positioned by MS as an alternative not a replacement for WebForms, but we'll see how the community handles it over the next couple of years. Anyway, be sure to pay attention to which one a given tutorial is talking about.
You can use the asp:Table in your web form and build it via code:
http://msdn.microsoft.com/en-us/library/7bewx260.aspx
Also, check out asp.net for tutorials and such.
Dynamically Created for a Row in a Table
See below the Link
http://msdn.microsoft.com/en-us/library/7bewx260(v=vs.100).aspx
Link for adding through JS https://www.youtube.com/watch?v=idyyQ23joy0
Please see the below link as well. This would help you add the rows dynamically on the fly: https://www.lynda.com/C-tutorials/Adding-data-HTML-tables-runtime/161815/366843-4.html
<html>
<head>
<title>Row Click</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function test(){
alert('test');
}
$(document).ready(function(){
var row='<tr onclick="test()"><td >Value 4</td><td>Value 5</td><td>Value 6</td></tr>';
$("#myTable").append(row);
});
</script>
</head>
<table id="myTable" >
<th>Column 1</th><th>Column 2</th><th>Column 3</th>
<tr onclick="test()">
<td >Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>
</html>
You need to use JavaScript in your HTML and make sure you are using forms so that. You may finally serialize the data using Ajax method to push the data from HTML into database
加载中,请稍侯......
精彩评论