Question

我正在尝试使用jQuery和json创建带有分页的表，但是无法使用getJSON方法。 JavaScript函数GetPageData在页面加载时被调用，并被成功调用。我已经测试过在下面的代码中添加两条注释掉的行，并且可以看到getJSON方法内部的代码没有任何作用。

function GetPageData(pageNum, pageSize) {
    $("#tblData").empty();
    $("#paged").empty();
   // $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
    $.getJSON("/Retailers/GetPagedData", { pageNumber: pageNum, pageSize: pageSize }, function (response) {
     //   $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
        var rowData = "";
        for (var i = 0; i < response.Data.length; i++) {
            rowData = rowData + '<tr><td>' + response.Data[i].Name + '</td><td>' + response.Data[i].RetailerCode + '</td></tr>';
        }
        rowData = rowData + '<tr><td>Name</td><td>RetailerCode</td></tr>';
        $("#tblData").append(rowData);
        PagingTemplate(response.TotalPages, response.CurrentPage);
    });

下面是Index.cshtml视图，该视图位于“零售商”文件夹中。

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
@{
    ViewBag.Title = "Manage Retailers";
}
<p class="h2">Manage Retailers</p>
<br /><br />
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Retailer Name</th>
            <th>Retailer Code</th>
        </tr>
    </thead>
    <tbody id="tblData"></tbody>
</table>
<div id="paged"></div>

以下是RetailersController ...

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using CCM.Models;
using CCM.Helper;

namespace CCM.Controllers
{
    public class RetailersController : Controller
    {
        MCDevEntities context = new MCDevEntities();
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetPagedData(int pageNumber = 1, int pageSize = 20)
        {
            List<Retailer> listData = context.Retailers.ToList();
            var pagedData = Pagination.PagedResult(listData, pageNumber, pageSize);
            return Json(pagedData, JsonRequestBehavior.AllowGet);
        }
    }
}

我是否遗漏了任何明显的东西可能会阻止它工作？我也有一个包含PagedData.cs和Pagination.cs的Helper文件夹。页面URL是localhost：... /零售商/索引。

编辑。

如果有帮助，这里是其余的javascript：

$(document).ready(function () {
    //Initially load pagenumber=1, pagesize=20
    GetPageData(1, 20);
});

function PagingTemplate(totalPage, currentPage) {
    var template = "";
    var TotalPages = totalPage;
    var CurrentPage = currentPage;
    var PageNumberArray = Array();


    var countIncr = 1;
    for (var i = currentPage; i <= totalPage; i++) {
        PageNumberArray[0] = currentPage;
        if (totalPage != currentPage && PageNumberArray[countIncr - 1] != totalPage) {
            PageNumberArray[countIncr] = i + 1;
        }
        countIncr++;
    };
    PageNumberArray = PageNumberArray.slice(0, 5);
    var FirstPage = 1;
    var LastPage = totalPage;
    if (totalPage != currentPage) {
        var ForwardOne = currentPage + 1;
    }
    var BackwardOne = 1;
    if (currentPage > 1) {
        BackwardOne = currentPage - 1;
    }

    template = "<p>" + CurrentPage + " of " + TotalPages + " pages</p>"
    template = template + '<ul class="pager">' +
        '<li class="previous"><a href="#" onclick="GetPageData(' + FirstPage + ')"><i class="fa fa-fast-backward"></i>&nbsp;First</a></li>' +
        '<li><select ng-model="pageSize" id="selectedId"><option value="20" selected>20</option><option value="50">50</option><option value="100">100</option><option value="150">150</option></select> </li>' +
        '<li><a href="#" onclick="GetPageData(' + BackwardOne + ')"><i class="glyphicon glyphicon-backward"></i></a>';

    var numberingLoop = "";
    for (var i = 0; i < PageNumberArray.length; i++) {
        numberingLoop = numberingLoop + '<a class="page-number active" onclick="GetPageData(' + PageNumberArray[i] + ')" href="#">' + PageNumberArray[i] + ' &nbsp;&nbsp;</a>'
    }
    template = template + numberingLoop + '<a href="#" onclick="GetPageData(' + ForwardOne + ')" ><i class="glyphicon glyphicon-forward"></i></a></li>' +
        '<li class="next"><a href="#" onclick="GetPageData(' + LastPage + ')">Last&nbsp;<i class="fa fa-fast-forward"></i></a></li></ul>';
    $("#paged").append(template);
    $('#selectedId').change(function () {
        GetPageData(1, $(this).val());
    });
}

Answer 1

尝试使用以下代码

$.ajax({
            url: '/Retailers/GetPagedData',
            data: {
                pageNumber: pageNum,
                pageSize: pageSize
            },
            success: function (response) {
                //code
            }
        });

Answer 2

尝试一下并检查：

    $.ajax({
        url: '@Url.Action("GetPagedData", "Retailers")',
        data: {pageNumber : pageNum,
            pageSize: pageSize 
        },
        success: function (response) {
             console.log(response);
            //   $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
            var rowData = "";
            for (var i = 0; i < response.Data.length; i++) {
                rowData = rowData + '<tr><td>' + response.Data[i].Name + '</td><td>' + response.Data[i].RetailerCode + '</td></tr>';
            }
            rowData = rowData + '<tr><td>Name</td><td>RetailerCode</td></tr>';
            $("#tblData").append(rowData);
            PagingTemplate(response.TotalPages, response.CurrentPage);
        }
    });

jQuery getJSON方法未调用

2 个答案: