zoukankan      html  css  js  c++  java
  • asp.net中关于点击页面一个控件,弹出框的制作

          先简述一下一下背景,最近有个项目中有一个页面是关于工作人员大致情况的展示页面,展示的信息放在一个gridview控件里面,控件里有一列为工作人员姓名,然后希望能达到点击姓名弹出一个框显示出此工作人员的所有详细信息的效果。

          这里给出部分代码。首先是前台页面,关于 姓名字段 采用的是LinkButton控件,当然你还可以采用别的方式部分代码如下:

    前台代码
     1 <asp:GridView ID="GridView1" runat="server" Width="100%" AutoGenerateColumns="False"  BorderWidth="0px" OnRowCommand="GridView1_RowCommand" CellPadding="3" CellSpacing="1"  DataKeyNames="Autoid" PageSize="15" PagerStyle-HorizontalAlign="Left" OnRowDataBound="GridView1_RowDataBound" AllowPaging="True" OnPageIndexChanging="GridView1_PageIndexChanging" 
     2 onselectedindexchanged="GridView1_SelectedIndexChanged" >
     3     <RowStyle HorizontalAlign="center" />
     4          <Columns>
     5              <asp:TemplateField HeaderText="姓名">
     6                   <HeaderStyle  Wrap="False" Width="100px" HorizontalAlign="Center" Font-Bold="False" Font-Size="9pt"/>
     7                         <ItemTemplate>
     8                               <asp:LinkButton runat="server" ID="btnName" Text='<%# Eval("cXm") %>' CommandName="detail"></asp:LinkButton>
     9                         </ItemTemplate>
    10              </asp:TemplateField>
    11          </Columns>
    12 </asp:GridView>

         在后台,要考虑的有几点,关于GridView1_RowDataBound(),  

    GridView1_RowDataBound
    1 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    2 {
    3       if (e.Row.RowType == DataControlRowType.DataRow)
    4       {
    5              LinkButton Lbtn = (LinkButton)e.Row.FindControl("btnName");
    6              Lbtn.CommandArgument = this.GridView1.Rows.Count.ToString();
    7        }
    8 }

          以上代码中有CommandArgument这个属性,先介绍下这个属性,根据MSDN里面介绍CommandArgument是获取或设置与关联的CommandName属性一起传到Command事件处理程序的可选参数。CommandArgument属性通常只在设置CommandName属性时使用。

          例如此例中前台的LinkButton设置属性CommandName="detail",在后台中,把GridView展示结果的行数赋给CommandArgument。

          然后在GridView1_RowCommand()中可以知道点击的是第几行的LinkButton。

    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
          //通过CommandArgument属性传递参数
           GridViewRow objGVR = this.GridView1.Rows[Convert.ToInt32(e.CommandArgument.ToString())];
          // 得到行数
           int index = objGVR.RowIndex;
          // 得到dataKeyName
          DataKey objDK = this.GridView1.DataKeys[index];
          if ((e.CommandName.ToLower() == "detail"))
          {
                string js = "window.showModalDialog('WorkDetail.aspx?id=" + objDK["Autoid"].ToString() + "', 'newwin', 'status:no;help:no;dialogHeight:600px; dialogWidth:800px;');";
                ScriptManager.RegisterStartupScript(this.GridView1, this.GetType(), "showWorkerDetail", js, true);
          }
    }

         这样便可以得到想要的效果了。

         关于GridView1_RowCommand()还涉及到两个知识点。

         一个是JS的window.showModalDialog()用来创建一个显示HTML内容的模态对话框。其使用格式为:window.showModalDialog(sURL[,vArguments][sFeatures]),其中sURL用来指定对话框要显示的文档的URL;vArguments可选参数,用来向对话框传递参数(传递的参数类型不限,包括数组等);sFeatures是可选参数,类型是字符串,用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号“;”隔开。
          然后另一个是ScriptManager.RegisterStartupScript(),他是向ScriptManager控件注册一个启动脚本块并将该脚本块添加到页面中。其使用形式有两种,一种为ScriptManager.RegisterStartupScript(Control control,Type type,String key ,String script,Boolean addScriptTags),据MSDN里介绍:control是正在注册该客户端脚本块的控件;type是该客户端脚本块的类型,通常使用typeof运算符(c#)或GetType运算符(VB)来指定该参数,以检索正在注册该脚本的控件的类型;key是该脚本块的唯一标识符;script是注册的脚本;addScriptTags是指如果用<script></script>括起脚本块则为true;否则为false.

           以上所用的参考资料:

           http://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.linkbutton.commandargument.aspx

         http://www.cnblogs.com/zhangyi85/archive/2009/09/03/1559594.html

           http://msdn.microsoft.com/zh-cn/library/bb359558.aspx

  • 相关阅读:
    HDU 4548 美素数 在线打表加数状数组
    HDU 1023 Train Problem II
    HDU 4707 Pet 邻接表实现
    如何在VS2010环境下编译C++程序
    《Visual C++ 2010入门教程》系列五:合理组织项目、使用外部工具让工作更有效
    《Visual C++ 2010入门教程》系列一:关于Visual Studio、VC和C++的那些事
    C++格式化代码,去掉vs2010编辑器里中文注释的红色波浪线
    c++中%是什么意思?
    windows定位dll的搜索顺序
    VC6.0 error LNK2001: unresolved external symbol _main解决办法
  • 原文地址:https://www.cnblogs.com/huang1990/p/3071207.html
Copyright © 2011-2022 走看看