web-dev-qa-db-fra.com

Comment ajouter dynamiquement des lignes à une table dans ASP.NET?

Alors aujourd'hui, j'ai commencé à apprendre ASP.NET. Malheureusement, je n'ai trouvé aucun bon tutoriel en ligne et je ne peux pas me permettre d'acheter de livres pour le moment. J'ai donc dû créer une application Web ASP.NET dans Visual Studio 2010 et m'amuser avec la configuration de projet par défaut. .

Jusqu'ici voici ce que j'ai dans mon 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>

J'ai créé un tableau simple avec la ligne d'en-tête déjà dedans. Grâce à un script C #, je souhaite pouvoir ajouter de manière dynamique des lignes à ce tableau HTML. Est-ce la bonne façon de penser dans ASP.NET? Si oui, comment puis-je faire cela? Je suis sûr que j'aurai besoin d'un bouton "Ajouter", qui ajoute une nouvelle ligne à la table, avec des champs modifiables, et d'un bouton "Soumettre" qui ajoute des éléments à une base de données.

Fondamentalement, un aperçu de la façon dont cela est fait serait très utile. Aussi, si quelqu'un connaît de bons tutoriels ou des sites Web qui peuvent m'aider avec de telles choses, faites-le-moi savoir.

Merci d'avance.

c#asp.netvisual-studio-2010
17
void.pointer

Avez-vous essayé le 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>

Vous pouvez ensuite ajouter des lignes selon vos besoins dans le script en les créant et en les ajoutant à myTable.Rows.

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

Compte tenu de la description de votre question, je dirais que vous feriez mieux d'utiliser un GridView ou un répéteur, comme mentionné par @Kirk Woll.

EDIT - De plus, si vous voulez apprendre sans acheter de livres, voici quelques sites avec lesquels vous devez absolument vous familiariser:

Le blog de Scott Guthrie
4 types de Rolla
MSDN
Code Project Asp.Net

41
Joel Etherton

en plus de ce que Kirk a dit, je tiens à vous dire que le simple fait de "jouer" ne vous aidera pas à apprendre asp.net, et il existe de nombreux tutoriels gratuits et très bons.
Consultez les didacticiels du site officiel asp.net et/ 4GuysFromRolla site

7
Mohamad Alhamoud

ASP.NET WebForms ne fonctionne pas de cette façon. Ce que vous avez ci-dessus est juste du code HTML normal, donc ASP.NET ne vous donnera aucune possibilité d'ajouter/de supprimer des éléments. Ce que vous voudrez faire est d'utiliser un contrôle Repeater, ou éventuellement un GridView. Ces contrôles seront disponibles dans le code-behind. Par exemple, le répéteur exposerait une propriété "Items" sur laquelle vous pouvez ajouter de nouveaux éléments (lignes). Dans le code-front (le fichier .aspx), vous fournissez un ItemTemplate qui détaille l'apparence des lignes du corps. Il existe de nombreux didacticiels sur le Web pour les rediffuseurs, je vous suggère donc de rechercher ces informations sur Google.

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

Vous devez vous familiariser avec l'idée du code "côté serveur" par rapport au code "côté client". Cela fait longtemps que je n'ai pas dû commencer, mais vous voudrez peut-être commencer par quelques-uns des didacticiels vidéo disponibles sur http://www.asp.net . 

Deux choses à noter: si vous utilisez VS2010, vous avez le choix entre deux frameworks différents pour ASP.NET: WebForms et ASP.NET MVC2. WebForms est l'ancienne méthode, MVC2 est considéré par MS comme une alternative, non pas pour remplacer WebForm, mais nous verrons comment la communauté le gérera au cours des deux prochaines années. Quoi qu'il en soit, assurez-vous de faire attention à celui qui est mentionné dans un tutoriel.

2
Jim L

Vous pouvez utiliser asp: Table dans votre formulaire Web et le générer via le code suivant: 

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

En outre, consultez asp.net pour des tutoriels et autres.

2
Mike Cheel

Créé dynamiquement pour une ligne dans une table 

Voir ci-dessous le lien

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

2
kiran

Lien pour l'ajout via JS https://www.youtube.com/watch?v=idyyQ23joy0

S'il vous plaît voir le lien ci-dessous aussi. Cela vous aiderait à ajouter les lignes de manière dynamique à la volée: 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