Asp.net二级窗体实现

最新推荐文章于 2024-03-17 15:32:02 发布

henreash

最新推荐文章于 2024-03-17 15:32:02 发布

阅读量1k

点赞数

分类专栏： Asp.net Mvc 前端技术文章标签： asp.net javascript textbox asp button input

本文链接：https://blog.csdn.net/henreash/article/details/6609632

版权

Asp.net Mvc 前端技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最进写了个练手的bs程序，主要用来熟悉一下bs程序的开发思路。大概功能是一个发送邮件的小功能，用户登录后向其他用户发送邮件。可以选择多个用户进行发送。这里需要点击按钮弹出一个二级子窗体，勾选多个用户，点击确定按钮，将选中的用户名称列表及用户ID列表返回给邮件模块页面。思路是二级窗体界面从服务端构造，在客户端用js调用弹出二级窗体，勾选用户后，使用js遍历勾选的用户获取用户信息列表。

构造二级窗体界面的部分使用的是Asp.net的ViewGrid控件，这里需要注意的是用户名称和ID都可以使用数据绑定来做，但每个用户前面的勾选框需要用TemplateField标签特殊处理：

        <asp:GridView ID="GridViewUserList" runat="server" Width="279px" 
            AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:TemplateField HeaderText="选择">
                <ItemTemplate>
                <asp:CheckBox ID="CheckBox"  runat="server"/>
                </ItemTemplate>
              </asp:TemplateField>
                <asp:BoundField DataField="UserID" HeaderText="用户编号" />
                <asp:BoundField DataField="Name" HeaderText="用户姓名" />
            </Columns>
        </asp:GridView>

确定及取消按钮：

        <input type="button" id="tbnconfirm" οnclick="script:SelectCheckBox(this)" name="tbnConfirm" value="确定"/>
        <input type="button" id="btncancel" name="btncancel" value="取消" οnclick="javascript:window.close()"/>

Js函数：

    <script type="text/javascript">
    function SelectCheckBox(obj)
         {
             var GridView1 = document.getElementById("<%=GridViewUserList.ClientID %>");
             var returnString = "";
             var returnID = "";
            for(i=1; i < GridView1.rows.length; i++)
            {
                var bool = GridView1.rows[i].cells[0].getElementsByTagName("INPUT")[0];
                var UserID = GridView1.rows[i].cells[1].innerHTML;
                var UserName = GridView1.rows[i].cells[2].innerHTML;
                if (bool.checked == true) {
                    returnString = returnString + UserName + ";";
                    returnID = returnID + UserID + ";";
                }
            }
            returnString = returnString.substring(0, returnString.length - 1);
            returnID = returnID.substring(0, returnID.length - 1);
            var returnValue = new Array();
            returnValue[0] = returnID;
            returnValue[1] = returnString;
            window.returnValue = returnValue;
            window.close();
        }
     </script>

二级窗体的创建就此完成，这里需要注意的是客户端如何遍历选中的CheckBox，并提取CheckBox对应的用户ID和姓名。返回的值是通过window.returnValue来实现的。另外在使用ViewGrid绑定的时候，首先向页面拖放一个ViewGrid编辑其列，并拖放一个SqlDataSource控件，在Page_Load事件中将SqlDataSource的ConnectionString属性及SelectCommand属性指定即可实现。

主模块上的代码：

HTML控件定义：

<input id="HiddenSelectedUserID" type="hidden" runat="server"/>
<asp:TextBox ID="tbReceiveUsers" runat="server" ReadOnly="true" Width="400px">
<input id="BtnAddUser" type="button" value="添加" οnclick="javascript:GetReceiveUsers(this)"/>

JS代码：

<script   language="javascript">
    function GetReceiveUsers(obj) {
        var sFeature = "dialogWidth:400px;dialogHeight:300px;resizable:no;scroll:yes;center:yes;help:no";
        var sUrl = "http://localhost/ssOA/ln/SelectUserEditor.aspx";
        var UserInfos = window.showModalDialog(sUrl, window, sFeature);   
      if (UserInfos != null) {
          document.getElementById("HiddenSelectedUserID").value = UserInfos[0];
          document.getElementById("tbReceiveUsers").value = UserInfos[1];   
          }   
  } 
  </script>

大功告成，这里将二级窗体返回的用户姓名列表赋予一个textbox显示，将用户Id列表保存在hidden控件中，提交给服务端。