用ajax加載搜索數據，以現有的數據網格

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> 

我用網格爲代表的數據 我想要得到的搜索結果exixting無需刷新頁面網格，submiting搜索按鈕後（按名稱搜索）

這是我用AJAX方法，但它不是working.Can人helpme？

Answer 1

你應該使用@ Ajax.BeginForm將更新網格而無需刷新頁面。創建網格的部分類，這樣你會得到它在服務器端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其指定你的結果會出現在視圖。