• 解决ASP 2.0中GridView控件的删除、插入、编辑命令操作客户端确认问题的另一方法


          GridView控件提供的删除、插入、编辑命令大大减轻了页面的难度,但是这些命令字段在客户端并没有提供Onclick等事件,以便在客户端编写响应脚本,进行数据校验或提示用户确认是否提交。实际上当点击它们后直接将页面提交服务器处理,很不方便。
          GridView控件在绑定数据,添加命令字段后,我们从客户端的页面源代码中可以发现有下面一段代码。
    <script type="text/javascript">
    <!--
    var theForm = document.forms['form1'];
    function __doPostBack(eventTarget, eventArgument) {
        
    if (theForm.onsubmit == null || theForm.onsubmit()) {
            theForm.__EVENTTARGET.value 
    = eventTarget;
            theForm.__EVENTARGUMENT.value 
    = eventArgument;
            theForm.submit();
        }
    }
    // -->
    </script>

          这段脚本是控件提交数据用的,当点击删除、插入、编辑命令时将调用该脚本。那么如果我们能在调用它前先执行数据校验或用户确认脚本,就可以达到目的了。由于function __doPostBack(eventTarget, eventArgument)是控件自己生成自动调用的,所以只能想办法改变__doPostBack函数的脚本内容,
          Page对象的public virtual void RegisterStartupScript(string key, string script)方法可以向页面添加脚本,如果向页页添加相同的名称的脚本函数会如何呢?
          试验发现,像下面一段脚本
          (功能:在删除记录前会提示“是否删除记录”,并根据用户操作决定是否提交服务端执行删除动作。)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        
    <title>图片库管理</title>
        
    <link href="../Css/StyleSheet.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        
    <form method="post" action="ManageImage.aspx" id="form1">
    <div>
    <input type="hidden" name="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" value="" />
    <input type="hidden" name="__VIEWSTATE" value="" />
    </div>

    <script type="text/javascript">
    <!--
    var theForm = document.forms['form1'];
    function __doPostBack(eventTarget, eventArgument) {
        
    if (theForm.onsubmit == null || theForm.onsubmit()) {
            theForm.__EVENTTARGET.value 
    = eventTarget;
            theForm.__EVENTARGUMENT.value 
    = eventArgument;
            theForm.submit();
        }

    }

    // -->
    </script>


            
    <div>
                
    &nbsp;</div>
            
    <div>
                
            
    <div id="__gvGridView1__div">
        
    <table ">
            中间脚本略
        
    </table>
        
    </div>
                
    <br />
            
    <img id="Image1" src="GetImage.aspx?imgid=15&amp;gettype=ORI" style="border-color:#FFFFC0;border-3px;border-style:Ridge;" />&nbsp;<br />
             
    </div>
        
    <script type="text/javascript">
                    
                
    var theForm = document.forms['form1'];
                 
    function __doPostBack(eventTarget, eventArgument) {
                    
    if(eventArgument.indexOf("Delete")!= -1)
                    
    {
                        
    var b = confirm("是否删除该记录?");
                        
    if (b)
                        
    {
                            theForm.__EVENTTARGET.value 
    = eventTarget;
                            theForm.__EVENTARGUMENT.value 
    = eventArgument;
                            theForm.submit();
                        }

                    }

                    
    else
                    
    {
                        
    if (theForm.onsubmit == null || theForm.onsubmit()) 
                        
    {
                            theForm.__EVENTTARGET.value 
    = eventTarget;
                            theForm.__EVENTARGUMENT.value 
    = eventArgument;
                            theForm.submit();
                        }

                    }

                }

    </script>
    </form>
    </body>
    </html>

          前面的__doPostBack函数是GridView控件自动生成的,后面的控件是我们在页面调入时从服务端添加的。两个同名的函数,控件会调用哪一个呢?结果发现是后者。如此一来,我们就通过服务端添加的脚本函数进行数据校验,决定是否提交数据、刷新页面。
          另外function __doPostBack(eventTarget, eventArgument)的eventTarget参数是GridView控件的名字,eventArgument参数是命令字。当如果是删除时,eventArgument参数是Delete开头;当如果是插入时,eventArgument参数是Insert开头;当如果是编辑时,eventArgument参数是Edit开头;当如果是选择时,eventArgument参数是Select开头。
          服务端代码如下:

        public bool ClientScript(Page thisPage, string script)
        
    {
            
    bool r = false;
            
    string scriptKey = "ClientScript:" + thisPage.UniqueID;

            
    if (!thisPage.IsStartupScriptRegistered(scriptKey))
            
    {
                
    string scriptBlock =
                
    @"<script type=""text/javascript"">
                %%ClientScript%%
                
    </script>
                
    ";
                scriptBlock = scriptBlock.Replace("%%ClientScript%%", script);
                thisPage.RegisterStartupScript(scriptKey, scriptBlock);
                r 
    = true;
            }

            
    return r;
        }


        
    private void InitializeComponent()
        
    {    
            
    this.Load += new System.EventHandler(this.Page_Load);
            
        }

        
    void Page_Load(object sender, System.EventArgs e)
        
    {
            
    string scriptBlock = @"
                var theForm = document.forms['form1'];
                 function __doPostBack(eventTarget, eventArgument) 
    {
                    
    if(eventArgument.indexOf(""Delete"")!= -1)
                    
    {
                        var b 
    = confirm(""是否删除该记录?"");
                        
    if (b)
                        
    {
                            theForm.__EVENTTARGET.value 
    = eventTarget;
                            theForm.__EVENTARGUMENT.value 
    = eventArgument;
                            theForm.submit();
                        }

                    }

                    
    else
                    
    {
                        
    if (theForm.onsubmit == null || theForm.onsubmit()) 
                        
    {
                            theForm.__EVENTTARGET.value 
    = eventTarget;
                            theForm.__EVENTARGUMENT.value 
    = eventArgument;
                            theForm.submit();
                        }

                    }

                }
    ";
            ClientScript(this.Page, scriptBlock);

        }


          一定要每次PageLoad时都追加脚本,否则页面一刷新脚本就没有了。

  • 相关阅读:
    数组排序 -- 冒泡排序
    数组自带的函数(方法)
    京东官网轮播图的实现
    鼠标单击元素输出对应元素的索引号
    JavaScript中获取HTML元素的方式
    JavaScript数组的2种定义方式
    this关键字
    JavaScript中对象的3种定义方式
    Hadoop完整搭建过程(三):完全分布模式(虚拟机)
    Hadoop完整搭建过程(二):伪分布模式
  • 原文地址:https://www.cnblogs.com/net66/p/62645.html
Copyright © 2020-2023  润新知