ASP.NET后台中调用前台Javascript函数的几种方法

简介: 做web开发,用的技术是aspx.net,可是由于比较习惯于ASP现在做起来,觉得非常别扭,原因在于有很多功能其实在前台可以处理的,但是因为用到了很多webcontrol,导致不断postback。

做web开发,用的技术是aspx.net,可是由于比较习惯于ASP现在做起来,觉得非常别扭,原因在于有很多功能其实在前台可以处理的,但是因为用到了很多webcontrol,导致不断postback。如果利用ajax来处理可能会好些。目前只能通过在后台对这些控件绑定前台的javascript函数来支持前台的处理函数。在网上找了找,发现了几种方法可以达到要求:

 

第一种,感觉用起来最方便

Button1.Attributes.Add("onclick", "return OnBtnClick()");  
“OnBtnClick() “是一个前台方法,在此方法中直接在前台处理数据。可以替换成一般的脚本

 

第二种,OnClientClick

<asp:Button ID="Button1" runat="server" Text="Button"  OnClientClick="OnClientClick()" OnClick="Button1_Click"  />
Button1_Click是在cs中(后台)处理的方法,而OnClientClick() 就是javascript(前台)的处理函数。

 

第三种 用ClientScript类动态添加脚本

    用法如下:在想调用某个javascript脚本函数的地方添加代码,注意要保证MyFun已经在脚本文件中定义过了。

    ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script>MyFun();</script>");

这个方法比Response.Write更方便一些,可以直接调用脚本文件中的自定义函数。

 

第四种,ClientScript.RegisterStartupScript
例子:StringBuilder sb = new StringBuilder();
        sb.Append("<script language='javascript'>");
        sb.Append("Button2_onclick('" + serverPath + "')");
        sb.Append("</script>");
        ClientScript.RegisterStartupScript(this.GetType(), "LoadPicScript", sb.ToString());

 

第五种. 用Response.Write方法写入脚本

比如在你单击按钮后,先操作数据库,完了后显示已经完成,可以在最后想调用的地方写上
Response.Write("<script type='text/javascript'>alert();</script>");

这个方法有个缺陷就是不能调用脚本文件中的自定义的函数,只能调用内部函数,具体调用自定义的函数只能在Response.Write写上函数定义,比如Response.Write("<script type='text/javascript'>function myfun(){...}</script>");

这种方法不断可以从后台绑定前台的方法,还可以从cpp语言环境中绑定前台的方法


==================================================================

function test(){
var ab = "<%=_dopostback()%>";
setlocation(ab);
}

目录
相关文章
|
JavaScript 前端开发
JS如何处理后台时间
JS如何处理后台时间
213 58
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
202 5
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
219 0
基于 Vue2.0 + Nest.js 全栈开发的后台应用
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
270 1
|
JavaScript Java 测试技术
基于springboot+vue.js的善筹网(众筹)前后台附带文章和源代码设计说明文档ppt
基于springboot+vue.js的善筹网(众筹)前后台附带文章和源代码设计说明文档ppt
170 1
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的前后台图书商城系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的前后台图书商城系统附带文章源码部署视频讲解等
128 0
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的游戏后台系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的游戏后台系统附带文章和源代码部署视频讲解等
115 0
|
JavaScript 前端开发
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
原生JavaScript JS导出blob后台文件流xlsx、xls文件自动下载(且规避乱码),解决导出Excel文件里面有[object Object]。
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
|
存储 开发框架 .NET
Asp.Net第一章入门之后台处理程序
Asp.Net第一章入门之后台处理程序
131 0