首页 > 下载 > 下载详文：ASP.NET的GridView选中行时触发脚本

ASP.NET的GridView选中行时触发脚本

源文件下载
4362KB

发布时间：2014年05月05日 11时19分07秒属性：程序Web开发 > Microsoft 访问次数：127540

字体：大初始小简繁添加收藏

ASP.NET的GridView选中行时触发脚本

在GridView中绑定数据库之后，在选择行时触发Javascript脚本，这个可以通过GridView_RowDataBound事件中来完成脚本指定，其它方也可以通过Page_Load中完成，在Page_Load中需要把GridView中的数据行循环出来然后预先指定行的脚本，这样在GridView_SelectedIndexChanging中选择数据库行时就会触发选中行的脚本，最后一个种可以直接从GridView_SelectedIndexChanging中查找列触发。三个方法最好选择还是从GridView_RowDataBound中指定Javascript脚本；在Page_Load中通过for循环来触发会影页面加载速度；而直接在GridView_SelectedIndexChanging则需要选中之后才会触发脚本，本文主要介绍GridView_RowDataBound指定客户端js脚本的触发。

GridView_RowDataBound中指定Javascript脚本

在本文示例中先定义了一个泛型List数据列表，把UserInfo类装载到List中，UserInfo类有Id、Name、Email、WebSite四个成员属性。然后再通过public List<UserInfo> User()加入四行数据，详细代码如下：

C# 代码复制

using System;
using System.Collections.Generic;
using System.Web;

/**//// <summary>
///UserInfo 用户成员
///Copyright(C) 遗昕|Weisim3.com 05.05.2014
///ASP.NET的GridView选中行时触发脚本 
/// </summary>

public class UserInfo
...{
    public int Id ...{ get; set; }
    public string Name ...{ get; set; }
    public string Email ...{ get; set; }
    public string WebSite ...{ get; set; }
}

C# 代码复制

/**//// <summary>
    /// User() - 用户数据
    /// Copyright(C) 遗昕|Weisim3.com 05.05.2014
    /// ASP.NET的GridView选中行时触发脚本 
    /// </summary>
    /// <returns></returns>
    public List<UserInfo> User()
    ...{
        List<UserInfo> UserList = new List<UserInfo>();
        UserInfo user1 = new UserInfo();
        user1.Id = 1;
        user1.Name = "Name1";
        user1.Email = Name1@hotmail.com;
        user1.WebSite = www.Name1.com;
        UserList.Add(user1);

        UserInfo user2 = new UserInfo();
        user2.Id = 2;
        user2.Name = "Name2";
        user2.Email = Name2@hotmail.com;
        user2.WebSite = www.Name2.com;
        UserList.Add(user2);


        UserInfo user3 = new UserInfo();
        user3.Id = 3;
        user3.Name = "Name3";
        user3.Email = Name3@hotmail.com;
        user3.WebSite = www.Name3.com;
        UserList.Add(user3);

        UserInfo user4 = new UserInfo();
        user4.Id = 4;
        user4.Name = "Name4";
        user4.Email = Name4@hotmail.com;
        user4.WebSite = www.Name4.com;
        UserList.Add(user4);

        UserInfo user5 = new UserInfo();
        user5.Id = 5;
        user5.Name = "Name5";
        user5.Email = Name5@hotmail.com;
        user5.WebSite = www.Name5.com;
        UserList.Add(user5);

        return UserList;
    }

在Page_Load中将public List<UserInfo> User()数据列表绑定给GridView，启用GirdView的选择列，把选择列从BoundField转换为TemplateField，并且启动SelectedIndexChanging和RowDataBound两个事件。详细操作如图。

在UpdatePanel中选择GirdView传值给其它控件能有很好的体验无刷新，只需要把主键获取到即可，GridView1.DataKeys[e.NewSelectedIndex].Value把所选行的主机获取到然后传给其他控件或其他方法。但如果要通过选取行把所选行的主键获参数传到前台javascript就需要在RowDataBound中来完成。

在RowDataBound事件中先把选择列中的LinkButton查找出来，这里选择列是放在第一列中，所以查找索引就是从第0列 “LinkButton selector = (LinkButton)e.Row.Cells[0].FindControl("LinkButton1");”，在RowDataBound中获取主键GridView1.DataKeys[e.Row.RowIndex].Values[0].ToString()，然后把获取到的LinkButton添加onclick脚本事件，把主键传入到onclick事件中传到前台，这里为了区分再UpdatePanel中加入一个Label和一个input Text文本框，同时在UpdatePanel外面也加入一个input Text文本框，前台Javascript中写入一个传参赋值个input Text文本框的方法function sendeVal(obj, inputxt)，需要注意的是在通过脚本给UpdatePanel中的input Text传值需要延迟几百号秒执行，因为UpdatePanel需要回发初始化里面所有控件，在RowDataBund中开看到通过setTimeout延迟了300毫秒执行。详细代码如下：

