using ajax loading search data to existing data grid - ajax

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?

Answer 1

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.