Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得

Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得

< type="text/javascript"> < type="text/javascript">
一、 经 常需要在asp.net中“后台代码*.cs文件中调用javascript脚本中已经定义好的脚本函数”。

基本包括一下几种办法：

1. 用Response.Write() 方法写入脚本：

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

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

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

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

3. 普通的添加控件的Attributes 属性：

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

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

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

4.定义Literal控件
用法如下：
Literal lit=new Literal();
lit.text="<script>alert();</script>";
this.page.Controls.Add(lit);

5.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时无法找到此控件 ）