gxh973121

博客园 首页 新随笔 联系 订阅 管理
解决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-width: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时都追加脚本，否则页面一刷新脚本就没有了。

posted on 2005-02-21 15:07  gxh973121  阅读(992)  评论(0)    收藏  举报