Load more data through Ajax call on button click in MVC 4

Question

I am trying to show 6 record in a HRML table with a button as LoadMore. On every load more click it has to fetch another 6 record. I tried as follows

In Controller

[HttpGet]
private JsonResult GetTweetData(int count)
{
    try
    {
        using (var context = new DbContext())
        {
            var countData = context.ObjTwitterDatas.Count();
            var count1 = 6 * count; // as default is 0 it will give 0-6 record
            var query = context.ObjTwitterDatas.Where(x => x.TwitterDataId >= count1 && x.TwitterDataId <= countData).Take(6);
            var dataContainer3 = query.ToList();
            return Json(dataContainer3, JsonRequestBehavior.AllowGet);
        }
    }
    catch (Exception e)
    {
       return Json(new { success = false, ex = e.Message }, JsonRequestBehavior.AllowGet);
    }
}

Ajax call in ready method

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetTweetData" ,"Home")',
            contentType: "application/json; charset=utf-8",
            data: { count: 0}, // The count should be dynamic on load more to ferch next 6 record on button click
            dataType: "json",
            success: function (data) {
               if(data.length>0){
                    //Appending Data in Table
                }
                else{
                    alert('No More Records to Load')
                }
            },
            error: function () {
                alert("Error");
            }
        });
    });
     $('#Btn-More').on("click", function () {
         // Calling same method to fetch but not able to make properly to get more 6 record eg. 7-12
    });
</script>

Answer 1

I tried the following code and It worked for me

[HttpGet]
    public JsonResult GetTweetData(int count)
    {
        try
        {
            using (var context = new DbContext())
            {
                var count = context.ObjTwitterDatas.Count();
                var countData = count - (6 * tweetcount); //it will exclude the previous 6 records

                var dataContainer = dtls.Where(x => x.TwitterDataId <= countData && x.TwitterDataId >= 1).OrderByDescending(x => x.TwitterDataId);
                var dataContainer2 = dataContainer.Take(6).ToList();
                return Json(dataContainer2, JsonRequestBehavior.AllowGet);
            }
        }
        catch (Exception e)
        {
           return Json(new { success = false, ex = e.Message }, JsonRequestBehavior.AllowGet);
        }
    }

Ajax call in ready method

<script type="text/javascript">
 var countTweet = 0;
    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetTweetData" ,"Home")',
            contentType: "application/json; charset=utf-8",
            data: { count: countTweet },
            dataType: "json",
            success: function (data) {
               if(data.length>0){
                    countTweet = countTweet + 1; // This will exclude the previous 6 records
                    //Appending Data in Table
                }
                else{
                    alert('No More Records to Load')
                }
            },
            error: function () {
                alert("Error");
            }
        });
    });
     $('#Btn-More').on("click", function () {
         // Calling same method to fetch but not able to make properly to get more 6 record eg. 7-12
    });
</script>

Answer 2

I found solution from here. It is based on mvc and uses partial view to load more data.

Load More Data