Thread: V9 Search Form

My current site has a search form, I see in V9 (master pages) this cant be done and a control was created.

How do I convert this (im using an image as the button)

Code:

        <div id="search2"> 
        <form name="topsearchform" action="search/search.aspx" method="GET" onsubmit=""> 
        <h4>Search</h4> 
        <input type="text" size="25" name="keywords" class="si" /> 
        <input type="image" src="skins/skin_2/images/search.jpg" class="btn" value="submit" name="submit" /> 
        </form>

To this

Code:

        <aspdnsf:Search ID="ctrlSearch" runat="server" CssClass="search" SearchButtonCaption="Go"
                SearchCaption="<%$ Tokens: StringResource, common.cs.82 %>" SearchTextMinLength="<%$ Tokens:AppConfigUSInt, MinSearchStringLength %>"
                SearchTextMinLengthInvalidErrorMessage="<%$ Tokens: StringResource, search.aspx.2 %>"
                ValidateInputLength="true" ShowValidationMessageBox="true" ShowValidationSummary="false" />
        </div>

Thanks

We actually created a new control, which if you've ever created a custom server control for asp.net, it's quite easy.

If you have the source code for v9, you can even just copy their search control, create your own called "MySearchControl" in App_Code, and implement it.

Works quite nicely actually

Matt, you have a few live site examples to post and show how it can work?'

Im just having a hard time wrapping my head around how I can make the button an image.

I'll write up a blog post with some sample code and instructions and post the link back here.

Will start it now, probably finish it in the morning!

ssgumby,

I've created a quick blog post detailing how we created a custom search control in version 9. Source code for the solution can be found on the blog post.

Hope it helps!

http://www.demacmedia.com/post/2010/...h-Control.aspx

Matt,

That was perfect and GREATLY appreciated! I will attempt this tonight. I love how you say "day job asp.net developers" .... I am a "day job" Java developer and have in general found the transition to C# quite easy. Still some hiccups though but making progress.

Again, thanks!

Happy to hear that it might help you out.

Once upon a time I was a Java developer. C# is a near rip off of Java so picking it up for java devs is pretty easy

We're actually already starting to do away with the custom controls in favor of user controls simply because user controls are so much easier for non-.NET developers to modify and understand. User controls are much more visual than injecting programmatically instantiated controls into the Page controls collection hierarchy.

User controls would be absolutely brilliant!

You know what else would be brilliant, using jQuery for all front end javascript/ajax/client side goodies. Just...saying...is all

Hey Matt,

I have the custom control working pretty close with the exception of the button and input field styles. I suspect the issue is because its all sitting in a span. See my code comparisons below. Is there anyway to tell the custom control to not render in a span? ie (id="ctl00_ctrlSearch"). Note that my css did change from a div with an id of search2 to making it a class.

New control

Code:

<span id="ctl00_ctrlSearch">
	<div id="ctl00_ctrlSearch_SearchPanel" class="search2" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_ctrlSearch_SearchButton')">
	<h4>Search</h4>
	<input name="ctl00$ctrlSearch$SearchText" type="text" id="ctl00_ctrlSearch_SearchText" class="ifield" />
	<input type="button" name="ctl00$ctrlSearch$SearchButton" value="" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctrlSearch$SearchButton&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" id="ctl00_ctrlSearch_SearchButton" class="btn" />
	<span id="ctl00_ctrlSearch_ctl00" class="_error" style="color:Red;font-weight:normal;font-style:normal;display:none;"></span>
	<div id="ctl00_ctrlSearch_ctl01" style="color:Red;display:none;"></div>
	</div>
</span>

Previous form

Code:

        <div id="search2"> 
        <form name="topsearchform" action="search/search.aspx" method="GET" onsubmit=""> 
        <h4>Search</h4> 
        <input type="text" size="25" name="keywords" class="ifield" /> 
        <input type="image" src="skins/skin_2/images/search.jpg" class="btn" value="submit" name="submit" /> 
        </form> 
        </div>

Yes,

You need to override the control TagKey. Example below (this is around line 370 in Search.cs control):

protected override HtmlTextWriterTag TagKey
{
get
{
return HtmlTextWriterTag.Div;
}
}

Eureka, I got it working!

Thanks sooo much!