ASP.net ตารางแบบไดนามิกของกล่องข้อความ

ฉันมีรายการสตริง 2 รายการ และฉันต้องการสร้างตารางของกล่องข้อความแบบไดนามิก:

List<string> X = {"A", "B", "C"};
List<string> Y = {"1", "2", "3", "4"};

          A     B     C
     1   TBX   TBX   TBX
     2   TBX   TBX   TBX
     3   TBX   TBX   TBX
     4   TBX   TBX   TBX

     [Button]

เมื่อฉันป้อนข้อมูลลงในกล่องข้อความและคลิกปุ่ม ฉันต้องการที่จะวนซ้ำกล่องข้อความเหล่านี้และกำหนดพิกัด "X" และ "Y" ที่เกี่ยวข้องกับแต่ละกล่องข้อความ

ฉันอาจทราบวิธีสร้างตารางของกล่องข้อความแบบไดนามิกได้ แต่ฉันคิดว่าจะประสบปัญหาเมื่อโพสต์ข้อมูล ฉันจะรับค่าจากกล่องข้อความที่สร้างขึ้นแบบไดนามิกหลังจาก postback ได้อย่างไร

ฉันจะไม่มีปัญหาในการวนซ้ำและตรรกะจริง แต่ฉันไม่สามารถหาวิธีนำข้อมูลลงในคอนเทนเนอร์เพื่อให้สามารถวนซ้ำได้ ฉันจะต้องสร้างกล่องข้อความแบบไดนามิกอีกครั้งในขณะที่อ่านข้อมูลที่โพสต์หรือไม่ มันมีลักษณะอย่างไร?


c# asp.net webforms c#-4.0
person Mark    schedule 02.07.2012    source แหล่งที่มา
comment
แบบฟอร์มเว็บ นี่เป็นการแฮ็กการป้อนข้อมูลสำหรับการป้อนข้อมูลแบบ tubular จะมีสิ่งที่จาวาสคริปต์ที่สามารถแยกวิเคราะห์ได้   -  person Mark    schedule 03.07.2012

คำตอบ (2)


arrow_upward
5
arrow_downward

นี่เป็นอีกแนวทางหนึ่ง คุณสามารถมีตัวยึดตำแหน่งในหน้า asp.net ในโค้ดด้านหลังสร้างตารางแบบไดนามิกพร้อมกล่องข้อความแบบไดนามิกและแทรกลงในตัวยึดตำแหน่ง ในกรณีนี้ คุณสามารถควบคุม ID ของแต่ละกล่องข้อความได้ ในการโพสต์กลับค่าที่ป้อนลงในกล่องข้อความจะยังคงอยู่ (เนื่องจาก ID มีความชัดเจน คุณสามารถจัดการจาวาสคริปต์ได้เช่นกัน)

นี่คือ aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicControls.aspx.cs" Inherits="Test2.DynamicControls" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:PlaceHolder ID="PHDynamicTable" runat="server"></asp:PlaceHolder>
        <asp:Button runat="server" ID="btnSubmit" Text="Submit" 
            onclick="btnSubmit_Click" />
    </div>
    </form>
</body>
</html>

โค้ดอยู่ข้างหลัง

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Test2
{
    public partial class DynamicControls : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected override void OnPreInit(EventArgs e)
        {
            base.OnPreInit(e);
            CreateTextBoxesInTable();
        }

        private void CreateTextBoxesInTable()
        {
            PHDynamicTable.Controls.Clear();

            List<string> X = new List<string>() { "A", "B", "C" };
            List<string> Y = new List<string>() { "1", "2", "3", "4" };

            Table table = new Table();
            table.ID = "dynamicTable";

            TableRow tr;
            foreach (string y in Y)
            {
                tr = new TableRow();

                foreach (string x in X)
                { 
                    TableCell tc = new TableCell();

                    TextBox textBox = new TextBox();
                    textBox.ID = "txt_" + x + y;
                    tc.Controls.Add(textBox);

                    tr.Cells.Add(tc);
                }

                table.Rows.Add(tr);
            }

            PHDynamicTable.Controls.Add(table);
        }

        protected void btnSubmit_Click(object sender, EventArgs e)
        {
            if (PHDynamicTable.Controls.Count > 0)
            {
                Table dynamicTable = (Table)PHDynamicTable.FindControl("dynamicTable");
                if (dynamicTable != null)
                {
                    foreach (TableRow tr in dynamicTable.Rows)
                    {
                        foreach (TableCell tc in tr.Cells)
                        {
                            TextBox textBox = (TextBox)tc.Controls[0];
                            string text = textBox.Text;
                            //Do whatever you want with the control
                        }
                    }
                }
            }
        }
    }
}

ภาพหน้าจอบางส่วน

หน้าจออินพุตพร้อมข้อมูล

ป้อนคำอธิบายรูปภาพที่นี่

