Asp。Net向页面添加UserControl

I have an ASP.Net web site and on one of the pages I'm using a repeater to render several iterations of a UserControl, that UserControl contains a second UserContol that has two text boxes that my User must enter information into. I want to be able to have my user push a button and add another instance of the second UserControl (with the two textboxes) to my original UserControl, so that the user has 4 textboxes displayed on the screen for the first UserControl. The problem I am seeing if I try to add the second UserControl to a given iteration of the first, is that the page postback causes any other of these second user controls to be deleted from the page.

我有一个ASP。Net web站点和其中一个页面上，我正在使用一个中继器来呈现一个UserControl的多个迭代，这个UserControl包含第二个UserContol，它有两个文本框，我的用户必须输入信息。我希望能够让我的用户按下一个按钮，并将第二个UserControl(带有两个文本框)的另一个实例添加到原来的UserControl中，以便用户在屏幕上显示第一个UserControl的4个文本框。如果我试图将第二个UserControl添加到第一个迭代的给定迭代中，我看到的问题是，页面回发会导致从页面中删除第二个用户控件中的任何其他控件。

Does anyone know of a way to do this using JQuery? I've had three posts that describe how to solve this problem using server side dynamic controls, and/or AJAX, but we've decided to focus on a JQuery solution because this server side mechanism is too costly in terms of resources for us.

有人知道用JQuery实现这个目的的方法吗?我有三篇文章描述了如何使用服务器端动态控件和/或AJAX解决这个问题，但是我们决定将重点放在JQuery解决方案上，因为服务器端机制的资源成本太高。

I've been working on the suggestion by Zincorp below, and now have the JQuery working to clone a textbox, but having trouble using the server side Request.Form collection to iterate over the controls. Can anyone give adivce on how to iterate over the Request.Form collection?

我一直在研究Zincorp的建议，现在JQuery已经在克隆一个文本框，但是在使用服务器端请求时遇到了麻烦。对控件进行迭代的表单集合。有人能就如何迭代请求给出建议吗?形式收集?

OK, I think the problem with iterating over the controls using the Request.Form.AllKeys collection turned out to be that I was using an HTML Textbox, rather than an ASP TextBox Control. Apparently the Request.Forms.AllKeys collection only contains ASP controls, not HTML controls.

我认为使用Request.Form遍历控件的问题。AllKeys集合原来是我使用的是HTML文本框，而不是ASP文本框控件。显然Request.Forms。AllKeys集合只包含ASP控件，而不包含HTML控件。

The problem I am seeing now is that when I clone the control in JQuery, and then submit my page with the submit button, the 2 controls have the same ID, and so are combined (I think) by http into one ASP TextBox Controls containing both values, with a comma delimiter (e.g.- 40,20). Anyone know how to get a new ID assigned to the cloned ASP TextBox?

问题我现在看到的是,当我在JQuery克隆控制,然后提交我的页面提交按钮,2控制相同的ID,因此结合(我认为)通过http成一个ASP包含两个值的文本框控件,用逗号分隔符(例如- 40、20)。谁知道如何得到一个新的ID分配给克隆的ASP文本框?

Here is the updated markup in a sample ASP.Net web appliction:

这是示例ASP中更新的标记。Net web应用:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs"   Inherits="_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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
        <asp:Label runat="server" ID="ProjectDisplay" Text="Project" />
        <asp:TextBox ID="ProjectValue" runat="server" ></asp:TextBox>
        <div id="mydiv" ></div>
        <br />
        <br />
        <br />

    <input id="AddProject" type="button" value="Add Project" />    
        <br />
        <br />


    <asp:Button ID="Submit" runat="server" Text="Submit" onclick="Submit_Click" />

</div>
</form>
</body>
</html>
<script language="jquery" src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" >

$(document).ready(function() {

  $("#AddProject").click(function() {

      var x = $("#ProjectValue").clone();

      x.appendTo("#mydiv");     
  });
});
</script>

