JavaScript和ASP.NET的传值_js怎么和服务器进行交互资源-CSDN下载

共27个文件

gif：11个

js：7个

css：5个

JavaScript

ASP.NET

3星 · 超过75%的资源需积分: 18 114 浏览量 2011-09-16 09:16:08 上传评论收藏 112KB RAR 举报

在Web开发中，JavaScript与ASP.NET的交互是至关重要的，特别是在动态操作页面和传递数据时。本文将深入探讨JavaScript如何访问服务器控件的值、服务器控件如何获取JavaScript中的变量值，以及如何遍历和操作界面中的TextBox元素，以及如何使Dropdownlist选择到指定项。 JavaScript作为客户端脚本语言，可以对用户的输入和页面事件进行实时处理。在ASP.NET中，服务器控件（如TextBox、DropdownList等）的默认模式下，它们的ID在客户端会改变，这给JavaScript直接访问带来了困难。为了解决这个问题，我们可以使用`ClientIDMode`属性来保持服务器控件的ID不变，或者使用`RegisterStartupScript`或`RegisterClientScriptBlock`方法在服务器端生成JavaScript代码，以便在客户端执行时能正确引用控件。 1. **JavaScript访问服务器控件的值**：可以通过`document.getElementById('<%= 控件.ClientID %>')`来获取控件对象，然后根据控件类型获取其值。例如，对于TextBox控件，可以使用`value`属性获取值： ```javascript var txtBox = document.getElementById('<%= TextBox1.ClientID %>'); var value = txtBox.value; ``` 2. **服务器控件取JavaScript中变量的值**：ASP.NET服务器端无法直接访问JavaScript变量，但可以通过隐藏字段或调用WebMethod来实现。例如，可以在JavaScript中设置一个隐藏字段的值，然后在服务器端通过`Request.Form`获取： ```javascript var jsValue = 'someValue'; document.getElementById('<%= HiddenField1.ClientID %>').value = jsValue; ``` 在服务器端： ```csharp string jsValue = Request.Form["HiddenField1"]; ``` 3. **遍历界面上所有TextBox元素**：JavaScript可以使用DOM遍历方法来查找所有TextBox。例如，使用`querySelectorAll`配合CSS选择器： ```javascript var allTextBoxes = document.querySelectorAll('input[type="text"]'); for (var i = 0; i < allTextBoxes.length; i++) { var textBox = allTextBoxes[i]; // 进行操作，如获取或设置值 } ``` 4. **让Dropdownlist选择到指定项**：可以使用`selectedIndex`属性设置Dropdownlist（Select元素）的选择项。假设我们有一个Dropdownlist控件，ID为`DDL1`，并且知道要选择的选项的文本： ```javascript var ddl = document.getElementById('<%= DDL1.ClientID %>'); for (var i = 0; i < ddl.options.length; i++) { if (ddl.options[i].text === '指定选项') { ddl.selectedIndex = i; break; } } ``` 这些技术在实际开发中非常实用，能够帮助开发者实现更丰富的交互体验。理解并熟练掌握JavaScript与ASP.NET之间的数据传递，对于构建高性能、用户体验良好的Web应用至关重要。同时，随着前端框架的不断发展，如jQuery、Vue.js、React等，这些基础概念仍然不可或缺，因为它们构成了现代Web开发的基础。

资源推荐

资源详情

资源评论

收起资源包目录

JavaScript和ASP.NET的传值.rar （27个子文件）

JavaScript和ASP.NET的传值

