当asp.net CheckBox控件更改时,如何触发客户端和服务器端事件

gjmwrych  于 2023-11-20  发布在  .NET
关注(0)|答案(1)|浏览(135)

我在网格视图中有一个asp.net复选框。它在 OnClick 中有一些JavaScript来确认操作员希望继续。它还在 * OnClick Changed * 事件上有一些服务器端代码。
客户端代码正在执行,但服务器端代码没有被触发,不管操作员是否选择继续。我已经通过添加一些断点来确认这一点。
如果我删除了OnClick客户端代码,服务器端代码正确执行。
任何关于我做错了什么的建议都将非常感激。
代码如下:

<asp:CheckBox ID="InclSectionCB" OnClick="return ProceedYN();" OnCheckedChanged="InclSectionCBChanged" runat="server" AutoPostBack="True" />

个字符
我预计在选中/取消选中复选框时,步骤将是:
1.客户端JavaScript提示操作员是否要继续。2a)如果操作员选择“OK”,则复选框将被更改,并且InclSectionCBChanged中的服务器端代码将执行。2b)如果操作员选择“Cancel”,则复选框将不会更改,并且InclSectionCBChanged中的服务器端代码将不会执行。
现在的情况是:
1.客户端JavaScript提示操作员是否要继续。(正确)2a)如果操作员选择“OK”,则复选框会更改,但InclSectionCBChanged中的服务器端代码不会执行。2b)如果操作员选择“Cancel”,则复选框不会更改,InclSectionCBChanged中的服务器端代码也不会执行。

flseospp

flseospp1#

好了,虽然我们共同的代码出2点击事件的按钮(客户端,服务器端)点击事件,在复选框的情况下?
原来只有一个点击事件,因此asp.net系统别无选择,只能将两个点击事件合并组合成一个公共例程。(客户端+服务器端事件在JavaScript中组合成一个事件)。
这意味着您的第一个代码(客户端JavaScript单击)必须有所不同。
如果用户点击cancel,那么调用代码(请注意,这里我说的是CALLING代码!)必须停止,返回false并退出代码存根。
但是,如果用户点击ok,那么我们必须让调用代码继续,然后运行服务器端的click事件。
您可以通过检查生成的JavaScript来看到这种效果。
如果我有一个这样的复选框:

<asp:CheckBox ID="CheckBox1" runat="server"
            AutoPostBack="true"
            OnCheckedChanged="CheckBox1_CheckedChanged"
            onclick="return myjsclick(this)"
            />

字符串
如前所述,asp.net将合并将OnclickedChanged代码和onclick代码合并为一个JavaScript代码块(实际上没有2个单独的事件)。
因此,上面的转换为:

<input id="CheckBox1" 
   type="checkbox" 
   name="CheckBox1" 
onclick="return myjsclick(this);setTimeout('__doPostBack(\'CheckBox1\',\'\')', 0)">


所以,只需记住onclick(客户端)代码将与服务器端表达式(__doPostBack用于运行/触发服务器端代码)组合。
然而,在上面,因为我们总是返回myjsclick(),那么上面的代码将退出,永远不会继续运行,并调用/运行服务器端代码。
因此,我们必须重写客户端的点击例程,以继续运行表达式之后的代码,但只有当用户确认对话框时才这样做。
这意味着如果用户取消,那么我们退出代码,但如果用户点击确认,那么我们继续运行将/将/确实遵循我们的onclick代码的代码。
所以,我们可以这样写代码:

<asp:CheckBox ID="CheckBox1" runat="server"
            AutoPostBack="true"
            OnCheckedChanged="CheckBox1_CheckedChanged"
            onclick="if (!myjsclick(this)) {return false};"
            />


所以,如果表达式为false,那么我们返回false(并退出代码)。然而,如果你点击ok,那么{return false}将不会运行,但上面表达式后面的任何代码将继续运行。
上面的代码编译后会变成这个标记:

