通过 Ajax 调用 MVC 4 中的按钮单击加载更多数据

Question

我正在尝试在 HRML table 中显示 6 条记录，其中有一个按钮作为 LoadMore。在每次加载更多点击时，它必须获取另外 6 条记录。我尝试如下

在控制器中

[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调用就绪方法

<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

我尝试了以下代码，它对我有用

[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调用就绪方法

<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

我从这里找到了解决方案。 它基于mvc，使用局部视图来加载更多数据。

Load More Data