Question

这是我的行动方法

 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>

我使用网格表示数据在提交搜索按钮（按名称搜索）

之后，我希望在没有刷新页面的情况下获取搜索结果以解析网格

这是我使用的ajax方法，但它不起作用。任何人都可以帮忙吗？

Answer 1

你应该使用@ Ajax.BeginForm它将更新您的网格而不刷新页面。为Grid创建一个局部类，以便在服务器端获得 RenderHtmlString 。

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

现在修改了您的视图

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

}

注意：代替使用Html.BeginForm使用Ajax.BeginForm。在你的情况下，你没有将文本框绑定到模型，这样你就可以在 formCollection

中获得它的价值

在控制器

中

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

        }

在AjaxOption中我提到了操作方法 POST ，您必须通过 UpdateTargetId ，它指定结果在视图中的显示位置。

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

1 个答案: