如何在项目模板内的按钮上触发javascript

本文关键字：按钮 javascript 项目 | 更新日期: 2023-09-27 18:01:51

当我点击gridview项目模板内的按钮时，onclientclick事件应该触发，然后调用javascript函数，但我的问题是在项目模板按钮中没有onclientclick事件。

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="Default.aspx.cs"
    Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>Untitled Page</title>
    <style type="text/css">
        .dvBroker
        {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-image: url(image/broker_bg.png);
            background-repeat: repeat;
        }
        .collection_heading2
        {
            font-family: verdana;
            font-size: 12px;
            font-weight: bold;
            color: #000000;
            background-image: url(image/gray_bg.gif);
            background-repeat: repeat-x;
            height: 20px;
            width: 386px;
            margin-left: 30%;
            margin-top: 50px;
            padding: 7px 7px 0px 7px;
            border: 3px solid #000000;
            border-bottom: none;
            text-align: center;
        }
        .broker_window
        {
            border: 3px solid #000000;
            height: 250px;
            overflow: auto;
            width: 400px;
            background-color:White;
            margin-left: 30%;
            border-top: none;
            padding-top: 10px;
            text-align: left;
        }
    </style>
</head>
<body>
    <script type="text/javascript" language="javascript">
    function Show()
    {
     document.getElementById("dvStage").style.display='block';
     return false;
    }    
    function Close()
    {
    document.getElementById("dvStage").style.display='none';
    return false;
    }
    </script>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="sc1" runat="server" EnablePartialRendering="true">
    </asp:ScriptManager>
    <div>
        <asp:Label ID="lblmsg" runat="server" ForeColor="#FF3300"></asp:Label>
        <asp:LinkButton ID="lbnaddnewcharge" runat="server" OnClientClick="return Show();"
            Text="Show"></asp:LinkButton>
    </div>
    <div>
        ROLL NO:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="txtrollno" runat="server"></asp:TextBox>
        <div>
            STUDENT NAME:&nbsp;
            <asp:TextBox ID="txtname" runat="server"></asp:TextBox>
            &nbsp;&nbsp;&nbsp;
            <asp:Button ID="Button1" runat="server" Text="ADD" BorderStyle="Ridge" OnClick="btnadd_Click" /></div>
        <asp:GridView ID="gvstudent" runat="server" AutoGenerateColumns="False" Width="857px"
            OnRowDataBound="gvstudent_RowDataBound" OnSelectedIndexChanged="gvstudent_SelectedIndexChanged1">
            <Columns>
                <asp:BoundField HeaderText="ROLL NO" DataField="roll_no" />
                <asp:BoundField HeaderText="NAME" DataField="name" />
                <asp:BoundField HeaderText="TOTAL" DataField="total" />
                <asp:BoundField HeaderText="STATUS" DataField="status" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Button CommandName="Click" ID="btnclick" OnCommand="btnclick_Click" CommandArgument='<%#Eval("roll_no") %>'
                            OnClientClick="return Show('aspnetForm','[gvstudent]');" runat="server" Text="Click" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <div id="dvstage" class="dvBroker">
        <div class="collection_heading2">
            <div style="float: left">
                SUBJECT
            </div>
            <div style="float: right">
                <asp:ImageButton ID="btnclose" runat="server" ImageUrl="~/image/delete.png" OnClientClick="return Close();" />
            </div>
        </div>
        <div class="broker_window">
            <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="gvchild"
                        PopupControlID="btnclick" Position="Center">
                    </asp:PopupControlExtender>
                    <asp:GridView ID="gvchild" OnRowDataBound="gvChild_RowDataBound" runat="server" AutoGenerateColumns="false"
                        EmptyDataText="NO Row in grid view">
                        <Columns>
                            <asp:BoundField HeaderText="Subject" DataField="subject_name" />
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <asp:TextBox ID="txtsubject" runat="server" Text='<%#Bind("marks") %>'></asp:TextBox></ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                    <asp:Button ID="btnaddchild" runat="server" Text="ADD" OnClick="btnaddchild_Click" />&nbsp;
                    <asp:Button ID="btncancle" runat="server" Text="CANCLE" OnClick="btncancle_Click1" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
    </form>
</body>
</html>

使用像jQuery这样的客户端框架。不要将所有的onclick客户端事件内联。它使您的标记膨胀，并且更难维护。而是绑定事件，例如http://api.jquery.com/bind和/或http://api.jquery.com/live。

因为它是ASP。. NET WebForms中，你的HTML元素的id属性被呈现为服务器控件的ClientID属性，所以如果这会导致你使用jQuery选择器通过id获取元素的引用来绑定事件，请使用jQuery的选择器http://api.jquery.com/category/selectors。

。

$("input[id$='btnClose'").live("click", function(event) {
      $("#dvStage").hide();
      event.stopPropagation();
});
$("a[id$='lbnaddnewcharge']").live("click", function(event) {
          $("#dvStage").show();
          event.stopPropagation();
    });