使用ajax将搜索数据加载到现有数据网格

这是我的行动方法

 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());
            }
        }

这是我的看法

@{         

   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>

@{
var grid=新的WebGrid（来源：模型，
defaultSort:“用户名”，
行页面：15，ajaxUpdateContainerId:“网格”）；
}
@使用（Html.BeginForm（））
{
@if（Request.IsAuthenticated&&HttpContext.Current.User.IsInRole（“管理员”））
{
@ActionLink（“新建”、“创建”）
}

按名称查找：

@grid.GetHtml(
表样式：“网格”，
头型：“头”，
alternatingRowStyle:“alt”，
列：grid.columns(
grid.Column（“用户名”，格式：（item）=>item.FirstName+“”+item.LastName），
网格列（“EmployeeType.Type”、“Employee Type”），
网格列（标题：“操作”，格式：（项）=>
ActionLink（“Details”，“Details”，new{id=item.id}））
)
) 
}

我使用web网格表示数据 我想在提交搜索按钮（按名称搜索）后，在不刷新页面的情况下将搜索结果发送到exixting grid

---

这是我使用的ajax方法，但它不起作用。有人能帮我吗？

您应该使用@ajax.begin，它将在不刷新页面的情况下更新网格。为网格创建一个分部类，以便在服务器端获得它的RenderHtmlString

课堂上

//GridPartail.cshtml @模型

@{         

   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>

正如在AjaxOption中一样，我提到了action methodPOST，您必须通过UpdateTargetId，它指定了结果在视图中的显示位置

@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>

}

[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 );
            }

        }