webentwicklung-frage-antwort-db.com.de

Wie Sie Zeilen dynamisch zu einer Tabelle in ASP.NET hinzufügen?

Heute habe ich angefangen, ASP.NET zu lernen. Leider habe ich noch keine guten Online-Tutorials gefunden, und ich kann es mir momentan nicht leisten, Bücher zu kaufen. Daher musste ich in Visual Studio 2010 eine ASP.NET-Webanwendung erstellen und einfach mit den Standardprojekteinstellungen herumspielen .

So weit hier, was ich in meinem Default.aspx habe:

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

Ich habe eine einfache Tabelle erstellt, in der sich bereits die Kopfzeile befindet. Durch ein C # -Skript möchte ich in der Lage sein, Zeilen dynamisch zu dieser HTML-Tabelle hinzuzufügen. Ist dies die richtige Denkweise in ASP.NET? Wenn ja, wie kann ich das machen? Ich bin sicher, ich brauche eine "Hinzufügen" -Schaltfläche, die der Tabelle eine neue Zeile mit bearbeitbaren Feldern hinzufügt, und eine "Senden" -Schaltfläche, die einer Datenbank etwas hinzufügt.

Grundsätzlich wäre nur ein Überblick darüber, wie das gemacht wird, sehr hilfreich. Auch wenn jemand gute Tutorials oder Websites kennt, die mir bei solchen Dingen helfen können, lass es mich wissen.

Danke im Voraus.

17
void.pointer

Hast du den Asp: Table versucht?

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

Sie können dann nach Bedarf Zeilen im Skript hinzufügen, indem Sie sie erstellen und zu myTable.Rows hinzufügen

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

Bei der Beschreibung Ihrer Frage würde ich jedoch sagen, dass Sie besser ein GridView oder Repeater verwenden sollten, wie von @Kirk Woll erwähnt.

BEARBEITEN - Auch wenn Sie lernen möchten, ohne Bücher zu kaufen, sind hier einige Websites, die Sie unbedingt kennenlernen müssen:

Scott Guthries Blog
4 Jungs von Rolla
MSDN
Code Projekt Asp.Net

41
Joel Etherton

zusätzlich zu dem, was Kirk gesagt hat, möchte ich Ihnen sagen, dass das "Herumspielen" nicht dazu beiträgt, asp.net zu lernen, und es gibt viele kostenlose und sehr gute Tutorials.
Werfen Sie einen Blick auf die offiziellen Tutorials zu asp.net und auf 4GuysFromRolla site

7

ASP.NET-WebForms funktioniert auf diese Weise nicht. Was Sie oben haben, ist nur normales HTML, daher bietet Ihnen ASP.NET keine Möglichkeit, Elemente hinzuzufügen oder zu entfernen. Was Sie tun möchten, ist ein Repeater-Steuerelement oder möglicherweise eine GridView. Diese Steuerelemente werden im Code-Behind verfügbar sein. Zum Beispiel würde der Repeater eine "Items" -Eigenschaft verfügbar machen, zu der Sie neue Items (Zeilen) hinzufügen können. In der Code-Front (der ASPX-Datei) würden Sie eine ItemTemplate bereitstellen, mit der festgelegt wird, wie die Hauptzeilen aussehen. Es gibt viele Tutorials im Internet für Repeater. Ich schlage vor, dass Sie google gehen, um weitere Informationen zu erhalten.

4
Kirk Woll
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();

    }
}
3
Shashank Jain

Sie müssen sich mit der Idee des Codes "Server" und "Client" vertraut machen. Es ist lange her, seit ich anfangen musste, aber Sie möchten vielleicht mit einigen Video-Tutorials unter http://www.asp.net beginnen. 

Zwei Dinge zu beachten: Wenn Sie VS2010 verwenden, stehen Ihnen zwei verschiedene Frameworks für ASP.NET zur Verfügung: WebForms und ASP.NET MVC2. WebForms ist der alte Weg, MVC2 wird von MS als Alternative und nicht als Ersatz für WebForms positioniert, aber wir werden sehen, wie die Community in den nächsten Jahren damit umgeht. Achten Sie auf jeden Fall darauf, worüber ein bestimmtes Tutorial spricht.

2
Jim L

Sie können die asp: Table in Ihrem Webformular verwenden und per Code erstellen: 

http://msdn.Microsoft.com/de-de/library/7bewx260.aspx

Unter asp.net findest du außerdem Tutorials und ähnliches.

2
Mike Cheel

Dynamisch erstellt für eine Zeile in einer Tabelle 

Siehe den Link

http://msdn.Microsoft.com/de-de/library/7bewx260(v=vs.100).aspx

2
kiran

Link zum Hinzufügen über JS https://www.youtube.com/watch?v=idyyQ23joy0

Bitte sehen Sie auch den untenstehenden Link. Dies würde Ihnen helfen, die Zeilen dynamisch hinzuzufügen: https://www.lynda.com/C-tutorials/Adding-data-HTML-tables-runtime/161815/366843-4.html

1
Edwin b
<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>
0
saeed hargan