วิธีการแสดงข้อมูลแบบลำดับชั้น โดยใช้ตัวควบคุม Repeater ที่ซ้อนกันและ Visual C#สุทธิ

การแปลบทความ การแปลบทความ
หมายเลขบทความ (Article ID): 306154 - ผลิตภัณฑ์ที่เกี่ยวข้องในบทความนี้
ขยายทั้งหมด | ยุบทั้งหมด

เนื้อหาบนหน้านี้

สรุป

บทความนี้อธิบายวิธีการใช้ตัวควบคุมRepeaterซ้อนเพื่อแสดงข้อมูลตามลำดับชั้น คุณสามารถนำแนวคิดนี้ เมื่อต้องการผูกกับรายการตัวควบคุมอื่น ๆ


ผูกกับตารางหลัก

  1. เริ่ม Microsoft Visual Studioการเปลี่ยนแปลง
  2. บนเมนูแฟ้มชี้ไปที่สร้างและจากนั้น คลิกโครงการ
  3. คลิกVisual C# โครงการภายใต้โครงการชนิดและจากนั้น คลิก ASPแอพลิเคชันเว็บ Asp.net ภายใต้แม่แบบ
  4. ในกล่องตำแหน่งที่ตั้งลบ WebApplication#และ แล้ว พิมพ์ NestedRepeater. ถ้าคุณใช้เซิร์ฟเวอร์ท้องถิ่น ปล่อยให้ชื่อเซิร์ฟเวอร์เป็นhttp://localhost เส้นทางต่อไปนี้ปรากฏขึ้นในกล่องตำแหน่งที่ตั้ง:
    http://localhost/ NestedRepeater
    คลิกตกลง
  5. ในการแก้ไขปัญหา Explorerคลิกขวาชื่อโหนโครงการNestedRepeaterชี้ไปที่เพิ่มและจากนั้น คลิกเพิ่มฟอร์มเว็บ
  6. การตั้งชื่อแบบฟอร์มเว็บ พิมพ์NestedRepeaterและคลิกเปิด
  7. สร้างเว็บฟอร์มใหม่ เปิดใช้งานในมุมมองออกแบบในตัว สภาพแวดล้อมแบบครบวงจรการพัฒนาระบบ (IDE) ของ Microsoft Visual Studioการเปลี่ยนแปลง จาก กล่องเครื่องมือ เลือกตัวควบคุมRepeaterและลากไปยังหน้าเว็บฟอร์ม
  8. การเปลี่ยนแปลงคุณสมบัติIDของตัวควบคุมนี้Repeaterไป parentRepeater.
  9. สลับไปยังมุมมอง HTML สำหรับแบบฟอร์มเว็บนี้ เมื่อต้องทำเช่นนี้ ให้คลิก แท็บHTMLที่มุมล่างซ้ายของตัวออกแบบ ตัวควบคุมRepeaterสร้างโค้ด HTML ต่อไปนี้:
    <asp:Repeater id="parentRepeater" runat="server"></asp:Repeater>
    					
  10. เพิ่มรหัสต่อไปนี้ในแท็กRepeater :
    <itemtemplate>
         <b><%# DataBinder.Eval(Container.DataItem, "au_id") %></b><br>
    </itemtemplate>
    					
    หลังจากที่คุณทำเช่นนั้น โค้ด HTML สำหรับRepeaterจะเป็นดังนี้:
    <asp:Repeater id="parentRepeater" runat="server">
    	<itemtemplate>
    	     <b><%# DataBinder.Eval(Container.DataItem, "au_id") %></b><br>	
          </itemtemplate>
    </asp:Repeater>
    					
  11. ในการแก้ไขปัญหา Explorer คลิกขวาNestedRepeater.aspxและจากนั้น คลิกมุมมองรหัสสลับไป NestedRepeater.aspx.cs ของรหัส-behind แฟ้ม
  12. เพิ่มการประกาศ namespace ดังต่อไปนี้ที่ด้านบนของ แฟ้ม:
    using System.Data;
    using System.Data.SqlClient;
    					
  13. เพิ่มรหัสต่อไปนี้ไปยังเหตุการณ์Page_Loadเพื่อสร้างการเชื่อมต่อกับฐานข้อมูลPubsแล้วผูกตารางผู้เขียนไปยังตัวควบคุมRepeater :
          public void Page_Load(object sender, EventArgs e)
          {
             //Create the connection and DataAdapter for the Authors table.
             SqlConnection cnn = new SqlConnection("server=(local);database=pubs; Integrated Security=SSPI");
             SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);
    
             //Create and fill the DataSet.
             DataSet ds = new DataSet();
             cmd1.Fill(ds,"authors");
             //Insert code in step 4 of the next section here.
             //Bind the Authors table to the parent Repeater control, and call DataBind.
             parentRepeater.DataSource = ds.Tables["authors"];
             Page.DataBind();
    
             //Close the connection.
             cnn.Close();
           }
    					
    หมายเหตุ: คุณอาจจำเป็นต้องปรับเปลี่ยนสายอักขระการเชื่อมต่อฐานข้อมูลเป็น ความเหมาะสมกับสภาพแวดล้อมของคุณ

  14. บันทึกแฟ้มทั้งหมด
  15. ใน โซลูชัน Explorerคลิกขวา NestedRepeater.aspx และคลิก ตั้งค่าเป็นเพจเริ่มต้น.
  16. บนเมนูสร้างให้คลิกสร้างโซลูชันการคอมไพล์โครงการ
  17. ดูขอบเพจในเบราว์เซอร์ และจากนั้น ตรวจสอบว่า หน้าการทำงานด้วยเหตุนี้จึงก้าว

    ผลผลิตควรปรากฏดังนี้:
    • 172-32-1176
    • 213-46 8915
    • 238-95-7766
    • 267-41-2394
    • ...

