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
Related
I have a specific page (sitecore content item) in my web application composed of a sitecore layout and many sublayouts. One of those sublayouts is a user control that I would like to have refreshed once a certain button is clicked. I would like only that sublayout to be refreshed and the rest of the page to remain unchanged (typical ajax situation here). How do I accomplish this with sitecore when all of my sitecore content items are directly related to a full page in my web application (layout with sublayouts)? In my case, I want to use ajax to return the content of a specific, single sublayout only. What is the best practice for this kind of ajax situation with sitecore? I'm using sitecore 6.5.
Since you use the phrase "partial page update", I assume you are using an UpdatePanel. This doesn't really function any different than it would in a traditional ASP.NET application. You will handle the button click in a server-side handler method, modify properties on controls and let the update panel handle the rest.
If you are not using update panel, you have a few options depending on exactly what you want to achieve.
Typically, if you are clicking a button to trigger an ajax request, you are posting some data back to the server. For this case you would usually set up a web service to process the data and return some result. Your service can access Sitecore data, but does not utilize the Sitecore presentation engine.
Another option would be to make the request to a Sitecore page (possibly the same as the original request), but include a querystring parameter to trigger a different device. You could configure this device to render JSON, XML or a fragment of HTML rather than the normal Layout and battery of sublayouts.
Another option would be to use the Sitecore Item Web API. If you go this route, you will have another array of options (and a bit of a learning curve as well). Start by reading the documentation on SDN or some of the many blog posts on the topic.
There are a number of options available for achieving asynchronous behavior. None of these really relate to Sitecore directly, however, there are some Sitecore specific things to watch out for which I have highlighted below.
UpdatePanel Control
If you are performing something trivial where ultra-fast performance isn't a concern, simply wrap your button (and any other .NET controls that you would
like updated) in an UpdatePanel Control. You will also need to drop
a ScriptManager control into your base layout near the top inside
the <form> element. NOTE: When using this method, you will need to ensure that that your Sublayout does NOT have caching enabled, otherwise your button will not postback properly
Create your own web service
In this scenario, there are many client-side frameworks available for achieving the same result. My preferred method is to hook onto the client-side button click event with jQuery, prepare a request object, and post it to the server (getting back the information you need to update the client).
Here are a number of web service options that work with Sitecore - allowing you to have access to the Sitecore.Context and all of the subsequent Sitecore APIs.
Create an empty ASPX Web Form that accepts parameters as query strings. In the Page_Load method, do some work with the parameters and write directly to the response using Response.Write(). A JavaScriptSerializer comes in handy for serializing to JSON, just be sure to set Response.ContentType = "text/javascript";
Create an ASMX Web Service and decorate your methods with [WebMethod] (or [WebMethod(EnableSession = true)] if you need access to Session data).
Use MVC Controllers (ex: ASP.NET Web Api) to create an API. I believe there are some issues to work around in Sitecore 6.5 as described here.
Since this is all contained within a single Sublayout, you could simply use a standard <asp:UpdatePanel> surrounding your button and the usercontrol. In the code-behind, you can then do whatever databinding / data retrieval necessary to update the content of the usercontrol.
Note, if the button was on a different sublayout to the one where the content needs to be updated, you can use the approach described in this question as long as both controls have their content within <asp:UpdatePanel>.
In answer to your other question:
What is the best practice for this kind of ajax situation with sitecore?
There's not really a Sitecore-specific best practice for this sort of thing. In this case, any approach which works for plain ASP.NET will also work with Sitecore. The approach I described above is probably the simplest and quickest to implement, but you could also do this via jQuery and ajax to call a web service to load updated content.
I know this question is quite basic but since there is lot of confusion what can be used and not from the HTML 5 tags i wanna know if i can use drag and drop feature of HTML5 in my asp application? There is no code yet, so sorry about that. Scenario is that there is a tree view with a list of details about students, if these details are stored in a table, i want to drag and drop their ids(only the text not the whole table or row) from the table to my select query. is it possible? i went through the following questions but didn't get a clear picture
ASP.net AJAX Drag/Drop? and Creating a drag and drop application in ASP.NET 3.5
Sure you can. ASP.NET is a backend product that generates HTML and sends it down to client browsers. The question of whether or not ASP.NET can generate HTML5 markup isn't as important as making sure that your audience will be using a browser that supports the features of HTML5 that you wish to implement in your app.
More to the point, however, is that 99% of the drag-and-drop implementations you'll find on the internet use a JavaScript framework (jQuery, YUI, AJAX Control Toolkit, etc). While ASP.NET might be the vehicle you use to deliver the javascript to the browser, it in-and-of-itself is not responsible for creating drag-and-drop application -- it is the javascript that creates the dynamic nature of the app in the browser.
Where ASP.NET gets involved is handling the updates/ajax requests that your client-side javascript app sends to it. Using your app as an example: dragging the student ID to your query would be done with javascript on the client, and the javascript would then send the query to your ASP.NET backend which would process the information and send the results back to your app in the browser (assuming it was a true ajax application).
Examples:
jQueryUI
YUI
you can use any valid HTML code inside the ASP.net code as well. finally ASP.net code will be converted into pure HTML. so you can use any valid html code. for more details on how to implement HTML5 drag and drop
Does anyone have, or could point me to, an example of using jQuery to page through an ASP.NET datagrid control?
I would like to page through a large set of data displayed by an ASP.NET DataGrid control however I would like to avoid a page refresh and hence want to use AJAX to get the new sets of data. I would also like to avoid the ASP.NET AJAX toolkit and would like to do it all using jQuery-AJAX. Thank you.
The DataGrid is a server side control that relies on postbacks. jQuery and AJAX are client side technologies. Write a AMSX or WCF service to serve up your data and consume it with jQuery. You can use jQuery templates to make things easier. Or wrap the DataGrid in an UpdatePanel and you will have the poor man's AJAX(sometimes called AJAH).
There may be a jQuery plugin to help with this.
Here's a nice article to get you started:
Easily build powerful client-side AJAX paging, using jQuery
Try using jGrid, it´s free, but there are commercial dotnet implementations available.
It´s quite powerfull,you can do almost everything with it. And loading your data is easy to. But, you have to forget the Idea of aspnet datagrid, unless you will use updatepanel(which is very stable and usefull and has nothing to do wiht asp net ajax toolkit)
I've always wondered what is the best way to add a new item to html-select in a website.
Yes, this may sound silly but it is a great problem from the usability perspective. I don't want the user to be taken to a new page every time they need to add new item to a html-select.
I like the way Google Reader and Gmail handle this problem in there "add folder" and "add label" functionality. I would like to mimic that but i have no clue how they did that.
I'm using jQuery, so any reference to plugins, code examples or tutorials are welcome.
I would like it to be as modular as possible so i can reuse it anywhere.
I'm using ASP.NET 3.5 web-forms, Microsoft Access 2003, jQuery, IIS 5 and Win XP Professional as web server.
Thanks.
there's a jquery select plugin that might help you with this. I've manipulated select lists client side and had no problem with subsequent form-submits but you'd need to do some experiments w asp.net
The standard technique of doing this is called ajax, which basically means replacing only parts of the page. JQuery ajax and maybe a tutorial should get you going.
A common mistake for this scenario is to add the item on client (using jQuery or plain javascript). It may look that it works until the next post-back. Unfortunately the Asp.NET post-back model does not allow to alter the controls contents on client side only. So basicaly there are two choices:
Use ajax (the simplest would be to
use an UpdatePanel)
Make a normal
postback to add the item (simple and
fast to code, if performance is not
an issue - for intranet applications
for example)
I am looking for an example of using ASP.net AJAX to show a 'live' filtering of a repeater control based on what is being typed into a textbox. I have seen stuff using the Web Client Software Factory but am more interested in something that doesn't require an additional library.
The asp.net ajax control toolkit has one here.
If you don't like that one, searching google for "Ajax Autocomplete" gives lots of decent looking results, unless I am mistaking what it is you want to do.
I think you're a little confused as to what AJAX entails. If you want the filtering to interface with the server control's datasource, then it would not by definition be AJAX.
Live filtering a databound control the way you want is ill-advised, I think. For each iteration you'd have to re-bind the control, which would create a tremendous amount of overhead.
You'll need to find a way to do this client-side, with javascript. It could simply hide items within the repeater-created markup as they are filtered out, although how exactly this would be accomplished depends entirely on what html you're generating with the repeater.