×

ASP.NET JavaScript Html

ASP.NET中后台*.cs与前台JS脚本之间互相调用

Kalet Kalet 发表于2020-06-22 14:54:52 浏览214 评论0

抢沙发发表评论

<type=“text/javascript”> <type=“text/javascript”>


一、asp.net的后台代码*.cs文件中调用javascript脚本中已经定义好的脚本函数

基本包括一下几种办法:


① 用Response.Write() 方法写入脚本:

比如在单击按钮后,先操作数据库,完了后显示已经完成,可以在最后想调用的地方写上:


Response.Write("<script type= 'text/javascript' language='javascript' >alert(); ></script>" );


这个方法有个缺陷就是不能调用脚本文件中的自定义的函数,只能调用内部函数,具体调用自定义的函数只能在Response.Write写上函数定义,比如:


Response.Write ("<script type='text/javascript'>function fun(){...}</script>" );


② 用ClientScript 类动态添加脚本:

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


ClientScript.RegisterStartupScript (

ClientScript.GetType (),

"myscript ",

"<script type="text/javascript">MyFun();</script> "

);


例子:


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更方便一些,可以直接调用脚本文件中的自定义函数。


③ 普通的添加控件的Attributes 属性:

对于普通按钮就是: Button1.Attributes.Add ("onclick " ,"MyFun(); " );

只能在Onload中或类似于onload的初始化过程中添加才有效。而且是先执行脚本函数,无法改变执行顺序。

注意,以上所有方法中,后台代码都不能有转化当前页的代码,比如Redirect等,要把转页代码放在脚本里面。


④ 定义Literal控件

用法如下:


   Literal lit=new Literal();

   lit.text="<script>alert();</script>";

   this.page.Controls.Add(lit);


⑤ OnClientClick (vs2003不支持这个方法)

<asp:Button ID="Button1" runat="server" Text="Button"

OnClientClick="client_click()" OnClick="Button1_Click" />


client_click() 就是javascript的一个方法。


二、前台JS执行或调用后台的方法函数,常用AJAX,下面给一个不用AJAX的方法:

1. 这里以Table中的行删除为例,如果table中的标签内容是从后台取出后在render到前台的话,行中的删除按钮可以写成JS触发方式:

  view plaincopy to clipboardprint?

<a href ='javascript:onRowdataDelete(id, groupname, groupid);' >删除</a>  

<a href ='javascript:onRowdataDelete(id, groupname, groupid);' >删除</a>


2. 所调用的前台js函数为:

   view plaincopy to clipboardprint?

function onRowdataDelete(rowid, gname, gid) {  

       if (confirm("-----------------------------------------\r\n 用户组ID:\"" + gid + "\"\r\n 用户组名称:\"" + gname + "\"\r\n-----------------------------------------\r\n------- 确认要将以上用户组删除吗? -------" )) {  


           document.getElementById("delid" ).value = rowid;  

           document.getElementById("delgid" ).value = gid;  

           document.getElementById("del_btn" ).click ();  

       }  

       else {          

       }  

   }

function onRowdataDelete(rowid, gname, gid) {

       if (confirm("-----------------------------------------\r\n 用户组ID:\"" + gid + "\"\r\n 用户组名称:\"" + gname + "\"\r\n-----------------------------------------\r\n------- 确认要将以上用户组删除吗? -------" )) {

           document.getElementById("delid" ).value = rowid;

           document.getElementById("delgid" ).value = gid;

           document.getElementById("del_btn" ).click ();

       }

       else {      

       }

   }


3. 前台*.aspx 中增加如下隐藏定义:

   view plaincopy to clipboardprint?

< asp:HiddenField ID ="delid" runat ="server" />

< asp:HiddenField ID ="delgid" runat ="server" />

< asp:Button ID ="del_btn" style ="display : none ;" runat ="server" OnClick ="delbtn_click" />  


< asp:HiddenField ID ="delid" runat ="server" />

< asp:HiddenField ID ="delgid" runat ="server" />

< asp:Button ID ="del_btn" style ="display : none ;" runat ="server" OnClick ="delbtn_click" />


4. 后台*.cs 中相应的onclick 事件:

      view plaincopy to clipboardprint?

protected void delbtn_click(object sender, EventArgs e){  

      //可以直接获取删除行的相关参数:delid.Value, delgid.Value  

      //在此执行你的业务逻辑,比如这里是删除的方法函数  

   }  

protected void delbtn_click(object sender, EventArgs e){

      //可以直接获取删除行的相关参数:delid.Value, delgid.Value

      //在此执行你的业务逻辑,比如这里是删除的方法函数

   }


5. 简要注解:

在删除的js方法被激发后会先执行confirm,确认后会将传入的几个参数分别赋给*.aspx前台页面中的相应隐藏值,便于后台取值。最后出发*.aspx页面中隐藏的button单击事件,进而开始调用其后台的单击事件,执行后台的方法函数。

(注意*.aspx中Button在隐藏是不能使用visible=false,这样会使得 getElementById时无法找到此控件 )

————————————————

版权声明:本文为CSDN博主「VeteranDog」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_42274953/java/article/details/82953894

群贤毕至

访客