在MVC 4中点击按钮,通过Ajax调用加载更多数据

时间:2015-10-29 09:38:36

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

我试图用一个按钮作为LoadMore在HRML表中显示6条记录。在每次加载时,单击它必须获取另外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>

2 个答案:

答案 0 :(得分:0)

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

[HttpGet]
    private 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>

答案 1 :(得分:0)

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

Load More Data