zoukankan      html  css  js  c++  java
  • ASP.NET动态添加文本框参考做法

    在ASP.NET开发中,有时需要动态添加表单元素,即在运行时根据用户的需求选择,往页面上添加指定数量的表单元素。一般容易犯的错误,是用开发Winform应用程序的思路,在后台简单编写诸如下面的代码:

    TextBox tb=new TextBox();
    div1.Controls.Add(tb);

    WebForm有个特点,应用程序的界面和后台逻辑是分别运行在不同地方,即浏览器端负责页面的解析和显示,服务器端负责页面的主要生成(javascript等浏览器端脚本也可负责一部分生成,所以这里称为“主要生成”),浏览器-服务器之间的请求响应遵从http协议,http是一种无状态的连接。在ASP.NET中,浏览器端每次请求页面,服务器都会重新生成相应的Page。如果后台动态添加控件或表单元素到页面,则当下次客户submit后,会发现新添加的东西会丢失,这是因为动态添加的控件在aspx文件中不存在,所以它的ViewState没有起作用,相应的视图状态没有保持下来。虽然有一些服务器端的方法可以解决这个问题,但解决的比较繁琐,我认为较佳的做法还是在浏览器端用javascript动态添加。下面这个例子很能说明问题,也比较容易弄懂。

    Default.aspx文件:

     1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
    2
    3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    4 <html xmlns="http://www.w3.org/1999/xhtml">
    5 <head id="Head1" runat="server">
    6 <title></title>
    7 <script>
    8 function createInputTexts(Xselect)
    9 {
    10 if (Xselect.selectedIndex > 0)
    11 {
    12 var div1 = document.getElementById("div1");
    13 div1.innerHTML = "";
    14 var count = parseInt(Xselect.options[Xselect.selectedIndex].value);
    15 for (var i = 0; i < count; i++)
    16 div1.innerHTML = div1.innerHTML + "<input type='text' name='userInfo" + i + "' /><br/>";
    17 div1.innerHTML = div1.innerHTML + "<input type='hidden' name='textCount' value='" + count + "' />";
    18 }
    19 }
    20 </script>
    21 </head>
    22 <body>
    23 <form id="form1" runat="server">
    24 <asp:DropDownList ID="DropDownList1" runat="server" onchange="createInputTexts(this)">
    25 <asp:ListItem>请选择…</asp:ListItem>
    26 <asp:ListItem>1</asp:ListItem>
    27 <asp:ListItem>2</asp:ListItem>
    28 <asp:ListItem>3</asp:ListItem>
    29 <asp:ListItem>4</asp:ListItem>
    30 <asp:ListItem>5</asp:ListItem>
    31 </asp:DropDownList>
    32 <div id="div1"></div>
    33 <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    34 </form>
    35 </body>
    36 </html>

    Default.aspx.cs文件:

     1 using System;
    2
    3 public partial class Default : System.Web.UI.Page
    4 {
    5 protected void Page_Load(object sender, EventArgs e)
    6 {
    7
    8 }
    9 protected void Button1_Click(object sender, EventArgs e)
    10 {
    11 if (Request["textCount"] != null)
    12 {
    13 int textCount = int.Parse(Request["textCount"]);
    14 for (int i = 0; i < textCount; i++)
    15 Response.Write(Request["userInfo" + i.ToString()] + "<br/>");
    16 }
    17 }
    18 }

    在aspx文件代码中,添加了一个DropDownList控件、一个div元素和一个Button控件。当改变下拉列表框中的某个选项时,发生客户端onchange事件,执行createInputTexts方法。createInputTexts方法的作用是向div中添加指定选择数量的文本框,并添加一个隐藏域记录添加文本框的数量。当单击按钮后,服务器端通过Request["隐藏域的name属性值"]获取这个数量,然后利用for循环逐个获取各文本框的值,输出到页面上。

  • 相关阅读:
    安装Flume的时候出现File Channel transaction capacity cannot be greater than the capacity of the channel capacity -解决方案 摘自网络
    在linux中配置环境变量
    CentOS中安装JAVA环境
    怎么在linux 用nginx做代理 配置.net core
    Another app is currently holding the yum lock; waiting for it to exit.. yum被锁定无法使用
    jQueryUI modal dialog does not show close button (x) JQueryUI和BootStrap混用时候,右上角关闭按钮显示不出图标的解决办法
    C#中 如何处理 JSON中的特殊字符
    php面向对象精要(3)
    php面向对象精要(2)
    php面向对象精要(1)
  • 原文地址:https://www.cnblogs.com/anakin/p/2180704.html
Copyright © 2011-2022 走看看