search using Ajax form in MVC2 implementation example

Here i will give you an example of how to perform search, display result using Ajax form in Asp.net MVC2. You may find this very useful in your realtime application devepoment in MVC 2

In this example i have used one view page and two usercontrol, the way i have implemented you should be able to use it direcly in any place of you application, wherever search action needs to be performed.

User control 1 ( named "SearchClient.ascx" ).
this will have a ajax form with a search text box and a submit button, so lets look at the code.

<   %@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl" % >
 <   script language="javascript" type="text/javascript">
     function searchValidate() {
         $get("dvResult").innerHTML = "Searching...";
         $get("btnSearch").disabled = true;
     }
     function searchSuccess(ajaxContext) {
         $get("dvResult").innerHTML = " successfully";
         $get("btnSearch").disabled = false;
     }
     function searchFaliure(ajaxContext) {
          $get("dvResult").innerHTML = "Search fail.";
         $get("btnSearch").disabled = false;
     }
    < /script>
    < div style="padding: 4px;">
        <  % using (Ajax.BeginForm("SearchClients",
               new AjaxOptions
               {
                   //Url = "SearchClients",
                   UpdateTargetId = "dvClients",
                   InsertionMode = InsertionMode.Replace,
                   OnBegin = "searchValidate",
                   OnSuccess = "searchSuccess",
                   OnFailure = "searchFaliure",
                   Confirm = "You sure you want to perform this search?",
                   HttpMethod = "Post"
               }))
           {%>
        < %= Html.TextBox("Search")% >
        < input type="submit" value="Search" id="btnSearch" />
       
        < div id="dvResult" >
        < /div>
        < %} %>
    < /div>

Now we see the controller implementation
        [ HttpPost ]
        [ AcceptVerbs(HttpVerbs.Post) ]
        public ActionResult SearchClients(FormCollection cols)
        {
           
            string searchText = cols["Search"] as string;
           
            List list = ClientService.SearchContacts(searchText);
            ViewData["SearchResult"] = list;
            ViewData["Message"] = string.Format("We performed search for \"{0}\", and found {1} results. ", searchText, list.Count);
            return PartialView("SearchClients", list);
        }

here i am not explaining how the database call is made, i am assuming you are familier with that part.

Now we see the second usercontrol (name "SearchClients.ascx" ) where we implement the search result, so lets look at how the result to be displayed.

<    %@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %  >
<  %@ Import Namespace="ETG.CRM2.MVC.Models" %  >
<  %@ Import Namespace=" ETG.CRM.Data" %  >
<  div id="dvResult"  >
    <  div style="padding: 2px; background-color: #feffd5;"  >
        <  %=ViewData["Message"]%  ><  /div  >
    <  table  >
        <  %foreach (tbContact c in (List<  tbContact  >)ViewData["SearchResult"])
          {%  >
        <  tr  >
           
            <  td  >
                <  %: c.OrgName%  >
            <  /td  >
            <  td  >
                <  %: c.OrgType%  >
            <  /td  >
            <  td  >
                <  %: c.Email%  >
            <  /td  >
            <  td  >
                <  %: c.ConcernPerson%  >
            <  /td  >
            <  td  >
                <  %: c.Phone%  >
            <  /td  >
           
        <  /tr  >
        <  %}%  >
    <  /table  >
<  /div  >
Now we need to have one page where we can render the first usercontrol. So you can create a simple mvc page and inside the content place the following line of code.
 
 < div style="padding:8px;" >
        < % Html.RenderPartial("SearchClient"); % >
    < /div >

We are done! make sure you have implemented the database call properly, ( in this example i have not mentioned that. ) then you should be able to use this search functionality from any place of the application.