jQuery生成asp.net服务器控件的代码


Posted in Javascript onFebruary 04, 2010

HTML如下

<tr> 
<td class="leftTd" style="width: 107px">附加金额</td> 
<td style="width: 315px"><asp:TextBox ID="txtExtendMoney" Text="0" runat="server"></asp:TextBox> 
<asp:RegularExpressionValidator ID="regExtend" runat="server" ControlToValidate="txtExtendMoney" Display="Dynamic" ErrorMessage="格式不正确" ValidationExpression="[1-9]\d*\.\d*|0\.\d*[1-9]\d*|^[1-9]\d*|0"></asp:RegularExpressionValidator> 
<asp:RequiredFieldValidator ID="reqExtedNo" runat="server" ControlToValidate="txtExtendMoney" Display="Dynamic" ErrorMessage="不可为空"></asp:RequiredFieldValidator></td> 
<td class="leftTd">结算方式</td> 
<td><asp:DropDownList ID="ddlPayType" runat="server"><asp:ListItem>现金</asp:ListItem><asp:ListItem>银行转账</asp:ListItem></asp:DropDownList></td> 
</tr> 
<tr> 
<td class="leftTd">结算账户</td> 
<td colspan="3"><asp:RadioButtonList ID="rdbPayAccountBank" runat="server" RepeatLayout="Flow"></asp:RadioButtonList></td> 
</tr>

最后一个RadioButtonList的ListItem为“其他账户",当选中时,其后增加相应的asp.net服务器控件。选择其它时移除该控件。

jQuery生成asp.net服务器控件的代码

增加

jQuery生成asp.net服务器控件的代码

引入jQuery,然后如下代码

/*结算方式*/ 
$(":radio:last").bind("click",function(){ 
if($("#txtBankNew").length==0){ 
$(this).parent().append('<span id="span"><label style="margin-left:6px;margin-right:4px;" for="txtBankNew">开户银行</label><input runat='server' id='txtBankNew' type='text' /><label style="margin-left:6px;margin-right:4px;" for="txtAccountNew">开户账户</label><input type='text' id='txtAccountNew' runat='server' /></span>'); 
}; 
$("#txtBankNew").focus().select(); 
}); 
$(":radio:not(:last)").bind("click",function(){ 
if($("#txtBankNew").length>0){ 
$("#span").remove(); 
} 
});

这里值得注意的是如果append之后的控件为服务器控件,也就是有runat="server"属性的,原先的单引号生成源后会自动变成双引号,并且runat="server"消失。这实际上跟手工在前台书写此DOM结构.net framework处理一致。因此打开此页面源文件可以看到如下
jQuery生成asp.net服务器控件的代码
但不幸的是,该服务器控件依然没有起作用……

还是用隐藏服务器控件来解决吧?!

Javascript 相关文章推荐
jquery DOM操作 基于命令改变页面
May 06 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
javascript两段代码,两个小技巧
Feb 04 #Javascript
JavaScript面向对象之静态与非静态类
Feb 03 #Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 #Javascript
js左侧多级菜单动态的解决方案
Feb 01 #Javascript
javascript 三种编解码方式
Feb 01 #Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 #Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 #Javascript
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
js控制input框只读实现示例
2014/01/20 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
2016/12/02 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
python操作数据库之sqlite3打开数据库、删除、修改示例
2014/03/13 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
图解Python变量与赋值
2018/04/03 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
Django实现学生管理系统
2019/02/26 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
业务助理岗位职责
2013/11/18 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
干部个人考察材料
2014/12/24 职场文书
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript