I'm developing a website (ASP.net) which involves users typing in a textbox to search. I want to display result in the textbox as they are typing the keywords (just like when we are searching on Google).
How can I do this?
Thanks
What you ask is called autocomplete and since you are working on asp.net the most easy direct solution is the use of asp.net ajax control toolkit
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/AutoComplete/AutoComplete.aspx
How ever if you use some other javascript helper library, like jQuery, you can find a lot more examples, one of them : jQuery Autocomplete and ASP.NET
Also if you search for "autocomplete asp.net" you find more examples, some of them:
http://www.asp.net/ajaxlibrary/act_AutoComplete_Simple.ashx
http://www.codeproject.com/Articles/201099/AutoComplete-With-DataBase-and-AjaxControlToolkit
Related
I have text-box and grid-view is present in same asp.net page. while typing some text in text-box I want suggestions, if text is present in data grid-view.
Example: Google Suggest.
What will be the procedure to achieve this.
There are several ways to get this done.
Since you're using asp.net (if you're using webforms) you can use the ajax control toolkit which has a combobox control
http://www.asp.net/AjaxLibrary/AjaxControlToolkitSampleSite/ComboBox/ComboBox.aspx
Or you can go with jquery ui
http://jqueryui.com/autocomplete/
There are many other plugins and frameworks you can try, but these two are pretty basic.
I am currently working with ASP.NET and the person who designed the form has used all Server Controls for things like TextBoxes and Dropdowns etc when really they are not providing postbacks.. Some of the dropdowns and textboxes are values that I need only in jQuery so as far as I can see there are no drawbacks to coverting these controls to standard html controls rather than ASP.NET server controls?
I suppose I will need to continue to have my GetDataGrid button as a server control because I will need it to postback (and receive PageLoad events etc - all asp.net events) to update the GridView? Or would it be possible to use the GridView (ASP.NET server control) from a Webmethod and call it via Jquery?
Of course in my webmethod I would need to the instance of the gridview to add the datasource - but I don't see how this would be possible without being in the ASP.NET events - or maybe I wrong?
The other thing I thought of was changing the GetGridView button to a standard HTML and calling the javascript postback from the client click event?? This way it would do a real postback and I would end up in Page_load.
Taking everything into effect i don't want to the change the GridView asp.net control as it funcions well as an asp.net server control but i am unsure how i would do this.
I remember a document being available that said "how to use asp.net webforms without server controls" but i can't seem to find it. I suppose using webforms like asp.net MVC - but i can't change the project to MVC - its out of my control.
I would love to hear some feedback with regards to how to do this or comments etc.
I find ASP.NET webforms to inject a lot of code smell into pages - I am using .NET 3.5 so a lot of the output is with tables etc...
If you use Request.Form["..."] then you can get the information which was filled in in standard html input fields.
Instead of keep on using the GridView control I suggest you take a look at either jqGrid or the new templating system that Microsoft put into place for jQuery (currently a plugin but expected to be part of core jQuery from version 1.5 on). These can bound to json which can be retrieved from a webmethod or pagemethod call to fill up the template with data.
Also i don't think its possible from asp.net (code behind) to receive values of an html >control without it having runat=server.
Use webmethods.
Set a client event (like 'onchange') on the html control and then in javascript function called when the event is fired you can use PageMethods to send your data to the code behind.
Some thoughts...
The GridView can't be created in a WebMethod and even if there was a way to get that to work, you'd be better off going with a genuine client side grid. As that's not an option, I don't think there is too much point in trying to make any major changes to your existing pages.
ViewState
Changing the textboxes, buttons etc to HTML versions, would gain you a little bit in reduced Viewstate size but add a bit of complexity in how you handle interactions with the page. You can add runat="server" to HTML controls which will give you control over what is rendered and still have access to the control on the server side.
.Net 4 gives you far more control over viewstate but unfortunately in 3.5 its not as easy.
The GridViews
You could wrap the GridViews in UpdatePanels. That's a 'cheap' way to add some interactivity to your pages although you won't be gaining anything in terms of performance.
It's also still possible to manipulate the Gridview using jQuery on the client-side. There a lots of tutorials, blog posts etc explaining how to do this on the Internet.
MVC with Webforms
Its also possible to mix ASP.Net MVC with Webforms in the same website. As it sounds like you are familiar weith MVC, you might want to consider this approach for any new pages. Here's a blog post explaining how to do this.
Update:
Here's a more recent article by Scott Hanselman on how to use MVC with an existing Webforms application.
I have read a few threads and look round the web but still haven't found a solution.
I want to validate a form using jquery but the way in which the asp.net page is built is different from examples round the web.
The whole page is wrapped in a from tag and not the actual individual form.
The only way I have found so far is to use this plugin http://bassistance.de/jquery-plugins/jquery-plugin-validation/ but to attached a click event rather than the prefer onsubmit. Is there way way to use onsubmit with .net controls?
Many thanks for any assistance.
C
I can't seem to get the jQuery.ajax() function posting back any of my asp.net generated form controls.
I've put a break point on the server side and there aren't any values.
Is there a way around this or do I have to build up a list of what I want sent back?
Another question slightly off topic, but it seems that although jQuery is a great JS library, it doesn't seem to integrate too well with .net.
Has anyone given up with jQuery to perform server side interaction and just gone with ms ajax implementation?
The reason for this is because asp.net webforms doesn't use a normal post (ie. with an input/submit button). if you take a look at how those are posted, there is some javascript handler that ends up calling a built-in function that asp.net writes out to the page called __doPostBack.
Check out this other stackoverflow answer that might give you additional clues:
Jquery asp.net Button Click Event via ajax
To your second question, once you work out a few of the kinks, jQuery is a fantastic lib that has a ton of support and reference material both on the web and in books. Keep at it and you won't regret it :-)
How do you implement autocomplete on ASP.Net Gridview? Can anyone point me where to go to achieve this? I'm willing to use non-.Net ajax controls if that what it takes.
You will need to utilise an AJAX framework (JQuery is one i often recommend) which will provide the functionality to display the drop down box. You will then need to create a separate page (or web service) to return all the possible values to display in the auto-complete drop down.
To save on performance i recommend only initiating the auto-complete once the user has typed in 2 or 3 letters. These can then be passed by the JavaScript to the backed to proivde values to show in the drop down list.
The back end can communicate with the JavaScript using either simple CSV, JSON, XML Web service etc. See http://www.pengoworks.com/workshop/jquery/autocomplete.htm for examples.
The AJAX Control Toolkit provides an autocomplete but requires a web service to work. You could always write your own asmx if there isn't one you can use.
Otherwise, there are all sorts of JS and jQuery examples:
http://www.javascript-examples.com/autocomplete-demo/
Scriptaculous has a nice autocomplete component. It is built on prototype.js.
I've used it to display an autocomplete list with formatted text and images etc. In that sense I think it is more flexible than the ASP.NET AJAX implementation.
Documentation http://wiki.github.com/madrobby/scriptaculous/ajax-autocompleter
Download http://script.aculo.us/downloads