using ajax loading search data to existing data grid

Question

this is my action method

 public ViewResult Index(string firstName)
        {
            // get the list of employees according to the user name
            if (firstName == null)
            {
                return View((from e in db.Employees
                             where e.IsActive == true
                             select e).ToList());
            }
            else
            {
                return View((from e in db.Employees
                             where e.IsActive == true && e.FirstName.Contains(firstName )
                             select e).ToList());
            }
        }

This is my view

@{         

   var grid = new WebGrid(source: Model,
                defaultSort: "UserName",
                rowsPerPage: 15, ajaxUpdateContainerId: "grid"); 
}
@using (Html.BeginForm())
{
   <div class="btn_align">
        @if (Request.IsAuthenticated && HttpContext.Current.User.IsInRole("Administrator"))
        {
            <h2>@Html.ActionLink("Create New", "Create")</h2>
        }
   </div>

   <div class="btn_align">
        <p>
            Find by name:<input class="inputStyle_S" id="firstName" name="firstName" type="text" value="" data-autocomplete= "@Url.Action("QuickSearchFirstName", "ApplyLeave")" />  
            <input type="submit"  id="txtSearch" value="Search"  class="btn"/>
        </p>
   </div>

    <div id="grid">
        @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                 grid.Column("User Name", format: (item) => item.FirstName + ' ' + item.LastName),     
                        grid.Column("EmployeeType.Type", "Employee Type"),
                        grid.Column(header: "Action", format: (item) =>
                             Html.ActionLink("Details", "Details", new { id = item.id}))
            )
        ) 
    </div>
}
</div>
<div class="leaveChart_bottom"></div>

I used web grid for representing data I want get search results to exixting grid without refreshing page , after submiting search button (Search by name)

this is the ajax method I used ,but its not working.Can anyone helpme?

score 0 · Answer 1 · answered Oct 02 '12 at 11:42

you should use @Ajax.BeginForm it will update your grid without refreshing the page. create a partial class for Grid so that you will get it's RenderHtmlString at server side.

In PartailClass

//GridPartail.cshtml @model SomeModel

@{         

   var grid = new WebGrid(source: SomeModel,
                defaultSort: "UserName",
                rowsPerPage: 15, ajaxUpdateContainerId: "grid"); 
}
<div id="grid">
        @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                 grid.Column("User Name", format: (item) => item.FirstName + ' ' + item.LastName),     
                        grid.Column("EmployeeType.Type", "Employee Type"),
                        grid.Column(header: "Action", format: (item) =>
                             Html.ActionLink("Details", "Details", new { id = item.id}))
            )
        ) 
    </div>

now modified your View

@using (@Ajax.BeginForm("Index", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "gridResult" }))
{

<div class="btn_align">
        @if (Request.IsAuthenticated && HttpContext.Current.User.IsInRole("Administrator"))
        {
            <h2>@Html.ActionLink("Create New", "Create")</h2>
        }
   </div>

   <div class="btn_align">
        <p>
            Find by name:<input class="inputStyle_S" id="firstName" name="firstName" type="text" value="" data-autocomplete= "@Url.Action("QuickSearchFirstName", "ApplyLeave")" />  
            <input type="submit"  id="txtSearch" value="Search"  class="btn"/>
        </p>
   </div>

   <div id="gridResult">
      @html.Partail("GridPartail",Model)
   </div>

}

NOTE: instead of using Html.BeginForm use Ajax.BeginForm.in your case you have not bind text box to model so that you will get it's value in formCollection

In Controller

[HttpPost]
public ActionResult Index(formCollection coll)
        {
            string firstName = coll["firstName"];
            // get the list of employees according to the user name
            if (firstName == null)
            {
               var result = from e in db.Employees
                             where e.IsActive == true
                             select e).ToList();

                return PartailView("GridPartail",result );
            }
            else
            {
                //"GridPartail.cshtml" is partial viewName
                var result = (from e in db.Employees
                             where e.IsActive == true && e.FirstName.Contains(firstName )
                             select e).ToList();
                return View("GridPartail",result );
            }

        }

as in AjaxOption i have mention action method POST and you must be pass UpdateTargetId which specify where your result will appear on the view.

using ajax loading search data to existing data grid

1 Answers1