ใน postback (ส่ง)

ป้อนคำอธิบายรูปภาพที่นี่

หลังจากส่ง

ป้อนคำอธิบายรูปภาพที่นี่

person Prashanth Thurairatnam    schedule 03.07.2012
comment
ขอบคุณ. โดยพื้นฐานแล้วฉันเริ่มต้นเส้นทางนี้ แต่วิธีที่คุณทำนั้นสะอาดกว่ามาก - person Mark; 03.07.2012
comment
ฉันคิดว่าสิ่งนี้ดูสมบูรณ์แบบสำหรับสิ่งที่ฉันทำ แต่ PHDynamicTable จะ 'ไม่มีอะไร' ถ้าฉันเรียก CreateTextBoxesInTable จาก OnPreInit ถ้าฉันเรียกมันจาก Page_Load ในส่วนคำสั่ง 'If Not IsPostback' ตารางจะหายไปหลังจากที่ฉันคลิกปุ่มอัปเดต ฉันต้องเจาะลึกลำดับเหตุการณ์การโหลดหน้าเว็บ คงไม่มีเรื่องเลวร้ายหรอก - person Resource; 15.05.2015
comment
@ user910683 คุณน่าจะเห็นสิ่งนี้แล้ว แต่ขอแจ้งให้ทราบอีกครั้ง: msdn.microsoft.com/en-us/library/ ms178472.aspx#lifecycle_events - person Prashanth Thurairatnam; 16.05.2015
comment
ขอบคุณครับ ประจันต์. ฉันได้ดูสิ่งนั้นแล้ว และมันช่วยให้ฉันระบุได้ว่าสิ่งที่ฉันต้องการคือ OnPreLoad ฉันใช้ VB.NET ไม่ใช่ C# (ไม่ใช่ตามตัวเลือก!) ดังนั้นรหัสของฉันจึงไม่เหมือนกับรหัสที่ให้มาทุกประการ เป็นการแปลโดยตรง และความเข้าใจของฉันก็คือลำดับของเหตุการณ์วงจรชีวิตไม่ได้รับผลกระทบจากภาษาที่ใช้ - person Resource; 18.05.2015

arrow_upward
2
arrow_downward

นอกเหนือจากปัญหาการใช้งานแล้ว ฉันจะถือว่าคุณอยู่ใน ASP.NET Webforms ไม่ใช่ ASP.NET MVC บนเว็บฟอร์ม นี่กลายเป็นฝันร้ายไปแล้ว คุณสามารถซ้อนตัวควบคุมสองตัวได้อย่างแน่นอน แหล่งข้อมูลของตัวควบคุมหนึ่งจะกลายเป็นรายการแรก และแหล่งข้อมูลที่สองจะเป็นรายการที่สอง จากนั้นในเทมเพลตทวนสัญญาณรอง คุณใส่ asp:textbox อย่างไรก็ตาม ID ที่นี่แม้ว่าจะตั้งค่าไว้อย่างชัดเจนก็ตามจริง ๆ แล้วจะเป็นค่าที่สร้างขึ้นเพราะตัวทำซ้ำคือสิ่งที่รู้จักใน ASP.nET Webforms ว่าเป็นคอนเทนเนอร์การตั้งชื่อ ซึ่งหมายความว่าค่าของ ID จะมีการเปลี่ยนแปลงขณะรันไทม์

ใน postback คุณสามารถวนซ้ำบนแผนผังการควบคุมของตัวทวนสัญญาณหลักเพื่อค้นหาตัวทวนสัญญาณลูก จากนั้นใน child Repeater คุณสามารถวนซ้ำส่วนควบคุมของ Repeater นั้นเพื่อค้นหากล่องข้อความของคุณ สิ่งที่ต้องการ:

<asp:Repeater>
    <itemtemplate>
        <asp:repeater>
            <itemtemplate>
                <asp:textbox />
            </itemtemplate>
        </asp:repeater>   
    </itemtemplate>
</asp:repeater>

จากนั้นในโค้ดด้านหลังใน Post Back [pseudo-code]

foreach(Control c in myTopRepeater.Controls){
    if(c == RepeaterControl) //is of type repeater. again, pseudo code
    {
         foreach(Control subC in c)
         {
             if(subC == textBox)
             {
                 //Compare generated name, etc to my Lists

             }
         }
    }
}

การอ่านการตั้งชื่อคอนเทนเนอร์อาจช่วยได้ คุณสามารถรับการตั้งค่าการตั้งชื่อที่คาดเดาได้ แต่ไม่ได้ใช้งานง่าย 100% http://www.4guysfromrolla.com/articles/031710-1.aspx

ขอให้โชคดี!

person Richthofen    schedule 03.07.2012
comment
ใช่ นี่คือวิธีที่ฉันแนะนำให้ทำในเว็บฟอร์ม - person saille; 03.07.2012