2016-09-20 4 views
2

Я пытаюсь реализовать простую сетку через вызов ajax. Когда я нажимаю кнопку submit на индексной странице, сетка должна отображаться, когда ключ отправляется через ajax-код. Но когда я перехожу на страницу 2, ключ становится нулевым, поскольку код снова переходит к контроллеру, и сетка не отображается. Главная страница:WebGrid paging не работает при вызове ajax

@{ 
    ViewBag.Title = "index"; 
} 

<h2>index</h2> 
<button id="btn" onclick="divFunction()" value="submit">Submit</button> 

<div id="gridcontainer"> 

</div> 

<script type="text/javascript"> 
    function divFunction() { 
     results(); 
    }; 
    function results() { 
     $("#gridcontainer").show(); 
     $.ajax(
     { 
      type: 'Post', 
      url: "@Url.Action("List","User")", 
      data: { key: "hello" }, 
      begin: function() { 
       $("#gridcontainer").hide(); 
      }, 
      success: function (data) { 
       $("#gridcontainer").show(); 
       $("#gridcontainer").html(data); 
      } 
     }); 
    } 
</script> 

Контроллер:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using System.ComponentModel; 
using System.Web.UI.HtmlControls; 
using WebApplication1.Models; 

namespace MVCSimpleWebgrid.Controllers 
{ 
    public class UserController : Controller 
    { 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult List(string key) 
     { 
      List<NumberModels> num = new List<NumberModels>(); 
      if (key == "hello") 
      { 
       //List<NumberModels> num = new List<NumberModels>(); 
       for (int n = 0; n < 10; n++) 
       { 
        NumberModels nu = new NumberModels(); 
        nu.index = n; 
        num.Add(nu); 
       } 
       return View(num); 
      } 
      else 
      { 
       return null; 
      } 
     } 
    } 
} 

WebGrid код:

@model IEnumerable<WebApplication1.Models.NumberModels> 
@{ 
    ViewBag.Title = "List"; 
    var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 5); 
    grid.Pager(WebGridPagerModes.All); 
} 

<style type="text/css"> 
    /*Here we will add css for style webgrid*/ 
    .webgrid-table { 
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
     font-size: 1.2em; 
     width: 100%; 
     display: table; 
     border-collapse: separate; 
     border: solid 1px #98BF21; 
     background-color: white; 
    } 
    .webgrid-table td, th { 
     border: 1px solid #98BF21; 
     padding: 3px 7px 2px; 
    } 

    .webgrid-header { 
     background-color: #A7C942; 
     color: #FFFFFF; 
     padding-bottom: 4px; 
     padding-top: 5px; 
     text-align: left; 
    } 

    .webgrid-footer { 
    } 

    .webgrid-row-style { 
     padding: 3px 7px 2px; 
    } 

    .webgrid-alternating-row { 
     background-color: #EAF2D3; 
     padding: 3px 7px 2px; 
    } 
</style> 

<div id="content"> 
    @grid.GetHtml(
     tableStyle: "webgrid-table", 
     headerStyle: "webgrid-header", 
     footerStyle: "webgrid-footer", 
     alternatingRowStyle: "webgrid-alternating-row", 
     rowStyle: "webgrid-row-style", 
     columns: grid.Columns(
      grid.Column(columnName:"index",header:"serial") 
    )) 
</div> 

ответ

Смежные вопросы