0

这是我的行动方法

 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 方法，但它不起作用。有人可以帮我吗？

4

1 回答 1

0

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

在 Parttail 类中

//GridParttail.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来指定您的结果将出现在视图上的位置。

于 2012-10-02T11:42:04.500 回答