实现jTable MVC 4

时间:2013-08-23 08:22:00

标签: asp.net-mvc-4 jquery-jtable

我有以下

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

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查看 ** * ** * ** * *** < / p>

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

}

ISSUE * ** * ** * * * * ** * ****

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

请帮助我,我是jTable的新手,并且正在实施。

2 个答案:

答案 0 :(得分:1)

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

之后

答案 1 :(得分:0)

我认为您是通过浏览器网址请求/图书/列表簿。默认情况下,浏览器使用get方法从服务器获取数据,并将HttpPost DataAnnotation放在方法上,这就是为什么你会收到错误所以如果你想要输出会有两个更改。

1)删除ListBooks方法的HttpPost数据注释。

2)在Json方法中添加JsonRequestBehavior.AllowGet,如下所示

返回Json(new {Result =“OK”,Records = book,TotalRecordCount = bookCount},JsonRequestBehavior.AllowGet)

现在你的方法将完美运作。