Click here to Skip to main content
15,889,859 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I try to search content based on ajax. i successfully build search function on button click.
Now i want to show search result when typing in search textbox.

My Action Method under ProjectManager Controller

C#
public ActionResult SearchAjax(string SearchKey )
        {
            ProjectUtility OProjectUtility = new ProjectUtility();
            IEnumerable<Project> obj = ProjectUtility.SearchByKey(Request.Url.Segments[3].ToString());
           
            return Json(obj);
        }


my search function
XML
public IEnumerable<Project> SearchByKey(string SearchKey)
       {
           var context = new MountSinaiEntities1();

           var matches = from m in context.Project
                         where m.projectName.Contains(SearchKey)
                         select m;

           return matches;
       }



my java script code
JavaScript
function Search() {                
              var GetURL = location.protocol + "//" + location.host + "/ProjectUtility/SearchAjax";

                $.ajax({
                    cache: false,
                    type: "POST",
                    async: false,
                    url: GetURL,
                    dataType: "json",
                    success: function (Projects) {
                        //What to do here
                    }
                });
            }


Search TextBox
HTML
<input type="text" id="inputForm" name="txtSearch"  placeholder="Search"   önkeyup="Search()" /> 




Code to bind WebGrid
C#
var grid = new WebGrid(Model, defaultSort: "projectName", rowsPerPage: 10, canPage: true, canSort: true, ajaxUpdateContainerId: "Grid");
Posted
Updated 31-Oct-13 0:00am
v2
Comments
IpsitaMishra 31-Oct-13 6:00am    
Do you mean to create a autocomplete textbox?
Vi(ky 31-Oct-13 6:04am    
yes but the result should be shown in webgrid.
Akinmade Bond 31-Oct-13 6:04am    
You are looking for an autocomplete textbox... Search the web for that.
Vi(ky 31-Oct-13 6:08am    
Not search the web i just want to filter webgrid
IpsitaMishra 31-Oct-13 6:09am    
Are you looking to bind the Grid on every keystock in the textbox.

1 solution

This are just my suggestions :)
1)If you go by your current approach where you return a json object to the UI, you might need a UIGrid such as (JqGrid,Jquery Table Grid) else you can also write to create your own grid which can consume the json.
2) Another approach, You can achieve this with the following steps.
   a) Put the web grid in a separate view
   b) Your main CsHtml should contain the textbox, ajax call.
   c) Modify your searchAjax method to return the model instead of the json. something like 
      // return view( "MyWebGridView" , model);
   d) in your main csHtml create a div with an ID.
   e) Now in the $.ajax success method you will receive the view(containing web grid) in html mode.
   f) Now all you have to do is, bind the html content to your div.
      // $('#ID').html(result);
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900