ASP.NET-008—JS绑定控件事件

浏览数：150 / 时间：2015年06月09日

界面上的事件一般可以通过控件自带的事件属性添加事件。其实还有一个方式，就是让JS来给控件绑定事件，这样一来就可以实现控件的事件动态进行变化，在实现功能的时候会更加方便。
JS绑定控件事件的格式如下：
$("#<%=全局控件名.ClientID%>").bind("事件名", function () { 事件对应的JS方法(); return false; });
或者
$(控件对象).bind("事件名", function () { 事件对应的JS方法(); return false; });
来看代码，下面是一个全局按钮控件和一个Gridview里的行的按钮绑定的事件的效果。
按钮

gridview中的按钮事件

代码如下
主要有前台JS代码来实现，后台代码仅仅负责显示绑定的数据。
前台，

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body id="Body1" runat="server">
     <form id="Form1" runat="server">


      <asp:Button ID="btnFirst" runat="server"  Text="按钮1"/>
      
      <asp:GridView ID="dgPersons" runat="server" EnableViewState="false" CellPadding="4"
       GridLines="Horizontal" PageChange="TextBox" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333"
       CellSpacing="1" Width="60%" ShowNoRecordTip="True">
     <Columns>


       <asp:TemplateField>
       <ItemTemplate>
         <%#Container.DataItemIndex +1%>
         <input id="hideID" type="hidden" runat="server" value=‘<%#Eval("p_id")%>‘ />
       </ItemTemplate>
       <HeaderTemplate>
           <span>序号</span>
       </HeaderTemplate>
       </asp:TemplateField>


       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_name")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>姓名</span>
       </HeaderTemplate>
       </asp:TemplateField>


        <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_age")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>年龄</span>
       </HeaderTemplate>
       </asp:TemplateField>
      
       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_sex")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>性别</span>
       </HeaderTemplate>
       </asp:TemplateField>


             
       <asp:TemplateField>
       <ItemTemplate>
         <asp:Button ID="btClick" runat="server" Text="点击" />
       </ItemTemplate>
       <HeaderTemplate>
           <span>操作</span>
       </HeaderTemplate>
       </asp:TemplateField>


     </Columns>
     <FooterStyle BackColor="#5D7B9D" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <RowStyle HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    </asp:GridView>
    </form>
</body>
<script type="text/javascript" src="/Scripts/Ajax.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>


<script language="javascript" type="text/javascript">


    var dgPersonsID = "<%= dgPersons.ClientID %>";


    $(document).ready(function () {
        $("#<%=btnFirst.ClientID%>").bind("click", function () { FunctionFirst(); return false; });
        BindEventGridView();
    });


    function FunctionFirst() {
        alert("按钮1点击");
        return false;
    }


    function BindEventGridView() {
        var dgg = document.getElementById(dgPersonsID);
        for (var i = 1; i < dgg.rows.length; ++i) {
            var cells = dgg.rows[i].cells;
            var row = dgg.rows[i];
            if (row.style.display != "none") {
                $(cells[4].firstChild).bind("click", function () { OperateClick(); return false; });
            }
        }


        return false;
    }


    function OperateClick() {
        alert("操作按钮被点击！");
        return false;
    }
</script>
</html>

后台

public partial class ChildFrm : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = InitData();


                this.dgPersons.DataSource = dt;


                this.dgPersons.DataBind();
            }
        }


        private DataTable InitData()
        {
            DataTable PersonCollect = new DataTable();


            PersonCollect = new DataTable();


            PersonCollect.Columns.Add("p_id");


            PersonCollect.Columns.Add("p_name");


            PersonCollect.Columns.Add("p_age");


            PersonCollect.Columns.Add("p_sex");


            if (PersonCollect.Rows.Count < 1)
            {
                for (int i = 0; i < 5; i++)
                {
                    DataRow nrow = PersonCollect.NewRow();


                    nrow["p_id"] = System.Guid.NewGuid().ToString();


                    nrow["p_name"] = "西北白杨树";


                    nrow["p_age"] = 27;


                    nrow["p_sex"] = "男";


                    PersonCollect.Rows.Add(nrow);
                }
            }


            return PersonCollect;
        }
    }

代码下载

ASP.NET-008—JS绑定控件事件,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

ASP.NET-008—JS绑定控件事件