Using asp.net mvc 3 + Razor with Ajax and jquery

Question

I'm trying to make the "Google Instant" like experience (I'm not looking for Auto-complete).

Google instant is the dynamically change the "search result" as you type (not the suggestions, which can be achieved with auto complete).

The page will simply have a text input control, in which as your type, you get result below the text input control.

I know, I must make some async calls on "onKeyPress": So first how can I do that in jquery?

Second, any good tutorials on combining asp.net MVC with Razor and Ajax?

edited: as people were confusing auto-complete with instant result

ysrb · Accepted Answer · 2011-10-30 11:01:09Z

1

The term that you should use is 'autocomplete'

Have a look at the link below:

http://docs.jquery.com/Plugins/autocomplete

It's server independant. Basically, on the server side, you must create a service, given a string return the possible values that relate to that string.

Hope this helps.

answered Oct 30, 2011 at 11:01

ysrb

6,7202 gold badges32 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raza Over a year ago

Thanks for answer, but I'm not looking for auto complete. What I'm looking is actually called "google instant" (at least by google), its updating of actual search result as I type I'm looking for. Second, for true mvc the view should only interact with the control, control can route the request to\get data from model (which might a service). Any idea about, I think a basic tutorial on how to make an ajax call in on some event and update the content of a section of the page is called I'm looking for.

Community · Accepted Answer · 2017-05-23 11:55:31Z

1

There is a great article here on how to create an instant search with Jquery, PHP and HTML

http://woorkup.com/2010/09/13/how-to-create-your-own-instant-search/

The one caveat I encountered was that you need to put the Javscript code inside a

$(document).ready(function(){ 
/*Your JS Instant Search goes here */
});

which wasn't clear from the article.

For ASP.NET MVC 3, create a controller/action that returns a JSON or JSONP object. If you're a beginner, this might trip you up as you will get CrossSiteJson errors. This link will help:

Ajax json post to Controller across domains, "not allowed by" Access-Control-Allow-Headers

From doing these two, I was able to do the instant search in MVC3 and it works really well. Using Firebug or WebKit Web Inspector and Fiddler really helps.

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Dec 19, 2011 at 20:02

khaihon

2351 gold badge4 silver badges13 bronze badges

Comments

Rob Kent · Accepted Answer · 2011-10-31 10:31:02Z

0

It is still a variant of autocomplete, if you break it down:

Fire autocomplete on key presses.
Fire Ajax search on autocomplete success/load (whatever the event might be).

Writing number 2 is minimal work for you unless somebody has written a plugin that does both. It's a nice little project - write a plugin that combines a text box and div and does autosearch.

answered Oct 31, 2011 at 10:31

Rob Kent

5,1934 gold badges37 silver badges54 bronze badges

Collectives™ on Stack Overflow

Using asp.net mvc 3 + Razor with Ajax and jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related