I am looking to implement a live search in my MVC app similar to this site when you type in a question and results come up that are similar or like the search on http://www.krop.com/
I have the search code all working and results updated. I just need to know how to add the AJAX to the MVC framework (I know this site was built using it) so that when I type the results are updated.
I had this all working in normal ASP.NET Forms app.
what you need to do it attach to Jquery onchage event handler, and then call some ajax method of jquery ($.load , $.ajax etc...) and the information from a specified controller. asp.net mvc controller can return json results so you can later manipulate it in your javascript code.
if you have any other questions go ahead and ask.
An ASP.NET MVC site will have AJAX and JQuery available by default.
Mike Bosch's Blog can give you some pointers on this
Related
Let me first be clear about what I'm not asking. I can see that the native ASP.NET MVC Ajax.BeginForm does not handle posting files from within an AJAX form post. There are answers I've seen that seem to establish this fact, and to offer an assortment of workarounds via jQuery plugins, etc:
Ajax.BeginForm in MVC to upload files
File upload with ajax in asp.net mvc
I'm not asking whether it can't be done, and I'm not asking for a workaround. I'm hoping someone can explain why it can't be done.
How is the AJAX form post being handled in MVC such that file inputs do not post? I guess I had always assumed that it was being handled at a base level just like a full post, but with some javascript trimmings that prevented a full page reload. Apparently that's not the case. Is the form submitted via javascript something like jQuery's $('#form').submit()? What's happening under the covers?
Basically I just learnt AJAX yesterday and still learning. I have a project right now which requires me to write a Web Service method to search for shops. Everything is find but then again, I'm calling the web service using JSP, I would like to display the result using AJAX.
When I test my AJAX, it works when I integrate it with PHP file but may I know if it works for JSP kind of file? If so, is there any tutorial that show steps for me to learn?
If another case, if AJAX couldn't be perform using JSP, is there any other way for me to use AJAX with my Web Service?
Greeting to the community. This is my very first question.
I had in mind to add Livezilla live support in my MVC website, but I realised that there are some problems.
First of all, it is written in php and mysql, so is it possible to comply with MVC and sql server?
Does anybody know a similar solution (like livezilla) in my case?
PS. Excuse my poor english...
you could even look into using an iFrame to run livezilla inside of an mvc3 page if you wanted.
or, you could roll your own. if you wanted to try implementing a live response mvc3 page look into jquery and ajax asynchronous calls such as $.post and also look into the extension for controller AsyncController, and [AsyncTimeout(XXX)]. you will also have to read up on sending and receiving json objects in ajax and from a controller to the view.
Simple psuedo:
View:
setTimeOut calls a javascript function every X milliseconds
the javascript function uses json to wrap page data and pass it to the controller inside a $.post() call
Controller:
recieves page data as an model object in a post
determines if page is out of sync or not
returns relevant sync data in a json object back to the view
View:
the same javascript function receives the json object from controller
updates the page based on relevant sync data
Problem solved. I just uploaded the folder given from livezilla in the root folder of my website. Then the only need to met is to have a Mysql server to create the database for livezilla. After that php and mvc runs together with no problem.
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
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.
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.
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.
I am trying to convert my existing ASP.NET application to MVC 3 Razor. I use a lot of updatepanels, and I do conditional updates at the code behind using MyUpdatePanel.Update().
I am not finding this functionality with MVC 3. I can see a lot of blogposts talking about jQuery and how to use it to achieve the same, but I want to render other partialviews from my action conditionally. Is it possible to achieve it?
The way you'd work with Ajax in ASP.NET MVC is completely different from the ASP.NET way (i.e., Ajax toolkit with server-side controls such as UpdatePanel).
ASP.NET MVC is more basic and therefore more work. You handle Ajax calls on the client side using a library such as jQuery, and on the server side you implement a controller with Ajax methods.
Have a look at http://sweettam.blogspot.com/2011/06/aspnet-mvc-3-ajax-part-i.html.