如何在使用jQuery滚动时从数据库加载数据 [英] How to Load Data From Database While Scrolling Using jQuery

问题描述

嗨
我正在使用Mvc，现在我需要在mvc3中使用jQuery滚动时从数据库创建加载数据，所以您能帮我完成这项工作吗?


在这里我创建了我的模型
============================

Hi
I am Working on Mvc Now I need to Create Load Data From Database While Scrolling Using jQuery in mvc3 so could u plz help me to do this work


here I had created My Models
==============================

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace BugTracker.Models
{
    public class ScrollDataModel
    {
        public List<scrolldatamodel> GetData{get;set;}
        public int ID { get; set; }
        public string Data { get; set; }
    }
}

================================================== ====

现在，我已经创建了(控件)以便在查看页面"中显示数据 ================================================== ================


使用系统；
使用System.Collections.Generic;
使用System.Linq;
使用System.Web;
使用System.Web.Mvc;
使用System.Data;
使用System.Data.SqlClient;
使用BugTracker.Models;
使用System.Web.Services;
使用System.Collections.Generic;
使用System.Web.Script.Services;
使用System.Text;
使用System.Web.UI.WebControls;
使用System.Web.UI.HtmlControls;

命名空间BugTracker.Controllers
{
公共类ScrollController:控制器
{
//
//GET:/Scroll/
静态int RecordCount = 0，FirstCount = 0;
公共ActionResult Index()
{

//init.InnerHtml = GetData();
var Scrolling = GetData();
return View(Scrolling);
}

[WebMethod]
公共列表< scrolldatamodel> GetData()

{

SqlDataAdapter da;
DataTable dt;
var modellist = new List< scrolldatamodel>();
RecordCount = RecordCount + 10;
字符串strConnectionString = @集成安全性= SSPI；持久安全性信息= False；初始目录= BugtrackerNew；数据源= SSDEV5-HP \ SQLEXPRESS";
SqlConnection con =新的SqlConnection(strConnectionString);
字符串Sql ="SELECT ID，数据从(SELECT ROW_NUMBER()OVER(按ID排序)AS行，ID，数据从ScrollTable)作为WHERE行在" + FirstCount +和" + RecordCount +之间";
FirstCount = RecordCount;
StringBuilder sb = new StringBuilder();
dt = new DataTable();
da =新的SqlDataAdapter(Sql，con);
con.Open();
da.Fill(dt);
DataView dv = dt.DefaultView;

foreach(dv中的DataRowView行)
{
var model = new ScrollDataModel();


model.ID = Convert.ToInt16(row ["ID"]);
model.Data = row ["Data"].ToString();
modellist.Add(model);
}
con.Close();
返回模型列表；
}
}
}
================================================== ==============

这是我的查看页面
================================================== =============
< head id ="Head1" runat ="server">
< title>索引</title>
< script src ="../../Scripts/jquery-1.7.2.min.js" type ="text/javascript"></script>
< script src ="../../Scripts/LoadOnScroll.js" type ="text/javascript"></script>