ผูกกับตารางลูก

  1. ในมุมมอง HTML ของเพ NestedRepeater.aspx ค้นหา บรรทัดของรหัสต่อไปนี้:
    <b><%# DataBinder.Eval(Container.DataItem, "au_id") %></b><br>
    						
    เพิ่มรหัสต่อไปนี้หลังจากรหัสนี้:
    <asp:repeater id="childRepeater" runat="server">
    		<itemtemplate>
    	            <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%><br>
    		</itemtemplate>
    </asp:repeater>
    						
    รหัสใหม่นี้เพิ่มตัวควบคุมRepeaterสองคุณสมบัติItemTemplateของพาเรนต์ควบคุมRepeater
  2. ตั้งค่าคุณสมบัติแหล่งข้อมูลสำหรับลูกRepeaterควบคุมได้ดังนี้:
    <asp:repeater ... datasource='<%# ((DataRowView)Container.DataItem)
          .Row.GetChildRows("myrelation") %>' >
    					
    หลังจากที่คุณได้ตั้งค่าคุณสมบัติแหล่งข้อมูลสำหรับลูกตัวควบคุมRepeaterโค้ด HTML สำหรับตัวควบคุมสองRepeater (หลักและรอง) ปรากฏเป็นดังนี้:
    <asp:Repeater id="parentRepeater" runat="server">
    	<itemtemplate>
    		<b>
    		 <%# DataBinder.Eval(Container.DataItem, "au_id") %>
    		</b>
    		<br>
    		<asp:repeater id="childRepeater" runat="server" 
                        datasource='<%# ((DataRowView)Container.DataItem)
          .Row.GetChildRows("myrelation") %>' >
    			<itemtemplate>
    				<%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%><br>	
    			</itemtemplate>
    		</asp:Repeater> 
    	</itemtemplate>
    </asp:Repeater>
    					
  3. เพิ่มคำสั่งต่อไปนี้ของหน้าไปยังด้านบนของหน้า:
    <%@ Import Namespace="System.Data" %>
    					
  4. ในหน้ารหัส-behind แทนบรรทัดต่อไปนี้ในเหตุการณ์Page_Load
    //Insert code in step 4 of the next section here.
    						
    ด้วยรหัสต่อไปนี้:
             //Create a second DataAdapter for the Titles table.
             SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);
             cmd2.Fill(ds,"titles");
    
             //Create the relation between the Authors and Titles tables.
             ds.Relations.Add("myrelation",
             ds.Tables["authors"].Columns["au_id"],
             ds.Tables["titles"].Columns["au_id"]);
    
    					
    นี้เพิ่มตารางชื่อเรื่องลงในชุดข้อมูลและเพิ่มความสัมพันธ์ระหว่างผู้เขียนและชื่อเรื่องแล้ว ตาราง
  5. บันทึก และคอมไพล์แอพลิเคชัน
  6. ดูเพจในเบราว์เซอร์ และจากนั้น ตรวจสอบว่า เพจนั้น ทำงานจน ผลผลิตควรปรากฏดังนี้:
    172-32-1176
    PS3333
    213-46 8915
    BU1032
    BU2075
    238-95-7766
    PC1035
    267-41-2394
    BU1111
    TC7777
    ...

รายชื่อรหัสทั้งหมด

Nestedrepeater.aspx

<%@ Page language="c#" Codebehind="NestedRepeater.aspx.cs" AutoEventWireup="false" Inherits="NestedRepeater.NestedRepeater" %>
<%@ Import Namespace="System.Data" %>