And here is the updated server side code where I'm trying to iterated over items in the Request.Form collection to get information from it:

这是更新后的服务器端代码，我在其中尝试遍历请求中的项。收集表格以获取资料:

public partial class _Default : System.Web.UI.Page 
{
protected void Submit_Click(object sender, EventArgs e)
{
    foreach (string s in Request.Form.Keys)
    {
        object x = Request.Form[s];
    }
}

}

4 个解决方案

#1

Before choosing a solution for the problem, consider the problem first:

在为问题选择解决方案之前，首先考虑问题:

You effectively need to:

有效的需要:

1) Duplicate controls/markup on the client-side

1)客户端上复制控件/标记

2) Obtain these values on the server-side on a postback

2)在回发服务器端获取这些值

3) For each of the added "user controls" on the client-side, add them as children of the first user control on the server side.

3)对于客户端上添加的每个“用户控件”，将它们作为服务器端第一个用户控件的子控件添加。

I'm not going to give the code, but here are some ideas:

我不会给出代码，但这里有一些想法:

1) Use jQuery's .clone() method (http://api.jquery.com/clone/) to duplicate the markup being rendered by the usercontrol containing the textboxes. Perhaps wrap them in a div without runat="server" to so that you can easily obtain it by ID. You'll probably need to then recursively iterate through the children in the cloned element and append a # to them to avoid any conflicting identifiers. (eg. nameTextBox_1, nameTextBox_2, etc.)

1)使用jQuery的.clone()方法(http://api.jquery.com/clone/)复制包含文本框的usercontrol呈现的标记。也许在没有runat="server"的div中包装它们，这样就可以很容易地通过ID获取它们。(如。nameTextBox_1 nameTextBox_2等。)

2) On a postback, use the Request.Form collection on the server side to obtain the textbox values. Iterate through it and snag all of the items whose keys start with "nameTextBox_".

2)在回发时，使用请求。在服务器端收集表单以获取文本框值。遍历它并捕获以“nameTextBox_”开头的所有项。

3) For each added "user control" on the client side, create the actual user control on the server side, assign to it the values entered in the textboxes, and then add it to the child controls of the first one. This way the state is maintained upon returning to the user.

3)对于客户端添加的每个“用户控件”，在服务器端创建实际的用户控件，为其分配文本框中输入的值，然后将其添加到第一个文本框的子控件中。这样，状态在返回给用户时得到维护。

#2

The short answer is that you would have to add the controls before the ViewState is initialized.

简而言之，您必须在ViewState初始化之前添加控件。

The video on this site has a nice guide on adding dynamic controls. http://www.asp.net/%28S%28wnmvzu45umnszm455c1qs522%29%29/learn/ajax-videos/video-286.aspx

这个网站上的视频有一个关于添加动态控件的很好的指南。http://www.asp.net/%28s%28wnmvzu45umnszm455c1qs522%29%29/learn/ajax videos/video aspx——286.

#3

This is probably not a ViewState issue. That may be the first place to look, but after that you need to make sure that your dynamic controls are actually being CREATED on each load.

这可能不是ViewState问题。这可能是第一个需要查看的地方，但是在此之后，您需要确保在每个负载上实际创建了动态控件。

Generally speaking, the ViewState is only responsible for restoring STATE to existing controls (hence the name). It is not responsible for recreating controls.

一般来说，ViewState只负责将状态恢复到现有控件(因此是名称)。它不负责重新创建控件。

#4

I believe you are experiencing a viewstate problem. Your dynamic controls are not being persisted. If you haven't already, read Dave Reed's excellent article Truly Understanding Viewstate. Pay particular attention to the section "5. Initializing dynamically created controls programmatically" which applies to the trouble you are experiencing.

我相信你正在经历一个viewstate问题。您的动态控件没有被持久化。如果你还没有读过戴夫·里德的优秀文章《真正理解Viewstate》。特别注意“5”一节。以编程方式初始化动态创建的控件“这适用于您正在经历的麻烦。

#1