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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
JS实现键值对遍历json数组功能示例
2018/05/30 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
python实现动态数组的示例代码
2019/07/15 Python
django修改models重建数据库的操作
2020/03/31 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
Python错误的处理方法
2020/06/23 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
python中如何打包用户自定义模块
2020/09/23 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
高中运动会广播稿
2014/01/21 职场文书
销售简历自我评价
2014/01/24 职场文书
英语故事演讲稿
2014/04/29 职场文书
室内设计专业自荐信
2014/05/31 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书