前台HTML 代码复制

<%...@ Page Language="C#" AutoEventWireup="true" CodeFile="SelectorJavascript.aspx.cs"
    Inherits="SelectorJavascript" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.NET的GridView选中行时触发脚本  - 遗昕 | Weisim3.com</title>
    <style type="text/css">...
        .note
        {...}{
            font-size: 12px;
            color: #999;
        }
    </style>
    <script type="text/javascript">...
        function sendeVal(obj, inputxt) ...{
            //alert(obj);
            document.getElementById(inputxt).value = obj;

        }

        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div style="border: 1px solid #0409bf; width: 60%; padding: 3px">
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"
                        BorderColor="#3366CC" BorderStyle="Solid" BorderWidth="1px" CellPadding="4" DataKeyNames="Id"
                        Font-Size="14px" OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanging="GridView1_SelectedIndexChanging"
                        Width="100%">
                        <Columns>
                            <asp:TemplateField ShowHeader="False">
                                <ItemTemplate>
                                    <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Select"
                                        Text="选择"></asp:LinkButton>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField DataField="Id" HeaderText="Id">
                                <ItemStyle HorizontalAlign="Center" />
                            </asp:BoundField>
                            <asp:BoundField DataField="Name" HeaderText="Name">
                                <ItemStyle HorizontalAlign="Center" />
                            </asp:BoundField>
                            <asp:BoundField DataField="Email" HeaderText="Email">
                                <ItemStyle HorizontalAlign="Center" />
                            </asp:BoundField>
                            <asp:BoundField DataField="WebSite" HeaderText="WebSite">
                                <ItemStyle HorizontalAlign="Center" />
                            </asp:BoundField>
                        </Columns>
                        <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
                        <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" Font-Size="18px" />
                        <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
                        <RowStyle BackColor="White" ForeColor="#333333" />
                        <SelectedRowStyle BackColor="#d6dbe6" Font-Bold="True" ForeColor="#666666" />
                        <SortedAscendingCellStyle BackColor="#EDF6F6" />
                        <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
                        <SortedDescendingCellStyle BackColor="#D6DFDF" />
                        <SortedDescendingHeaderStyle BackColor="#002876" />
                    </asp:GridView>
                    Label Label1：<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                    <span class="note">(在同一个UpdatePanel里面服务器控件)</span>
                    <br />
                    input Text1：
                    <input id="Text1" type="text" /><span class="note">(在同一个UpdatePanel里面)</span>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <div style="padding: 3px">
            input Text2:
            <input id="Text2" type="text" />
            <span class="note">(在UpdatePanel外面)</span>
        </div>
    </div>
    </form>
</body>
</html>

后台C# 代码复制

protected void Page_Load(object sender, EventArgs e)
    ...{
        GridView1.DataSource = User();
        GridView1.DataBind();
    }

    protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)
    ...{
        int Id = Convert.ToInt32(GridView1.DataKeys[e.NewSelectedIndex].Value);
        Label1.Text = Id.ToString();
    }

    /**//// <summary>
    /// Copyright(C) 遗昕|Weisim3.com 05.05.2014
    /// ASP.NET的GridView选中行时触发脚本 
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    ...{
        if (e.Row.RowType == DataControlRowType.DataRow)
        ...{
            //查找选择列的LinkButton，然后添加onclick脚本事件
            LinkButton selector = (LinkButton)e.Row.Cells[0].FindControl("LinkButton1");
            int Id = Convert.ToInt32(GridView1.DataKeys[e.Row.RowIndex].Values[0].ToString());
            selector.Attributes.Add("onclick", "sendeVal('" + Id + "','Text2');setTimeout('sendeVal(\\\\'" + Id + "\\\\',\\\\'Text1\\\\')',300);");


        }
    }

最终效果如下图：

关于GridView.RowDataBound 事件的详细介绍可以参考微软msdn官方介绍：

http://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.gridview.rowdatabound%28v=vs.110%29.aspx

免费
ASP.NET的GridView选中行时触发脚本（0）

本下载连接不支持第三下载工具打开，请直接点击下载即可

文章版权归属weisim3.com所有,未经书面版权许可同意，不得私自转载(或做修改转载)，源文件示例仅供学习使用，更不要出于商业用途或印刷出版发行！否则将追究其相关法律责任，版权联系：729260499。

您可能感兴趣的软件资讯