Question

我正在尝试通过ajax调用实现简单的网格。当我点击索引页面上的提交时，应该显示一个网格，因为密钥是通过ajax代码发送的。但是当我转到第2页时，密钥变为空，因为代码再次进入控制器并且不显示网格。索引页面：

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

Answer 1

在ajax加载中使用..... GET 请求刷新网格而不是 POST

Below URL helped me to solve this issue

当有ajax调用时，WebGrid分页无法正常工作

1 个答案: