如何对动态创建控件进行验证以及在Ajax环境中的使用

最新推荐文章于 2019-08-26 14:46:50 发布
最新推荐文章于 2019-08-26 14:46:50 发布
阅读量80 收藏
点赞数
文章标签： xhtml ui 前端 ViewUI
本文介绍如何在ASP.NET中动态创建控件并实现验证功能，尤其是在使用Ajax UpdatePanel时的解决方案。通过巧妙地添加隐藏控件，使动态创建的验证控件能够正常工作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先给一个常规的动态创建控件，并进行验证的代码

[前端aspx代码]

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!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>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
      
        <asp:Table ID="Table1" runat="server">
        </asp:Table>
        <asp:Button ID="btnAddControl" runat="server" Text="动态创建控件" OnClick="btnAddControl_Click" />  
    <asp:Button ID="btnValidator" runat="server" Text="验证动态控件" Enabled="false" />
    
    </form>
</body>
</html>

[后端Cs代码]
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Test : System.Web.UI.Page
{
    private void Page_Load(object sender, System.EventArgs e)
    {
        
    }


    protected void btnAddControl_Click(object sender, EventArgs e)
    {        
        TextBox _TxtBox = new TextBox();//动态创建一个TextBox
        _TxtBox.ID = "TextBox1"; 
       
        RequiredFieldValidator _Require = new RequiredFieldValidator();//动态创建一个验证控件
        _Require.ErrorMessage = "请输入";
        _Require.SetFocusOnError = true;
        _Require.ControlToValidate = _TxtBox.ID;      
 
        TableCell Cell = new TableCell();
        Cell.Controls.Add(_TxtBox);
        Cell.Controls.Add(_Require);//将刚才创建的二个控件，加入Cell

        TableRow Row = new TableRow();
        Row.Controls.Add(Cell);
        this.Table1.Rows.Add(Row);

        btnValidator.Enabled = true;
    }
}
运行测试，点击"动态创建控件"后，再点击"验证动态控件",验证控件起作用了，一切正常

接下来，我们加入Ajax环境[加入UpdatePanel控件]，将前端代码改为:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!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>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <ContentTemplate>
        <div style="border:solid 2px red"> <%--为突出显示，把UpdatePanel加了一个红色框--%>
        <asp:Table ID="Table1" runat="server">
        </asp:Table>
        <asp:Button ID="btnAddControl" runat="server" Text="动态创建控件" OnClick="btnAddControl_Click" />
       </div>
</ContentTemplate>
</asp:UpdatePanel>
    
    
      <asp:Button ID="btnValidator" runat="server" Text="验证动态控件" Enabled="true" />
    
    </form>
</body>
</html> 

再次运行，发现没办法再对动态生成的控件进行验证了(也就是说，新创建的验证控件没起作用) ,怎么办呢？难道就这样放弃？经过一番尝试，发现了一个很有趣的解决办法，具体参看以下代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

<!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>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
       <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
    <ContentTemplate>
        <div style="border:solid 2px red"><%--为突出显示，把UpdatePanel加了一个红色框--%>
        <asp:Table ID="Table1" runat="server">
        </asp:Table>
        <asp:Button ID="btnAddControl" runat="server" Text="动态创建控件" OnClick="btnAddControl_Click" />
       </div>
</ContentTemplate>
</asp:UpdatePanel>
    
    
  <div style="display:none">
        <asp:TextBox ID="_TxtNeverUsed" runat="server" Text="*"></asp:TextBox>
        <asp:RequiredFieldValidator ID="_RequireNeverUsed" runat="server" ErrorMessage="*" ControlToValidate="_TxtNeverUsed"></asp:RequiredFieldValidator>
    </div>
    <asp:Button ID="btnValidator" runat="server" Text="验证动态控件" Enabled="true" />
    
    </form>
