Umbraco Ajax load more

Question

Please can anyone help me . I am trying to use Ajax for to load more calendar event thats coming from my umbraco backend . from this code below

my calendar

i don't know how to do this but i want to make an Ajax call such that on click of the load More button .. i send to my controller to retrieve the model instead instead of the foreach statement above and then do something with the model retrieved by

[HttpPost]
    public ActionResult LoadEvent(int number)
    {
        var model = Umbraco.Content(1121).eventDetails;

        return model;
    }

My SmartController is located inside App_Code folder . Below is the Ajax am working on

 $(document).ready(function (e) {

    $(".buttonListener").click(function () {

            //  e.preventDefault();
            $.ajax(
            {

                url: "/SmartController/SmartSurface",        //"/SmartCalendar",
                data : {number: 1},
                success: function (data) {
                    alert(data);
                },
                error: function () {
                    alert("Ka pow!");
                }
            });
            return true;
    });
});

Please help me somebody ....

Answer 1

i solved this by loading all the events into table that has a tr . I hid the TR via javascript

  $(".eventtables, .eventmonth").hide(); 

and i show each one with

            $(".Cal_loadmorediv").slice(0,2).show();

That solved it . so it shows the first two onclick of the loadmore button