ASP.NET无法为div添加多个标签?

时间:2013-03-10 17:19:44

标签: c# webforms

您好,我正在玩一个简单的asp.net网络表单:

    <div id="in_mess" runat=server >

        <div class="dialog" runat=server> 
            <p class="dialog_interior">Test Message</p>
        </div>

    </div>

    <div id="out_mess" runat=server>

    </div>

</div>

<div id="mess_con" runat=server>

        <form runat=server id="form_con" >
            <p><label>Message</label><input type="text" width="250" id="inp_message"></p> <br>
            <p><label>To</label><input type="text" width="100" id="inp_recepeint"></p> <br>
            <asp:Button ID="ButtonChat" text="Chat" runat=server 
                onclick="ButtonChat_Click" />
        </form>



</div>

在后面的代码中我点击了ButtonChat时实现了以下简单函数:

protected void ButtonChat_Click(object sender, EventArgs e)
{
    this.in_mess.Controls.Add(new Label { Text = "Hello", CssClass = "dialog" });
}

问题是我不能让它为div添加多个标签,我添加的标签仍然存在,但据我所知,无论我点击多少次都不会添加新的标签。

我在该行上设置了断点,它显示控件集合的计数在3处保持不变。

我在通过JavaScript添加<p>标签时遇到了类似的问题,我通过停止重新加载页面来修复表单,但我不确定您是否可以将其应用于ASP.NET。

2 个答案:

答案 0 :(得分:2)

您正在思考页面重新加载的问题。在WebForms中,onclick事件会生成完整的回发。动态添加的控件不会自动记住,因此您只需在标记页面上添加1个以上。

可以记住你添加了多少个标签,然后在页面加载时再将它们全部添加回来,但我真的不喜欢这个解决方案。

也许您可以使用onclientclick使用Javascript添加标签?

<script type="text/javascript">
    function ButtonChat_Click(){
        var label = document.createElement("label");
        label.className = "dialog";
        label.createTextNode("Hello");
        document.getElementById("in_mess").appendChild(label);
    }
 </script>

 <div id="in_mess" runat=server >
    <div class="dialog" runat=server> 
        <p class="dialog_interior">Test Message</p>
    </div>

 </div>

 <div id="out_mess" runat=server>

 </div>

 <div id="mess_con" runat=server>

     <form runat=server id="form_con" >
        <p><label>Message</label><input type="text" width="250" id="inp_message"></p> <br>
        <p><label>To</label><input type="text" width="100" id="inp_recepeint"></p> <br>
        <asp:Button ID="ButtonChat" text="Chat" runat=server onclientclick="ButtonChat_Click" />
     </form>

 </div>

答案 1 :(得分:1)

Javascript,这不是唯一的解决方案。要在多个回发中保持页面状态,您必须处理站点视图状态。这对于其他一些事情非常有用,例如将属性值保持在多个回发上。

利用你的ASPX,我会建议以下代码隐藏。我不使用Labels作为ListItems,因为ViewState对象需要是可序列化的。

public partial class _default : System.Web.UI.Page
{
    public List<LabelInfo> LabelInfos
    {
        get
        {
            object listOfLabelInfos = ViewState["Labels"];
            return (listOfLabelInfos == null) ? null : (List<LabelInfo>)listOfLabelInfos;
        }
        set
        {
            ViewState["Labels"] = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // Init the LabelInfo list, if this page load is not a postback.
        if (!IsPostBack)
        {
            LabelInfos = new List<LabelInfo>();
        }
    }

    protected void btnTest_Click(object sender, EventArgs e)
    {
        LabelInfos.Add(new LabelInfo { Text = "TestLabel", CssClass = "TestClass" });

        foreach (LabelInfo l in LabelInfos)
        {
            this.in_mess.Controls.Add(new Label { Text = l.Text, CssClass = l.CssClass });
        }
    }
}

[Serializable]
public class LabelInfo
{
    public string Text = "";
    public string CssClass = "";
}