</body>
</html>
注意上面蓝色的代码，再次运行，哈哈，居然可以了！
ajax-动态添加控件
777
10-12 730
首先使用AJAX动态绑定数据。 　　在给actioncolumn列赋值的时候使用innerHTML，为table写入一个新的元素 document.innerHTML =’新元素’/*查询按钮 表格获取内容*/ function query() { //判断三个选项是否都为空，如果都为空则返回 if ($('#select_goods').val() == '' && $('#se
js回显复选框，后台动态查询数据显示复选框
q596333033的博客
11-13 3106
1　2　3　4 var s = '1,4';//这里改你数据库读出的 s=','+s+',';//前后加限定符 var cb = document.getElementsByName('cb');//这里改你checkbox的name值 for (var i = 0; i < cb.length; i++) if (s.indexOf(',' +
利用AJAX完成控件的联动（示例）以及验证
moonsheep_liu的专栏
09-20 938
完成功能：如下图所示，选择下拉列表“名称”（struts2的autocompleter）中的某项，根据选择的值读取数据库中对应的代码值，并显示在代码textfield中。 环境：ssh，jsonplugin-0.32.jar 步骤1. 从数据库中读取名称列表，作为名称的显
用checkbox选择删除数据库中的多条数据
03-19
NULL 博文链接：https://devintan110.iteye.com/blog/735248
【Javascript】Js动态生成checkbox(使用Json数据)
热门推荐
星夜雨年
01-11 1万+
根据Json动态生成checkbox body { margin: 0 auto; } #show { margin: 10px auto; width: 450px; font-size: 14px; }
通过Ajax动态生成的页面，解决复选框，选择一次不能再选择的问题
小杰的专栏
03-11 2189
相信这个例子大家都看过了 http://www.helloweba.com/view-blog-254.html 在一般的页面都能用，可是在Ajax动态生成的页面上却不能用。 下面介绍一下如何解决动态生成的页面，实现复选框的全选与反选(checkbox) 实现全选与反选。 $("#allCheckBox").click(function (){ if(this.chec
ASP Ajax 控件
08-03
1. **接口连接**：在ASP.NET AJAX中，`ScriptManager`控件起到了服务器和客户端JavaScript之间的桥梁作用，它管理脚本资源，包括对AJAX功能的初始化。 2. **法兰卡房间**：这可能是误输入，与技术概念无关。 3. **...
在MVC的层次结构上动态添加控件
04-11
后端控制器接收请求并返回数据，前端JavaScript根据数据动态创建控件。 7. **注意事项** - 验证：当控件是动态生成的，必须确保在客户端和服务器端都进行验证，因为默认的验证逻辑可能不会覆盖这些动态添加的控件...
使用jQuery和PHP动态添加文件上载控件并将文本文件数据插入数据库
04-03
在本场景中，jQuery用于动态创建HTML元素，尤其是文件上传控件。通过`$(document).ready()`函数，我们可以确保DOM加载完成后再执行相关的代码。使用`.append()`或`.html()`方法可以动态地在页面中添加HTML元素，例如...
AJAX自定义控件 验证用户(C#)
11-25
在本文中，我们将深入探讨如何使用C#语言和ASP.NET技术来创建一个AJAX自定义控件，以实现用户输入的验证功能。这个控件的主要目的是简化文本框的验证过程，提供一种动态、异步的方式来检查用户输入的有效性，从而...
JQuery实现动态加载复选框
qq_40312160的博客
09-05 7089
效果如图，通过ajax接收的数据，动态生成想要的日期 在网上查找一番后，参考别人的代码，记录下来，方便以后查阅 引入的js包 jquery.easyui.min.js jquery.min.js （一）在body总添加div标签 &lt;div id="allTime"&gt;&lt;/div&gt;  （二）js代码 function show(){ var row ...
web前端 ajax加载动态生成复选框demo
那些年的代码
08-26 290
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>1</title> </head> <script src="js/jquery.js"></scr...
altas(ajax)控件(十七)：互斥复选框控件MutuallyExclusiveCheckBox
hunxiejun
09-25 104
altas(ajax)控件(十七)：互斥复选框控件MutuallyExclusiveCheckBox 实例： 任何时候只有一个复选框被选中 &lt;b&gt;选中&lt;/b&gt;&lt;br /&gt; &lt;asp:Checkbox runat="server" ID="c1" Text="选择" /&gt; &lt;ajaxToolk
动态添加复选框
HRL煜的博客
09-01 828
//把值填充到复选框     varfrole = document.getElementById("roleIDedit");    frole.innerHTML = '';     for(vari = 0; i        frole.innerHTML += ' +authoritys[i].value + '" id="'+ authoritys[i].value +
easyui ajax 动态生成CheckBox 复选框
书写人生
08-08 6374
json [ {"ID":1,"value":"首页"}, {"ID":2,"value":"滚动"}, {"ID":3,"value":"公告"} ] function CreateAjaxCheckBox(Obj,strParaList,url) {  $.post(url, function (data) {  var response = eval("("
ajax动态加载下拉框、单选框、复选框
爱生活、爱dota、爱魔兽、爱编程、我不大梦想却很大.请不要叫我修电脑-告诉你我不会,我是--程序员
11-08 5526
//select下拉菜单动态加载 方式一： $.ajax({ type:"get", dataType:"json", contentType:"application/json;charset=utf-8", url:"url", success:function(result){ $.each(result,function(index,value){ $(
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值