Getting an error why I try converting Searchbox Button to image button

Hi everyone, I am trying to change the search button to image button

This is the error:

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: The base class includes the field 'btnSearch', but its type (System.Web.UI.WebControls.Button) is not compatible with the type of control (System.Web.UI.WebControls.ImageButton).

Source Error:


Line 7:      <li>
Line 8:          
Line 9:          <asp:ImageButton runat="server" ImageUrl="~/App_Themes/nopClassic/images/btn-search.gif"  ID="btnSearch" OnClick="btnSearch_Click" Text="<% $NopResources:Search.SearchButton %>"
Line 10:             CssClass="searchboxbutton" CausesValidation="false" />
Line 11:     </li>

This is the code:
This is the cs page
protected System.Web.UI.WebControls.ImageButton btnSearch;

This is the ascx page
  <asp:ImageButton runat="server" ImageUrl="~/App_Themes/nopClassic/images/btn-search.gif"  ID="btnSearch" OnClick="btnSearch_Click" Text="<% $NopResources:Search.SearchButton %>"
            CssClass="searchboxbutton" CausesValidation="false" />

The original ofcourse was Button instead of ImageButton.

What am I doing wrong?

Check the method btnSearch_Click isn't referring to something that is only available to the System.Web.UI.WebControls.Button.  And also check your designer file, has changed the reference to the control to be an ImageButton and not still a button.

This is the designer:

namespace NopSolutions.NopCommerce.Web.Modules {
    
    
    public partial class SearchBoxControl {
        
        /// <summary>
        /// txtSearchTerms control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected global::System.Web.UI.WebControls.TextBox txtSearchTerms;
        
        /// <summary>
        /// btnSearch control.
        /// </summary>
        /// <remarks>
        /// Auto-generated field.
        /// To modify move field declaration from designer file to code-behind file.
        /// </remarks>
        protected System.Web.UI.WebControls.Button btnSearch;
    }
}

And this is .cs

namespace NopSolutions.NopCommerce.Web.Modules
{
    public partial class SearchBoxControl : BaseNopUserControl
    {
        protected void btnSearch_Click(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(txtSearchTerms.Text))
            {
                Response.Redirect(string.Format("~/search.aspx?searchterms={0}", HttpUtility.UrlEncode(txtSearchTerms.Text)));
            }
        }

        protected override void OnPreRender(EventArgs e)
        {
            this.txtSearchTerms.Attributes.Add("onfocus", string.Format("if(this.value=='{0}')this.value=''", GetLocaleResourceString("Search.SearchStoreTooltip")));
            txtSearchTerms.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('" + btnSearch.ClientID + "').click();return false;}} else {return true}; ");
            base.OnPreRender(e);
        }
    }
}

Anything wrong with it?

You need to change the definition line in SearchBox.ascx.designer.cs

FROM:

protected global::System.Web.UI.WebControls.Button btnSearch;

TO:

protected global::System.Web.UI.WebControls.ImageButton btnSearch;

You will also need to change

Text="<% $NopResources:Search.SearchButton %>"

TO

AlternateText ="<% $NopResources:Search.SearchButton %>"

Because Text is not a property of ImageButton control

As Stevee says and I said in the initial response... Change the button to ImageButton

I actually did that just didn't put the updated part. Nevertheless I am not the only one who has this problem:
https://www.nopcommerce.com/boards/t/5130/how-to-change-the-button-to-an-imagebutton-in-the-searchboxascx.aspx

I try to rebuild the solution and get an error
Error  8  Unknown server tag 'nopCommerce:SelectProductAttributes'.  C:\inetpub\wwwroot\nopCommerce180Source\NopCommerceStore\Administration\Modules\ProductVariantAttributes.ascx  213  

Error  9  The name 'txtSearchTerms' does not exist in the current context  C:\inetpub\wwwroot
\nopCommerce180Source\NopCommerceStore\Modules\SearchBox.ascx.cs  34  39  C:\...\NopCommerceStore\

Error  10  The name 'txtSearchTerms' does not exist in the current context  C:\inetpub\wwwroot\nopCommerce180Source\NopCommerceStore\Modules\SearchBox.ascx.cs  36  104  C:\...\NopCommerceStore\

Error  11  'NopSolutions.NopCommerce.Web.Modules.SearchBoxControl' does not contain a definition for 'txtSearchTerms' and no extension method 'txtSearchTerms' accepting a first argument of type 'NopSolutions.NopCommerce.Web.Modules.SearchBoxControl' could be found (are you missing a using directive or an assembly reference?)  C:\inetpub\wwwroot\nopCommerce180Source\NopCommerceStore\Modules\SearchBox.ascx.cs  42  18  C:\...\NopCommerceStore\

Error  12  The name 'txtSearchTerms' does not exist in the current context  C:\inetpub\wwwroot\nopCommerce180Source\NopCommerceStore\Modules\SearchBox.ascx.cs  43  13  C:\...\NopCommerceStore\

Error  13  The name 'btnSearch' does not exist in the current context  C:\inetpub\wwwroot\nopCommerce180Source\NopCommerceStore\Modules\SearchBox.ascx.cs  43  170  C:\...\NopCommerceStore\

No clue how to fix this.

Anyone with success?

I have tried the above with VWD Express and it compiles with errors too, and also edited the file SearchBox.ascx.cs line 32: protected void btnSearch_Click(object sender, ImageClickEventArgs e)

scoo-b wrote:

You are doing it in-correctly,

Do not make any changes in .cs file

Just change your button in ascx file to image button and mention the source of button image

now

Just go to SearchBox.ascx.designer.cs file

and change this:

        protected global::System.Web.UI.WebControls.Button btnSearch;

to

        protected global::System.Web.UI.WebControls.ImageButton btnSearch;

That's it, now re-built your project and it should work...

For those wanting to convert searchbox button into an image button and have tried the steps mentioned above without success, you can try the following (after following the steps above):

Goto line 1 of ~/MasterPages/Root.Master, ~/Modules/HeaderMenu.ascx, and ~/Modules/SearchBox.ascx, and change "CodeBehind" to "CodeFile" then recompile. Good luck.