<html>
<body>
<form runat=server>

<!-- start parent repeater -->
<asp:repeater id="parentRepeater" runat="server">
   <itemtemplate>
      <b><%# DataBinder.Eval(Container.DataItem,"au_id") %></b><br>

      <!-- start child repeater -->
      <asp:repeater id="childRepeater" datasource='<%# ((DataRowView)Container.DataItem)
      .Row.GetChildRows("myrelation") %>' runat="server">

         <itemtemplate>
            <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%><br>
         </itemtemplate>
      </asp:repeater>
      <!-- end child repeater -->

   </itemtemplate>
</asp:repeater>
<!-- end parent repeater -->

</form>
</body>
</html>
				

Nestedrepeater.aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NestedRepeater
{
   public class NestedRepeater : System.Web.UI.Page
   {
      protected System.Web.UI.WebControls.Repeater parentRepeater;
      public NestedRepeater()
      {
         Page.Init += new System.EventHandler(Page_Init);
      }
      public void Page_Load(object sender, EventArgs e)
      {
         //Create the connection and DataAdapter for the Authors table.
         SqlConnection cnn = new SqlConnection("server=(local);database=pubs; Integrated Security=SSPI ;");
         SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);

         //Create and fill the DataSet.
         DataSet ds = new DataSet();
         cmd1.Fill(ds,"authors");

         //Create a second DataAdapter for the Titles table.
         SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);
         cmd2.Fill(ds,"titles");

         //Create the relation bewtween the Authors and Titles tables.
         ds.Relations.Add("myrelation",
         ds.Tables["authors"].Columns["au_id"],
         ds.Tables["titles"].Columns["au_id"]);

         //Bind the Authors table to the parent Repeater control, and call DataBind.
         parentRepeater.DataSource = ds.Tables["authors"];
         Page.DataBind();

         //Close the connection.
         cnn.Close();
      }
      private void Page_Init(object sender, EventArgs e)
      {
         InitializeComponent();
      }
      private void InitializeComponent()
      {    
         this.Load += new System.EventHandler(this.Page_Load);
      }
   }
}
				

ข้อมูลอ้างอิง

สำหรับข้อมูลเพิ่มเติม โปรดดูหัวข้อต่อไปนี้ในการ Microsoftการจัดการและส่งชุดพัฒนาซอฟต์แวร์ (SDK):
เพิ่มความสัมพันธ์ระหว่างตาราง

การนำทางของความสัมพันธ์ระหว่างตาราง

ตัวควบคุมเซิร์ฟเวอร์ของเว็บ repeater

คุณสมบัติ

หมายเลขบทความ (Article ID): 306154 - รีวิวครั้งสุดท้าย: 12 มิถุนายน 2555 - Revision: 5.0
ใช้กับ
  • Microsoft ASP.NET 1.0
  • Microsoft ASP.NET 1.1
  • Microsoft Visual C# .NET 2002 Standard Edition
  • Microsoft Visual C# .NET 2003 Standard Edition
Keywords: 
kbdatabinding kbhowtomaster kbservercontrols kbmt KB306154 KbMtth
แปลโดยคอมพิวเตอร์
ข้อมูลสำคัญ: บทความนี้แปลโดยซอฟต์แวร์การแปลด้วยคอมพิวเตอร์ของ Microsoft แทนที่จะเป็นนักแปลที่เป็นบุคคล Microsoft มีบทความที่แปลโดยนักแปลและบทความที่แปลด้วยคอมพิวเตอร์ เพื่อให้คุณสามารถเข้าถึงบทความทั้งหมดในฐานความรู้ของเรา ในภาษาของคุณเอง อย่างไรก็ตาม บทความที่แปลด้วยคอมพิวเตอร์นั้นอาจมีข้อบกพร่อง โดยอาจมีข้อผิดพลาดในคำศัพท์ รูปแบบการใช้ภาษาและไวยากรณ์ เช่นเดียวกับกรณีที่ชาวต่างชาติพูดผิดเมื่อพูดภาษาของคุณ Microsoft ไม่มีส่วนรับผิดชอบต่อความคลาดเคลื่อน ความผิดพลาดหรือความเสียหายที่เกิดจากการแปลเนื้อหาผิดพลาด หรือการใช้บทแปลของลูกค้า และ Microsoft มีการปรับปรุงซอฟต์แวร์การแปลด้วยคอมพิวเตอร์อยู่เป็นประจำ
ต่อไปนี้เป็นฉบับภาษาอังกฤษของบทความนี้:306154

ให้ข้อเสนอแนะ

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com