asp.net mvc 无刷新加载
1、视图(index)
1 <!--start--> 2 <div data-am-widget="list_news" class="am-list-news am-list-news-default"> 3 <!--列表标题--> 4 <div class="am-list-news-bd"> 5 <ul class="am-list" id="NewsList"> 6 @{ Html.RenderPartial("PartialNews", Model);} 7 </ul> 8 </div> 9 </div> 10 <button type="button" class="am-btn am-btn-primary am-btn-block" pageindex="1" onclick="LoadData(this,'/News/Index?Id=@ViewBag.Id', 'NewsList')">加载更多</button> 11 <button class="am-btn am-btn-default" style="display: none"><i class="am-icon-spinner am-icon-spin"></i>加载中</button> 12 <!--end-->
2、对应的部分视图(PartialNews)
1 @foreach (var item in Model) 2 { 3 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-left"> 4 <div class="am-u-sm-4 am-list-thumb"> 5 6 <a href="/Mobile/News/Detail/@item.ID" class=""> 7 <img src="@(item.Image??"/Images/defaultnew.png")" alt="@item.Title" /> 8 </a> 9 </div> 10 <div class=" am-u-sm-8 am-list-main"> 11 <h3 class="am-list-item-hd"> 12 <a href="/Mobile/News/Detail/@item.ID" class="text_block">@item.Title</a> 13 </h3> 14 <div class="am-list-item-text">@item.CreateDate</div> 15 <div class="am-list-item-text">@item.MinDes.RemoveHTMLTags()</div> 16 </div> 17 </li> 18 }
3、js函数
1 <script> 2 function LoadData(o, u, p) { 3 $(o).hide().next().show(); 4 var pageindex = parseInt($(o).attr("pageindex")); 5 pageindex++; 6 $(o).attr("pageindex", pageindex); 7 if (u.indexOf('?') < 0) { 8 u = u + "?from=data" 9 } 10 $.get(u + "&pageindex=" + pageindex, function (data) { 11 if (data == "") { 12 $(o).attr("pageindex", parseInt($(o).attr("pageindex")) - 1) 13 $(o).show().next().hide() 14 $(o).html("没有更多了!"); 15 $(o).removeAttr("onclick"); 16 } else { 17 $(data).appendTo($("#" + p)); 18 $(o).show().next().hide() 19 } 20 }); 21 } 22 </script>