<input id="CheckBox1" 
   type="checkbox" 
    name="CheckBox1" 

 onclick="if (!myjsclick(this)) {return false};setTimeout('__doPostBack(\'CheckBox1\',\'\')', 0)">


所以,现在你可以看到,如果user点击cancel,那么上面的JavaScript代码将退出,但是如果你点击ok,那么跟随表达式的代码行将运行。如前所述,客户端和服务器端事件都合并到一个JavaScript代码中,因此我们必须改变这样的“确认”代码的编写方式。
我应该指出的是,当我想要一个带图标的按钮时,我经常使用上面的方法,因此我使用标准按钮,而不是asp.net按钮。它们的工作原理大致相同,但你必须再次使用上面的技巧,并“假设”你的点击事件和服务器事件被组合成一个JavaScript代码。
因此,使用上面的复选框或标准按钮(runat=server),我们得到了:

<button id="cmdViewPeople" runat="server" type="button"
    onserverclick="cmdViewPeople_ServerClick"
    onclick="if !(myconfirm(this) {return false};"
    class="btn myshadow">
    <span class="fa fa-bed fa-lg"> Booking Details</span>
</button>


上面的按钮看起来像这样:
x1c 0d1x的数据
因此,使用“按钮”而不是asp.net按钮的唯一原因是按钮中有那个图标(字体真棒)。但是请注意按钮如何既有客户端点击,又有服务器端点击。只需记住关于复选框的规则适用于按钮示例。
所以,让我们把这些放在一起,在一个网格视图中完成。
我们将有条件地运行复选框,然后在代码后面对给定的GridView复选框行单击采取行动。
所以,我们现在有这个简单的标记:

<h3><i>Hotels and Bookings</i></h3>
<asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ID" CssClass="table table-hover"
    Width="50%">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="HotelName" HeaderText="Hotel" />
        <asp:BoundField DataField="Description" HeaderText="Descriptioin" />
        <asp:TemplateField HeaderText="Set Hotel Active"
            ItemStyle-HorizontalAlign="Center" ItemStyle-Width="130px">
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server"
                    AutoPostBack="true"
                    OnCheckedChanged="CheckBox1_CheckedChanged"
                    onclick="if (!myjsclick(this)) {return false};" />

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

<script>

    function myjsclick() {

        return confirm("Activing this hotel can cost money\nPlease confrim")
    }

</script>


加载网格的代码是这样的:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid
    End If

End Sub

Sub LoadGrid()

    GVHotels.DataSource = MyRst("SELECT * FROM tblHotelsA
                                ORDER BY HotelName")
    GVHotels.DataBind()

End Sub


以及复选框的代码。注意非常接近服务器端复选框代码如何使用NamingContainer拾取GridView行。注意NamingContainer非常方便,因为我们省去了专门的GridView行命令。使用NamingContainer可以用于复选框,组合框,甚至只是GridView中的一个简单按钮单击以获取当前GridView行信息。
代码看起来像这样:

Protected Sub CheckBox1_CheckedChanged(sender As Object, e As EventArgs)

    Dim chk As CheckBox = sender
    Dim gRow As GridViewRow = chk.NamingContainer

    Debug.Print($"Row index click = {gRow.RowIndex}")
    ' get hidden non exposed database PK value
    Dim intPK As Integer = GVHotels.DataKeys(gRow.RowIndex)("ID")

    Debug.Print($"Database PK value = {intPK}")
    Debug.Print($"Check box checked value = {chk.Checked}")

    ' code here to do whatever.

    Dim cmdSQL As New SqlCommand(
        "UPDATE tblHotels SET Active = @Active
        WHERE ID = @ID")

    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = intPK
    cmdSQL.Parameters.Add("@Active", SqlDbType.Bit).Value = chk.Checked
    MyRstPE(cmdSQL)

End Sub


所以,运行我们得到这样的效果:



在服务器端的即时窗口中,我们可以看到:

Row index click = 0
Database PK value = 17
Check box checked value = True


因此,行点击索引,数据库键,甚至是行点击中的任何值都可以通过上面的代码获得。

相关问题