logo标签列表

如何在ASP.NET中动态添加行到表格？

c#asp.netvisual-studio-2010
21

今天我开始学习ASP.NET。不幸的是，我没有在网上找到任何好的教程，并且目前也买不起书，所以我只能在Visual Studio 2010中创建一个ASP.NET Web应用程序，并尝试使用默认的项目设置。

到目前为止，这是我在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.org/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>

我已经创建了一个简单的表格，其中包含标题行。通过 C# 脚本，我希望能够动态向这个 HTML 表格添加行。在 ASP.NET 中是这样思考的吗？如果是，我该如何实现呢？我确定需要一个“添加”按钮，它会添加一个新行到表中，具有可编辑的字段，还需要一个“提交”按钮，将一些内容添加到数据库中。

基本上，了解如何完成这个任务的步骤将非常有帮助。

10个回答
52

你尝试过使用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>

您可以通过创建行并将它们添加到myTable.Rows中，在脚本中根据需要添加行。

TableRow row = new TableRow();
TableCell cell1 = new TableCell();
cell1.Text = "blah blah blah";
row.Cells.Add(cell1);
myTable.Rows.Add(row);

根据你的问题描述，我建议你最好使用GridView或Repeater，这也是@Kirk Woll提到的。

编辑-此外，如果你想不花钱学习，以下是几个必须熟悉的网站：

Scott Guthrie的博客
4 Guys from Rolla
MSDN
Code Project Asp.Net

1
你可以使用 asp:TableHeaderRow 来创建表头行。 - Max Voisard
7

除了Kirk所说的，我想告诉你，仅仅“玩弄”ASP.NET是学不会的，而且有很多免费而且非常好的教程。
看看ASP.NET官方网站上的教程和4GuysFromRolla网站上的教程。

5
ASP.NET WebForms不是这样工作的。您上面所写的只是普通的HTML，因此ASP.NET不会为您提供任何添加/删除项目的功能。您需要使用Repeater控件或可能是GridView。这些控件将在代码后台可用。例如，Repeater将公开一个"Items"属性，您可以在其中添加新项目(行)。在代码前端(.aspx文件)中，您需要提供一个ItemTemplate来确定主体行的外观。有很多关于repeater的教程，我建议您搜索一下以获取更多信息。
4
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();

    }
}
2
你需要了解"服务器端"和"客户端"代码的概念。虽然我已经很久没有开始学习了，但你可以从http://www.asp.net的一些视频教程开始。需要注意的两件事情：如果你使用的是VS2010，那么ASP.NET有两个不同的框架可供选择：WebForms和ASP.NET MVC2。WebForms是旧的遗留方式，MVC2被微软定位为WebForms的替代方案而非替换方案，但我们将在未来几年看到社区如何处理它。无论如何，请确保关注每个教程所讨论的框架。
2
2
1
1
这个回答在理论上可能会解决问题，但最好在此处包含答案的基本部分以供未来用户参考，并提供链接作为参考。以链接为主导的答案可能会变得无效。 - abarisone
-1
<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>
将JavaScript添加到ASP.NET中以实现目标并不起作用，而这正是原帖提出的问题。 - Bmize729
-2

您需要在 HTML 中使用 JavaScript，并确保使用表单。最后，您可以使用 Ajax 方法序列化数据，将数据从 HTML 推送到数据库中。

1
你的回答如何解决关于使用ASP.NET的问题？使用ASP.NET不需要同时实现JavaScript、Ajax或数据库；最终，OP可能想要将这些东西结合起来，但OP正在寻求开始使用ASP.NET。 - landru27
如果提问者想要使用XSLT和XML来获取数据怎么办？无论如何，提问者是在寻求关于ASP.NET的帮助，而不是对他们正在做的事情的不同解决方案。 - Bmize729
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接