实现 jTable MVC 4

Question

我有关注

******控制器** *********

namespace DLM.Controllers{
public class BooksController : Controller
{

    private IRepositoryContainer _repository;
    //
    // GET: /Books/
    public ActionResult Index()
    {
        return View();
    }


    [HttpPost]
    public JsonResult ListBooks(int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null)
    {
        try
        {
            //Get data from database
            int bookCount = _repository.BookRepository.GetBooksCount();
            List<Books> book = _repository.BookRepository.GetBooks(jtStartIndex, jtPageSize, jtSorting);

            //Return result to jTable
            return Json(new { Result = "OK", Records = book, TotalRecordCount = bookCount });
        }
        catch (Exception ex)
        {
            return Json(new { Result = "ERROR", Message = ex.Message });
        }
    }

***** ListBooks 视图 ** **********

{
@Styles.Render("~/Scripts/jtable/jtable.2.3.0/themes/metro/darkgray/jtable.min.css") 
<script src="/Scripts/jtable/jtable.2.3.0/jquery.jtable.min.js" type="text/javascript"></script>

<div id="BookTableContainer"></div>


<script type="text/javascript">

    $(document).ready(function () {

        $('#BookTableContainer').jtable({
            title: 'The Student List',
            paging: true, //Enable paging
            pageSize: 10, //Set page size (default: 10)
            sorting: true, //Enable sorting
            defaultSorting: 'Book Title ASC', //Set default sorting
            actions: {
                listAction: '/Books/Index',
                deleteAction: '/Books/DeleteBook',
                updateAction: '/Books/UpdateBook',
                createAction: '/Books/AddBook'
            },
            fields: {
                BooksID: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                Code_No: {
                    title: 'Book Code',
                    width: '23%'
                },
                Title: {
                    title: 'Book Title',
                    list: false
                },
                Author: {
                    title: 'Author',

                    list: false
                },
                Page_No: {
                    title: 'Number of Pages',
                    width: '13%'

                },
                Y_of_P: {
                    title: 'Year of Publication',
                    width: '12%'

                },
                Language: {
                    title: 'Language',
                    width: '15%'

                },
                Subject: {
                    title: 'Subject',
                    list: false

                },

                Publisher: {
                    title: 'Publisher',

                    list: false
                },
                Keyword: {
                    title: 'Keywords',
                    type: 'textarea',
                    width: '12%',
                    sorting: false
                }

            }

        });

        //Load student list from server
        $('#BookTableContainer').jtable('load');
    });

</script>

}

问题 *****************

当我尝试访问/Books/ListBooks 有错误The resource cannot be found.

请帮帮我，我是 jTable 的新手，它的实现。

Answer 1

在 jtable listAction 中使用 ListBooks 动作而不是 Index 动作。索引操作将用于呈现视图，并且在 jquery 之后将从 ListBooks 加载数据

Answer 2

我认为您正在通过浏览器 URL 请求 /Books/Listbooks。浏览器默认使用 get 方法从服务器获取数据，并且您将 HttpPost DataAnnotation 置于该方法之上，这就是您收到错误的原因，因此如果您想要输出，请进行以下两项更改。

1)移除ListBooks方法的HttpPost数据注解。

2)在返回Json方法中添加JsonRequestBehavior.AllowGet如下

return Json(new { Result = "OK", Records = book, TotalRecordCount = bookCount }, JsonRequestBehavior.AllowGet)

现在您的方法将完美运行。