Asp.Net将UserControl添加到页面

时间:2010-02-11 17:36:04

标签: asp.net jquery user-controls server-side

我有一个ASP.Net网站,在其中一个页面上我使用转发器来渲染UserControl的几次迭代,UserControl包含第二个UserContol,它有两个文本框,我的用户必须输入信息。我希望能够让我的用户按下一个按钮,并将第二个UserControl的另一个实例(带有两个文本框)添加到我原来的UserControl,这样用户就可以在屏幕上显示第一个UserControl的4个文本框。如果我尝试将第二个UserControl添加到第一个的给定迭代中,我看到的问题是页面回发导致从页面中删除任何其他这些第二个用户控件。

有没有人知道使用JQuery的方法?我有三篇帖子描述了如何使用服务器端动态控件和/或AJAX来解决这个问题,但是我们决定专注于JQuery解决方案,因为这种服务器端机制在资源方面对我们而言过于昂贵。

我一直在研究Zincorp的建议,现在让JQuery正在克隆一个文本框,但是在使用服务器端的Request.Form集合来迭代控件时遇到了麻烦。任何人都可以考虑如何迭代Request.Form集合?

好吧,我认为使用Request.Form.AllKeys集合迭代控件的问题原来是我使用的是HTML文本框,而不是ASP TextBox控件。显然,Request.Forms.AllKeys集合只包含ASP控件,而不是HTML控件。

我现在看到的问题是,当我在JQuery中克隆控件,然后使用提交按钮提交我的页面时,2个控件具有相同的ID,因此通过http组合(我认为)到一个ASP TextBox控件包含两个值,并带有逗号分隔符(例如-40,20)。任何人都知道如何获得分配给克隆的ASP TextBox的新ID?

以下是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>

这是更新的服务器端代码,我正在尝试迭代Request.Form集合中的项目以从中获取信息:

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 个答案:

答案 0 :(得分:1)

简短的回答是,您必须在初始化ViewState之前添加控件。

此网站上的视频提供了有关添加动态控件的精彩指南。 http://www.asp.net/%28S%28wnmvzu45umnszm455c1qs522%29%29/learn/ajax-videos/video-286.aspx

答案 1 :(得分:1)

这可能不是ViewState问题。这可能是第一个看的地方,但在那之后你需要确保你的动态控件实际上是在每次加载时创建的。

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

答案 2 :(得分:1)

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

你实际需要:

1)在客户端重复控制/标记

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

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

我不打算提供代码,但这里有一些想法:

1)使用jQuery的.clone()方法(http://api.jquery.com/clone/)复制由包含文本框的usercontrol呈现的标记。也许将它们包装在没有runat =“server”的div中,以便您可以通过ID轻松获取它。您可能需要以递归方式遍历克隆元素中的子项并向其附加#以避免任何冲突的标识符。 (例如,nameTextBox_1,nameTextBox_2等)

2)在回发上,使用服务器端的Request.Form集合来获取文本框值。迭代它并阻止其键以“nameTextBox _”开头的所有项目。

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

答案 3 :(得分:0)

我相信您遇到了一个viewstate问题。您的动态控件未被持久化。如果你还没有,请阅读Dave Reed的优秀文章Truly Understanding Viewstate。请特别注意“5.以编程方式初始化动态创建的控件”部分,该部分适用于您遇到的问题。