代码之家 › 专栏 › 技术社区 › void.pointer

如何在ASP.NET中将行动态添加到表中?

visual-studio-2010 asp.net c#

void.pointer · 技术社区 · 14 年前

所以今天我开始学习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 回复 | 直到 6 年前

Joel Etherton 14 年前

您尝试过ASP:表吗?

<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);

不过,考虑到您的问题描述,我想说您最好使用@kirk wll提到的网格视图或中继器。

编辑-另外,如果你想在不买书的情况下学习,这里有一些你绝对需要熟悉的网站:

Scott Guthrie's Blog
4 Guys from Rolla
MSDN
Code Project Asp.Net

Mohamad Alhamoud 14 年前

除了柯克所说的之外,我想告诉你,仅仅“玩”并不能帮助你学习ASP.NET,还有很多免费的、非常好的教程。
查看ASP.NET官方网站教程和 4GuysFromRolla 网站

Kirk Woll 14 年前

ASP.NET Web窗体不能这样工作。上面的内容只是普通的HTML,所以ASP.NET不会为您提供任何添加/删除项的功能。你要做的是使用一个中继器控件,或者网格视图。这些控件将在后面的代码中可用。例如,中继器将公开一个“items”属性,您可以在该属性上添加新项(行)。在代码前面(.aspx文件)中,您将提供一个itemtemplate,它可以删除正文行的外观。网络上有很多关于中继器的教程,所以我建议你在谷歌上搜索以获取更多信息。

Shashank Jain 12 年前

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();

    }
}

Jim L 14 年前

您需要熟悉“服务器端”和“客户机端”代码的概念。我已经很久没有开始学习了,但您可能想从以下视频教程开始学习: http://www.asp.net .

需要注意的两件事:如果您使用的是VS2010,那么您实际上可以为ASP.NET选择两种不同的框架:WebForms和ASP.NET MVC2。WebForms是一种古老的传统方式,MVC2正被MS定位为一种替代方案,而不是取代WebForms,但我们将看到社区在未来几年如何处理它。无论如何,一定要注意一个给定的教程在讲什么。

Mike Cheel 14 年前

您可以在Web窗体中使用asp:table并通过以下代码生成它:

http://msdn.microsoft.com/en-us/library/7bewx260.aspx

另外,请查看ASP.NET中的教程等内容。

kiran 10 年前

为表中的行动态创建

请参见下面的链接

http://msdn.microsoft.com/en-us/library/7bewx260(v=vs.100).aspx

Edwin b 8 年前

通过JS添加的链接 https://www.youtube.com/watch?v=idyyQ23joy0

请参见下面的链接。这将有助于动态添加行: https://www.lynda.com/C-tutorials/Adding-data-HTML-tables-runtime/161815/366843-4.html

-1

saeed Ahmad 6 年前

<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>

-2

Candy Man 6 年前

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