ASP.NET 动态输出Javascript 文本格式换行问题 [ASP.NET | C# | Response]

简介:

前言

     在动态输出Javascript的时候我们习惯用Response.write("<script language=\"javascript\" type=\"text/javascript\">alert(1);</script>");这样的语句来动态输出,但是你可能没注意到里面的格式问题,比如,我测试连接数据库,如果连接失败就打印catch信息,但是你会发现你直接输出是输出不了的,会报错,比如字符串没有结束之类的脚本错误。

 

正文

     一、普通输出问题分析、测试

          1.     我们先来看一段代码:

    ///   <summary>
    
///  连接接数据库
    
///   </summary>
    
///   <param name="sender"></param>
    
///   <param name="e"></param>
     protected   void  btnConnect_Click( object  sender, EventArgs e)
    {
        
try
        {
            
/// 此处填写连接数据库的代码
        }
        
catch  (Exception ex)
        {
            Response.Write(Alert(
string .Concat( " 连接失败!!出错原因: " , ex.Message)));
        }
    }

    
///   <summary>
    
///  弹出信息
    
///       <script language="javascript" type="text/javascript">
    
///          alert(msg);
    
///       </script>
    
///   </summary>
    
///   <param name="msg"></param>
    
///   <returns></returns>
     public   static   string  Alert( string  msg)
    {
        
return   Javascript(string.Concat( " alert(' " ,msg, " '); " ));
    }

    
///   <summary>
    
///  输出Javascript代码
    
///       <script language="javascript" type="text/javascript">
    
///          alert("弹出框例子!");
    
///       </script>
    
///   </summary>
    
///   <param name="context"></param>
    
///   <returns></returns>
     public   static   string  Javascript( string  context)
    {
        
return   string .Concat( " <script language=\ " javascript\ "  type=\ " text / javascript\ " > " , context,  " </script> " ); ;
    }

          说明分析:这里调用方法btnConnect_Click让他衡失败,比如连接字符串错误,这里假设连接字符串为:Data Source=.\;Initial Catalog=test;User ID=sa;Password=sa  。那么调试时ex.Message信息会显示"无法打开登录 'test' 中请求的数据库。登录失败。\r\n用户 'sa' 登录失败。",那么现在我可以很肯定的告诉你,你直接输出肯定会报Javascript错误,显示" 确实')' ",跟踪发现它输出的字符串如下:

< script  language ="javascript"  type ="text/javascript" > alert( ' 连接失败!!出错原因:无法打开登录  ' test '  中请求的数据库。登录失败。
用户 
' sa '  登录失败。 ' ); </ script >

           我们把这代码直接复制到ASPX页面里,果然报错,而且错误也比较明显了,alert输出的信息不在一行上,也不支持C# 的'@' ,问题就出在这里了!!

 

     二、解决办法[参考帖子:http://topic.csdn.net/u/20080505/15/3b9c038d-f82d-429f-b093-00e92fdca295.html]

           修改后的代码如下,Javascript方法不变,仅仅修改Alert方法,代码如下:

        ///   <summary>
        
///  弹出信息
        
///       <script language="javascript" type="text/javascript">
        
///          alert(msg);
        
///       </script>
        
///   </summary>
        
///   <param name="msg"></param>
        
///   <returns></returns>
         public   static   string  Alert( string  msg)
        {
            StringBuilder html 
=   new  StringBuilder();
            msg 
=  msg.Replace( " ' " , "   " );
            html.AppendLine();
            html.Append(
"    var msg = ''; " );
            html.AppendLine();
            
for  ( int  i  =   0 , j  =  msg.Length; i  <  j;)
            {
                
if  (i  +   10   <=  j)
                {
                    html.Append(
" msg+=' " );
                    html.Append(msg.Substring(i, 
10 ).Replace(System.Environment.NewLine string .Empty));
                    html.Append(
" '; " );
                    html.AppendLine();
                    i 
+=   10 ;
                }
                
else
                {
                    html.Append(
" msg+=' " );
                    html.Append(msg.Substring(i).Replace(System.Environment.NewLine
string .Empty));
                    html.Append(
" '; " );
                    html.AppendLine();
                    
break ;
                }
            }
            html.Append(
" alert(msg); " );
            
return  Javascript(html.ToString());
        }

          代码说明:大家注意红色的代码部分,是代码的关键,替换信息内所含的换行,自己手动增加换换行符号,并且拼接字符串,防止字符串过长。测试后,跟踪调试输出字符串如下:

< script  language ="javascript"  type ="text/javascript" >
   
var  msg  =   '' ;
msg
+= ' 连接失败!!出错原因 ' ;
msg
+= ' :无法打开登录  t ' ;
msg
+= ' est  中请求的数 ' ;
msg
+= ' 据库。登录失败。 ' ;
msg
+= ' 用户  sa  登录 ' ;
msg
+= ' 失败。 ' ;
alert(msg);
</ script >

          现在OK了!!!

结束

     又整了我一上午,不容易啊 :)

 

 

补充

          1.     如果输出信息包含\n 或\r 之类的信息,请在字符串传入的时候加上@符号,防止输出被转义!!



本文转自over140 51CTO博客,原文链接:http://blog.51cto.com/over140/586554,如需转载请自行联系原作者

相关文章
|
29天前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
34 5
|
21天前
|
JavaScript
将jq转为原生js格式
将jq转为原生js格式
26 2
|
3月前
|
开发框架 前端开发 .NET
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
集成于VS 2019,EXT.NET前端和ASP.NET后端,搭配MSSQL 2018数据库。系统覆盖样品管理、数据分析、报表和项目管理等实验室全流程。应用广泛,包括生产质检(如石化、制药)、环保监测、试验研究等领域。随着技术发展,现代LIMS还融合了临床、电子实验室笔记本和SaaS等功能,以满足复杂多样的实验室管理需求。
63 3
LIMS(实验室)信息管理系统源码、有哪些应用领域?采用C# ASP.NET dotnet 3.5 开发的一套实验室信息系统源码
|
2月前
|
JavaScript
JS代码动态打印404页面源码
源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
24 0
JS代码动态打印404页面源码
|
2月前
|
JavaScript
js好用的动态分页插件
js好用的动态分页插件是一款简单的分页样式插件,支持样式类型,当前页,每页显示数量,按钮数量,总条数,上一页文字,下一页文字,输入框跳转等功能。
29 1
|
2月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
48 1
|
3月前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
46 3
|
2月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
4月前
|
数据采集 JavaScript 前端开发
使用Go和JavaScript爬取股吧动态信息的完整指南
本文介绍了如何使用Go和JavaScript构建网络爬虫,从股吧网站抓取实时股市信息。通过设置代理服务器以应对反爬策略,利用`got`库执行JavaScript提取动态数据,如用户讨论和市场分析。示例代码展示了爬虫的实现过程,包括浏览器实例创建、代理配置、JavaScript执行及数据打印。此方法有助于投资者及时获取市场资讯,为决策提供支持。
使用Go和JavaScript爬取股吧动态信息的完整指南
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式