web-dev-qa-db-ja.com

ASP.NETのテーブルに行を動的に追加する方法は？

それで今日、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の正しい考え方ですか？もしそうなら、どうすればこれを行うことができますか？編集可能なフィールドを含む新しい行をテーブルに追加する「追加」ボタンと、データベースにデータを追加する「送信」ボタンが必要になるはずです。

基本的に、これがどのように行われるかについての簡単な説明はこれまでにないほど役に立ちます。また、このようなことで私を助けてくれる良いチュートリアルやウェブサイトを知っている人がいたら教えてください。

前もって感謝します。

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

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

あなたの質問の説明を考えると、@ Kirk Wollが言及したGridViewまたはRepeaterを使用した方が良いと思います。

編集-また、ここで本を購入せずに学習したい場合、あなたが絶対に精通する必要があるいくつかのサイトがあります：

スコット・ガスリーのブログ
ローラの4人の男
[〜＃〜] msdn [〜＃〜]
Code Project Asp.Net

44
Joel Etherton

カークが言ったことに加えて、「遊び回る」だけではasp.netの学習に役立たないことを伝えたいと思います。無料で非常に優れたチュートリアルがたくさんあります。
asp.net公式サイトのチュートリアルと 4GuysFromRolla サイトをご覧ください

7
Mohamad Alhamoud

ASP.NET WebFormsはこの方法では機能しません。上記のものは通常のHTMLであるため、ASP.NETはアイテムを追加/削除する機能を提供しません。やりたいことは、Repeaterコントロール、または場合によってはGridViewを使用することです。これらのコントロールは、コードビハインドで使用できます。たとえば、Repeaterは、新しいアイテム（行）を追加できる "Items"プロパティを公開します。コードフロント（.aspxファイル）で、本文行がどのように見えるかをスタブ化するItemTemplateを提供します。 Webにはリピーター向けのチュートリアルがたくさんありますので、詳細情報を入手するために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

「サーバー側」コードと「クライアント側」コードの概念を理解する必要があります。開始しなければならなかったのは久しぶりですが、 http://www.asp.net にあるビデオチュートリアルから始めてください。

2つの注意点：VS2010を使用している場合、ASP.NET用に選択できる2つの異なるフレームワークがあります：WebFormsとASP.NET MVC2。 WebFormsは古い従来の方法であり、MVC2はMSによってWebFormsの代替ではなく代替として位置付けられていますが、今後数年間でコミュニティがそれをどのように処理するかがわかります。とにかく、与えられたチュートリアルが話しているものに注意を払ってください。

2
Jim L

Webフォームでasp：Tableを使用して、コードでビルドできます。

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

また、asp.netでチュートリアルなどを確認してください。

2
Mike Cheel

テーブル内の行に対して動的に作成

以下のリンクをご覧ください

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

2
kiran

JS経由で追加するためのリンク https://www.youtube.com/watch?v=idyyQ23joy

以下のリンクもご覧ください。これにより、行を動的に動的に追加できます。 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