implementing jTable MVC 4

Question

I have following

****** controller ***********

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 View ************

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

When I am trying to access /Books/ListBooks There is an error The resource cannot be found.

Please help me out i am new to jTable and it's implementation.

Answer 1

I think you are requesting /Books/Listbooks through browser URL. Browser by default uses get method to get data from server and you putted HttpPost DataAnnotation over the method thats why you are getting error so if you want output makes following two changes.

1)Remove HttpPost Data Annotation of ListBooks Method.

2)Add JsonRequestBehavior.AllowGet in return Json method as follows

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

Now Your method will work Perfectly.

Answer 2

Use ListBooks action instead of Index action in jtable listAction. Index action will be used to render the view and after the jquery will load the data from ListBooks