<％-< script src ="../../Scripts/jquery-1.4.1.js" type ="text/javascript"></script>-％>
< script type ="text/javascript">
$(document).ready(function(){
函数InfiniteScroll(){
$(''#divPostsLoader'').html(''< img src ="../../Content/DropDownMenus/images/loader.gif"/>''));

//向服务器端发送查询以呈现新内容
$ .ajax({
类型:"POST"，
网址:"Index.aspx/GetData"，
数据:"{}"，
contentType:"application/json; charset = utf-8"，
dataType:"json"，
成功:函数(数据){
if(data！="){
$(''.divLoadData:last'').after(data.d);
}
$(''#divPostsLoader'').empty();
}
})
};
//向下滚动时，滚动条位于底部，并且具有下面的函数，并触发lastPostFunc函数
$(window).scroll(function(){
if($(window).scrollTop()== $(document).height()-$(window).height()){
InfiniteScroll();
}
});
});
</script>
</head>
< body>

======================================================

Now I had created ( Controlers ) for display data in to View Page
==================================================================


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Data;
using System.Data.SqlClient;
using BugTracker.Models;
using System.Web.Services;
using System.Collections.Generic;
using System.Web.Script.Services;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace BugTracker.Controllers
{
public class ScrollController : Controller
{
//
// GET: /Scroll/
static int RecordCount = 0, FirstCount = 0;
public ActionResult Index()
{

// init.InnerHtml = GetData();
var Scrolling = GetData();
return View(Scrolling);
}

[WebMethod]
public List<scrolldatamodel> GetData()

{

SqlDataAdapter da;
DataTable dt;
var modellist =new List<scrolldatamodel>();
RecordCount = RecordCount + 10;
string strConnectionString = @"Integrated Security=SSPI;Persist Security Info=False;Initial Catalog=BugtrackerNew;Data Source=SSDEV5-HP\SQLEXPRESS";
SqlConnection con = new SqlConnection(strConnectionString);
string Sql = "SELECT ID, Data FROM (SELECT ROW_NUMBER() OVER (ORDER BY ID) AS row, ID,Data FROM ScrollTable ) AS a WHERE row BETWEEN "+FirstCount+" AND "+RecordCount+"" ;
FirstCount = RecordCount;
StringBuilder sb = new StringBuilder();
dt = new DataTable();
da = new SqlDataAdapter(Sql, con);
con.Open();
da.Fill(dt);
DataView dv = dt.DefaultView;

foreach (DataRowView row in dv)
{
var model = new ScrollDataModel();


model.ID =Convert.ToInt16( row["ID"]);
model.Data = row["Data"].ToString();
modellist.Add(model);
}
con.Close();
return modellist;
}
}
}
=================================================================

this is my view page
================================================================
<head id="Head1" runat="server">
<title>Index</title>
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/LoadOnScroll.js" type="text/javascript"></script>

<%-- <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>--%>
<script type="text/javascript">
$(document).ready(function () {
function InfiniteScroll() {
$(''#divPostsLoader'').html(''<img src="../../Content/DropDownMenus/images/loader.gif" />'');

//send a query to server side to present new content
$.ajax({
type: "POST",
url: "Index.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data != "") {
$(''.divLoadData:last'').after(data.d);
}
$(''#divPostsLoader'').empty();
}
})
};
//When scroll down, the scroller is at the bottom with the function below and fire the lastPostFunc function
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
InfiniteScroll();
}
});
});
</script>
</head>
<body>

< div id ="init" runat ="server">

<div id="init" runat="server">

<％foreach(模型中的变量项){％>

<％:item.ID％> <％:item.Data％>

<%foreach (var item in Model){ %>

<%:item.ID%><%:item.Data%>

</body>
</html>
================================================== ==
当我执行此代码时，它很有趣，但是当对其进行乱写时，即使以前的数据也没有加载，也没有出现
你能帮我做这个工作吗?


在此先感谢

</body>
</html>
====================================================
when i am excuted this code it is exicuting but when scriolling down it not loading even previous data also no appearing
could u Plz Help me to do this work


Thank In Advance

推荐答案

(document).ready(function(){
函数InfiniteScroll(){

(document).ready(function () {
function InfiniteScroll() {

(``#divPostsLoader'').html(''< img src ="../../Content/DropDownMenus/images /loader.gif"/>'');

//向服务器端发送查询以呈现新内容

(''#divPostsLoader'').html(''<img src="../../Content/DropDownMenus/images/loader.gif" />'');

//send a query to server side to present new content

.ajax({
类型:"POST"，
网址:"Index.aspx/GetData"，
数据:"{}"，
contentType:"application/json; charset = utf-8"，
dataType:"json"，
成功:函数(数据){
if(data！="){

.ajax({
type: "POST",
url: "Index.aspx/GetData",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data != "") {

这篇关于如何在使用jQuery滚动时从数据库加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！