[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files

jquery.js 70KB

dot.png 196B

china-pub.jpg 26KB

ExpandedBlockStart.gif 79B

shCore.js 19KB

xml.gif 404B

ExpandedSubBlockStart.gif 83B

common2.css 822B

google_service.js 5KB

shThemeDefault.css 2KB

jquery.json-2.2.min.js 2KB

ShowHidden.js 2KB

shLanguage.js 51KB

ExpandedBlockEnd.gif 68B

381064.jpg 631B

common.css 17KB

logo.gif 43B

ContractedBlock.gif 80B

None.gif 59B

ExpandedSubBlockEnd.gif 71B

InBlock.gif 70B

common.js 29KB

ContractedSubBlock.gif 85B

rss.gif 130B

style.css 13KB

shCore.css 10KB

[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.htm 51KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>[转]JavaScript和ASP.NET的传值 - 李振波 - 博客园</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK href="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/common.css" type=text/css rel=stylesheet><LINK id=MainCss href="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/style.css" type=text/css rel=stylesheet><LINK href="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/common2.css" type=text/css rel=stylesheet><LINK href="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/shCore.css" type=text/css rel=stylesheet><LINK href="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/shThemeDefault.css" type=text/css rel=stylesheet><LINK title=RSS href="http://www.cnblogs.com/catxp/rss" type=application/rss+xml rel=alternate><LINK title=RSD href="http://www.cnblogs.com/catxp/rsd.xml" type=application/rsd+xml rel=EditURI> <SCRIPT src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/common.js" type=text/javascript></SCRIPT> <SCRIPT src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/jquery.json-2.2.min.js" type=text/javascript></SCRIPT> <SCRIPT src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/shCore.js" type=text/javascript></SCRIPT> <SCRIPT src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/shLanguage.js" type=text/javascript></SCRIPT> <META content="MSHTML 6.00.2900.6129" name=GENERATOR></HEAD> <BODY><A name=top></A> <FORM id=Form1 action=381064.html method=post> <DIV class=aspNetHidden><INPUT id=__EVENTTARGET type=hidden name=__EVENTTARGET> <INPUT id=__EVENTARGUMENT type=hidden name=__EVENTARGUMENT> <INPUT id=__VIEWSTATE type=hidden name=__VIEWSTATE> </DIV> <SCRIPT type=text/javascript> //<![CDATA[ var theForm = document.forms['Form1']; if (!theForm) { theForm = document.Form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </SCRIPT>  <DIV id=home> <DIV id=header> <DIV id=blogTitle><A id=lnkBlogLogo href="http://www.cnblogs.com/catxp/"><IMG id=blogLogo alt=返回主页 src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/logo.gif"></A>  <H1><A class=headermaintitle id=Header1_HeaderTitle href="http://www.cnblogs.com/catxp/">C# WEB开发基地</A></H1> <H2></H2></DIV> <DIV id=navigator> <UL id=navList> <LI><A class=menu id=MyLinks1_HomeLink href="http://www.cnblogs.com/">博客园</A> </LI> <LI><A class=menu id=MyLinks1_MyHomeLink href="http://www.cnblogs.com/catxp/">首页</A> </LI> <LI><A href="http://news.cnblogs.com/">新闻</A> </LI> <LI><A class=menu id=MyLinks1_NewPostLink href="http://www.cnblogs.com/catxp/admin/EditPosts.aspx?opt=1" rel=nofollow>新随笔</A> </LI> <LI><A class=menu id=MyLinks1_ContactLink accessKey=9 href="http://space.cnblogs.com/msg/send/ææ¯æ³¢" rel=nofollow>联系</A> </LI> <LI><A class=menu id=MyLinks1_Admin href="http://www.cnblogs.com/catxp/admin/EditPosts.aspx" rel=nofollow>管理</A> </LI> <LI><A class=menu id=MyLinks1_Syndication href="http://www.cnblogs.com/catxp/rss">订阅</A> <A class=aHeaderXML id=MyLinks1_XMLLink href="http://www.cnblogs.com/catxp/rss"><IMG alt=订阅 src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/rss.gif"></A> </LI></UL> <DIV class=blogStats>随笔- 11  文章- 78  评论- 78  </DIV></DIV></DIV> <DIV id=main> <DIV id=mainContent> <DIV class=forFlow> <DIV id=topics> <DIV class=post> <H1 class=postTitle><A class=postTitle2 id=ctl02_TitleUrl href="http://www.cnblogs.com/catxp/articles/381064.html">[转]JavaScript和ASP.NET的传值</A> </H1> <DIV class=clear></DIV> <DIV class=postBody> <DIV id=cnblogs_post_body>转自：<A href="http://fosk.cnblogs.com/">fosk</A><BR><SPAN style="FONT-SIZE: 12pt">  <P><FONT face="Times New Roman" color=#000000 size=3>因项目需要，最近一段时间里对于js的开发有了一定的了解。在基于ASP.NET的开发中，经常性的需要JS脚本来增加一些客户端的控制，比如限制输入字符，日期控件等等。一般这样的控制基本上在客户端完成就比较好，无需回传到服务端。总结了最近的开发中使用的一些js的技巧，提供给大家</FONT> </P> <P><FONT face="Times New Roman" color=#000000 size=3>1、js脚本如何访问服务器控件的值 <BR>        界面上有一个TextBox控件，ID为Name，js里可以采用如下脚本取Name的值 <BR>        </P> <DIV style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><IMG src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/None.gif" align=top><SPAN style="COLOR: #0000ff">var</SPAN><SPAN style="COLOR: #000000"> myvalue</SPAN><SPAN style="COLOR: #000000">=</SPAN><SPAN style="COLOR: #000000">document.all('Name').value; </SPAN></DIV> <P></FONT><FONT face="Times New Roman" color=#000000 size=3>2、服务器控件如何取js中变量的值 <BR>        目前未发现比较好的办法，我通常采用的方法是在界面上放一个隐藏的控件HtmlInputHidden，然后设置为以服务器控件运行，这样在js脚本中和ASP.NET代码里都可以访问到该控件的值 <BR>        js中给服务器控件赋值： <BR>        </P> <DIV style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><IMG src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/None.gif" align=top><SPAN style="COLOR: #0000ff">var</SPAN><SPAN style="COLOR: #000000"> bt＝document.all('Name').value; <BR><IMG src="[转]JavaScript和ASP_NET的传值 - 李振波 - 博客园.files/None.gif" align=top>        bt.value</SPAN><SPAN style="COLOR: #000000">=</SPAN><SPAN style="COLOR: #000000">'名称'; </SPAN></DIV> <P>        ASP.NET中使用Name.Value来访问。</FONT> </P> <P><FONT face="Times New Roman" color=#000000 size=3>3、如何遍历界面上所有TextBox元素 <BR>        </P> <DIV style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #cccccc 1px solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: #cccccc 1px solid; BACKGROUND-COLOR: #eeeeee"><IMG src="[转]JavaScript和ASP_NET的传�

评论收藏

内容反馈