如何將數據傳輸到另一個頁面並保留動態元素？

Question

如何在頁面加載后使動態元素保留，並將該動態元素中的數據轉移到下一頁？

我需要添加一個包含復選框和文本框的新行。 我正在使用Clone()方法創建新行。 但是，當我單擊提交時，新行消失了，並添加了新數據。

有人告訴我clone()方法將創建一個臨時元素，並且在頁面加載后不會保留。 那么，我應該使用create（）新元素嗎？ 我還搜索另一種方法，其中某些方法使用asp：placeholder。

還有我的下一個問題， 我想如何在該動態元素中傳輸數據？ 通過使用viewstate或session狀態？ 因為我沒有將其綁定到任何剛性數據庫和所形成的表單中，所以在完成測試時，應該只有臨時設計和功能可以正常工作。

對於這種形式，我正在嘗試避免使用表格格式，並且目前避免使用div布局中的所有內容。

我嘗試了很多方法，從javascript到jquery，從clone()到create()方法。 但是他們都不給我想要的結果。 我正在使用VS2012 （以aspx Web形式）。 非常感謝您的幫助！

下面是我的行代碼：

 <div id="rows" class="block">
            <div class="p2">
                <input type="checkbox" class="checkbox" runat="server"/>
                <input id="txt1" type="text" class="clsTxtBox10char" runat="server" maxlength="16" value="0.00" /> &nbsp;
            </div>
            <div class="p3">&nbsp;</div>
            <div class="p4">
                <input id="txt2" type="text" class="clsTxtBox10char" runat="server" maxlength="16" value="0.00"/> &nbsp;
            </div>
            <div class="p5">&nbsp;</div>
            <div class="p6">
                <input id="txt3" type="text" class="clsTxtBox10char" runat="server" maxlength="16" value="0.00"/> &nbsp;
                &nbsp;
                <span style="color:red;">*</span>
            </div>
            </div>

            <div id="btn" class="block" style="text-align:center;">
                <asp:Button ID="addrow" runat="server" CssClass="clsButton" Text="Add Row" />
                &nbsp;
            <asp:Button ID="remove" runat="server" CssClass="clsButton" Text="Remove Row" width="90" />
                &nbsp;
            <asp:Button ID="delete" runat="server" CssClass="clsButton" Text="Delete ATL"/>
            </div>

以下是我的javascript代碼：

var cloneCount = 1;
    //add new row
   $("#addrow").click(function () {
       $('#rows')
         .clone(true).find('input:text').attr('id', 'txts' + cloneCount++).val("").end()
         .attr('id', 'rows' + cloneCount++, 'class', 'block')
         .insertAfter('[id^=rows]:last');
       return false;
   });

   //Remove new row
   $(document).on('click', '#remove', function () {
       $('#rows' + --cloneCount).remove();
       return false;
   });

   //delete atl
   $(document).on('click', '#delete', function () {
       if (!$('.checkbox').prop("checked")) {
           $find('.checkbox:checked').remove();
       }
   });

后台代碼：

protected void addrow_click(object sender, EventArgs e)
{
    Panel Panel1 = new Panel();

    for (int s = 0; s > 1; s++)
    {
        string input = string.Empty;

        //div that acts like row
        var row = new HtmlGenericControl("div");
        row.ID = "rows" + s.ToString();
        row.Attributes.Add("class", "block");

        var c1 = new HtmlGenericControl("div");
        c1.Attributes.Add("class", "p2");
        //add inside div row
        for (int i = 0; i > 0; i++)
        {
            input += "<input id=\"cb" + i.ToString() + "\" type=\"checkbox\" class=\"checkbox\" runat=\"server\" > </input>"
                + "&nbsp;" + "<input id=\"tb" + i.ToString() + "\" type=\"text\" class=\"clsTxtBox10char\" runat=\"server\"> </input>";
        }
        //add the string in innerHTML as
        c1.InnerHtml = input;
        row.Controls.Add(c1);

        var c2 = new HtmlGenericControl("div");
        c2.Attributes.Add("class", "p3");
        row.Controls.Add(c2);

        var c3 = new HtmlGenericControl("div");
        c3.Attributes.Add("class", "p4");
        //add inside div row
        for (int i = 0; i > 0; i++)
        {
            input += "<input id=\"tbm" + i.ToString() + "\" type=\"text\" class=\"clsTxtBox10char\" runat=\"server\"> </input>";
        }
        //add the string in innerHTML as
        c3.InnerHtml = input;
        row.Controls.Add(c3);

        var c4 = new HtmlGenericControl("div");
        c4.Attributes.Add("class", "p5");
        row.Controls.Add(c4);

        var c5 = new HtmlGenericControl("div");
        c5.Attributes.Add("class", "p6");
        //add inside div row
        for (int i = 0; i > 0; i++)
        {
            input += "<input id=\"tbe" + i.ToString() + "\" type=\"text\" class=\"clsTxtBox10char\" runat=\"server\"> </input>"
                + "&nbsp;" + "<span style=\"color:red;\">*</span>";
        }
        //add the string in innerHTML as
        c5.InnerHtml = input;
        row.Controls.Add(c5);

        Panel1.Controls.Add(row);
        Panel1.Controls.Add(new LiteralControl("<br />"));
    }
}

protected void btnSubmit_Click(object sender, EventArgs e)
    {

    Response.Redirect("new_page.aspx");

    }

Answer 1

嘗試使用后面的代碼而不是jQuery添加動態行。 為了持久化runat =“ server”元素，您需要將它們綁定到服務器端后面的代碼。 我懷疑當您嘗試在客戶端執行此操作時比較棘手，因為服務器端無法知道您已使用jQuery創建了新元素。

刪除jQuery代碼，並在單擊asp：button時允許網頁回發。 然后處理單擊事件以進行添加，刪除和刪除。

要添加行，請參閱本文： https : //msdn.microsoft.com/zh-cn/library/kyt0fzt1.aspx