Question

如何在页面加载后使动态元素停留，并将该动态元素内的数据传输到下一页？

我需要添加一个包含复选框和文本框的新行。我使用Clone()方法创建了一个新行。但是，当我点击提交时，新行已经添加了新数据。

有人告诉我，clone()方法会产生一个临时元素，并且在页面加载后它不会停留。 那么，我应该使用create（）新元素吗？我也搜索其他方法，其中某些方法使用asp：placeholder。

我的下一个问题，我想如何在该动态元素中传输数据？ 使用viewstate或session状态？因为我没有将它绑定到任何严格的数据库和我所做的表单，只是一个临时设计，并且该功能应该在测试完成时起作用。

对于那个表单，我试图避免使用表格格式，以及目前div布局中的所有内容。

我尝试了很多方法，从javascript到jquery，从clone()到create()方法。但是他们都没有给出我想要的结果。我在aspx网络表单中使用VS2012。非常感谢您的帮助！

下面是我的行代码：

 <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：按钮时允许网页回发。然后处理点击事件以进行添加，删除和删除。

要添加行，请参阅此文章：https://msdn.microsoft.com/en-us/library/kyt0fzt1.aspx

如何将数据传输到另一个页面并使动态元素保持不变？

1 个答案: