如何在母版页眉中的 "Enter" 上指定主图像按钮

Question

我的网站是 pbradleyonline.com 如果您想真正了解发生了什么。我有一个母版页文件，其中包含两个不同的图像按钮。他们都有一个目的。如果单击，一个将用户重定向到一个页面，另一个按钮应该链接到它旁边的搜索文本框。单击 "Search" 按钮后，他们应该会转到另一个包含结果的页面。

问题在于，当文本框（也在页眉中）获得焦点时，如果按下回车键，则会触发页眉中的错误按钮并重定向到错误的页面。我也明白这可能与控件是图像按钮而不是标准的提交按钮有关，但我想将它们保留为图像按钮。

我尝试了多种解决方案，包括为文本框以及文本框和正确按钮所在的面板控件设置 "DefaultButton" 属性。这没有用。这是母版页代码。

<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<link rel="shortcut icon" type="image/x-icon" href="~/Pictures/PBradleyFavicon.ico" />

<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />



<asp:ContentPlaceHolder ID="HeadContent" runat="server">

</asp:ContentPlaceHolder>
<style type="text/css" runat="server">
.textBox
{
 text-align: right;
 margin-top:10px;
 margin-right:10px;
 float:Right;
}
</style>
</head>
<body>
<form runat="server" >
  <div class="header"  dir="ltr">
        <div class="title">
        </div> 
        <div class="Logo" >
        <table style="width: 100%; margin-bottom: 15px;">
                <tr>
                    <td align="left" valign="top">
                        <asp:ImageButton ID="ImageButton2" usesubmitbehavior="false" runat="server" Height="64px" 
                            ImageUrl="~/Pictures/PBradleyJCBLogo.jpg" 
                            style="margin-left: 0px" Width="321px" CausesValidation="False" 
                            TabIndex="3" />
                    </td>
                </tr>
            </table>
        </div>
        <div class="hideSkiplink" DefaultButton="ImageButton1">

        <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
            IncludeStyleBlock="false" Orientation="Horizontal">
            <Items>
                <asp:MenuItem NavigateUrl="~/" Text="Home" />
                <asp:MenuItem NavigateUrl="~/Used_Equipment.aspx" Text="Equipment">
                    <asp:MenuItem NavigateUrl="~/New_Equipment.aspx" Text="New Equipment"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="~/Used_Equipment.aspx" Text="Used Equipment"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="~/jcb.aspx" Text="JCB Skid Steers"></asp:MenuItem>

                </asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Sprayer_Parts.aspx" Text="Online Parts" >
                    <asp:MenuItem NavigateUrl="~/Sprayer_Parts.aspx" Text="Sprayer Parts" />
                    <asp:MenuItem NavigateUrl="~/Farm_Equipment_Teeth.aspx" Text="Ag Teeth" />
                <asp:MenuItem NavigateUrl="https://www.allpartsstore.com/index.htm?customernumber=VA2352" Text="Aftermarket Tractor Parts" />
                </asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Plastic_Supplies.aspx" Text="Plastic Supplies" />
                <asp:MenuItem NavigateUrl="~/Video.aspx" Text="Customer Corner">
                    <asp:MenuItem NavigateUrl="~/Forms.aspx" Text="Customer Forms"></asp:MenuItem>
                    <asp:MenuItem NavigateUrl="~/Video.aspx" Text="Video Lounge"></asp:MenuItem>

                </asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Contact.aspx" Text="Contact Us" />
            </Items>
        </asp:Menu>
    </div>
        <asp:Panel ID="p" runat="server" DefaultButton="ImageButton1">         
           <asp:ImageButton OnClientClick="ImageButton1_Click" ID="ImageButton1"  
                runat="server" CssClass="textBox" Height="22px" 
            ImageUrl="~/Pictures/SearchIcon2.png" OnClick="ImageButton1_Click" 
                Width="22px" TabIndex="1" />   
        <asp:TextBox ID="TextBox1"  runat="server" DefaultButton="ImageButton1" CssClass="textBox" 
            style="margin-top: 11px" Width="150px"></asp:TextBox>

            </asp:Panel>



    </div>

<div class="page">

    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
    <div class="clear">
    </div>
</div>

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="true" ScriptMode="Release">
</cc1:ToolkitScriptManager>
</form>

要查看的控件是 TextBox1 ImageButton1 和 ImageButton2，ImageButton1 应该是按下 enter 时唯一触发的按钮，至少在文本框具有焦点时.

这是 ImageButton1_Click

的代码

 Protected Sub ImageButton1_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click


    Dim Conn As New SqlConnection(ConfigurationManager.ConnectionStrings("Sprayer_Parts_CatalogConnectionString").ConnectionString.ToString)
    Dim sql As New SqlDataSource
    Dim sql3 As New SqlCommand
    Dim sql4 As New SqlCommand
    Dim str2 As String
    Dim str As String
    sql4.Connection = Conn
    sql3.Connection = Conn
    Conn.Open()

    sql3.Parameters.AddWithValue("@Search", TextBox1.Text)
    sql4.Parameters.AddWithValue("@Search", TextBox1.Text)
    sql3.CommandText = "Select Category From SubCategory WHERE Category Like '%' + @Search + '%'"
    sql4.CommandText = "Select Type From SubCategory WHERE Type LIKE '%' + @Search + '%' OR Category LIKE '%' + @Search + '%' OR Order# LIKE '%' + @Search + '%'"
    If Not sql4.ExecuteReader().HasRows Then
        Response.Redirect("~/Sprayer_Parts.aspx?Search=" + "1")

    End If


    Response.Redirect("~/Sprayer_Parts.aspx?Search=" + TextBox1.Text)
    Conn.Close()

End Sub

如果按钮被实际点击，一切正常。

ImageButton2_Click

Protected Sub ImageButton2_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles ImageButton2.Click
    Response.Redirect("~/jcb.aspx")
End Sub

Answer 1

如果 JCB 按钮所做的只是 link 转到另一个页面，我想理想情况下，您可以将其设为带有 link 的直接图像，这样搜索按钮就是第一个/唯一的按钮。

这可能不再是执行此操作的最佳方法，但在之前类似的情况下，我拦截了 return 按键。例如，将此脚本添加到您的页面：

<script>
    function detectSearchBoxReturn(e) {
        var code;
        if (!e) { var e = window.event; }
        if (e.keyCode) { code = e.keyCode; }
        else if (e.which) { code = e.which; }

        if (code == 13) {
            // find your button and perform a click event.
        }
    }
</script>

然后在您的文本框中添加

onkeypress = "detectSearchBoxReturn(event);"

显然，如果脚本被禁用，这将不起作用，并且如前所述，这可能不是最好的方法。

如何在母版页眉中的 "Enter" 上指定主图像按钮

How to specify primary Image button on "Enter" in Masterpage Header

vb.net

asp.net

master-pages

onclick