Ti tip d liu kiu Facebook vi jQuery AJAX trong ASP.

Net v SQL server

Cc bn khi vo Facebook xem ni dung v ko thanh scroll bar ca trnh duyt xung y mn hnh th d liu tip theo s t ng load tip, l ch ti thy nhiu bn cn nhng cha thc hin c. Trong bi vit ny ti s hng dn bn s dng jQuery AJAX trong ASP.Net. Chng ta s s dng Jquery kt hp Ajax thc hin chc nng ny. Minh ha bi vit ny l d liu cha nh nh trong demo, Gi s ti c bng d liu (nh) TB_Photo vi 2 trng l ID, Title, PotoPath. Trc tin chng ta s vit Store Procedure thc hin vic truy vn d liu theo trang
CREATE PROCEDURE TB_Photo_Getscroll bar @PageIndex INT, @PageSize INT, @PageCount INT OUTPUT AS BEGIN SET NOCOUNT ON; DECLARE @Tolal int, @CateID INT --Tnh tng s bn ghi d liu c SELECT @Tolal=Count(*) FROM TB_Photo -- Tnh tng s trang SET @PageCount = CEILING(CAST(@Tolal AS DECIMAL(10, 2)) / CAST(@PageSize AS DECIMAL(10, 2))) Begin WITH s AS ( SELECT ROW_NUMBER() OVER(ORDER BY id desc) As RowNum, Title, otoPath FROM TB_Photo ) Select * From s Where RowNum Between (@PageIndex - 1)*@PageSize+1 AND @PageIndex*@PageSize END END

Trong trang (Default.aspx) asp.net ta s dng Repeater hin th d liu nh sau.

<div id="dvcontext"> <asp:Repeater ID="rptPhoto" runat="server"> <ItemTemplate> <ul> <li> <h2> <span class="tieude"> <%# Eval("Title")%></span></h2> </div>

</li> <li><span class="noidung"> <%# Eval("PotoPath")%> </span> <br /> </li> </ul> <div class="dotdot"> </div> </ItemTemplate> </asp:Repeater> </div> <img id="loader" class="loading" alt="" src="/images/bigLoader.gif" style="display: none" />

Trong code C# ta vit cc hm sau:

protected void Page_Load(object sender, EventArgs e) { rptPhoto.DataSource = GetPhotoData(1); rptPhoto.DataBind(); } public static DataSet GetPhotoData(int pageIndex) { string query = "[hmclip_vn_TB_Cuoi]"; SqlCommand cmd = new SqlCommand(query); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@PageIndex", pageIndex); cmd.Parameters.AddWithValue("@PageSize", 10); cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output; return GetData(cmd); } private static DataSet GetData(SqlCommand cmd) { string strConnString = @"Data Source=.\SQL2005;Initial Catalog=DB_Name;User ID=dbuser;Password=***"; using (SqlConnection con = new SqlConnection(strConnString)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.Connection = con; sda.SelectCommand = cmd; using (DataSet ds = new DataSet()) { sda.Fill(ds, "Photo"); DataTable dt = new DataTable("PageCount"); dt.Columns.Add("PageCount"); dt.Rows.Add(); dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value; ds.Tables.Add(dt); return ds; } } } }

[WebMethod] public static string GetPhoto_Services(int pageIndex) { return GetPhotoData(pageIndex).GetXml(); }

Bn cn s dng cc th vin sau nh:

using using using using using using using using using using using using System; System.Configuration; System.Data; System.Linq; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; System.Web.Services; System.Data.SqlClient;

Trong code trn bn ch c hm GetPhoto_Service mt Webservice v ti vit lun trong default.aspx.cs. Gi ta s vit code jquery json thc hin. Code c vit nh sau
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> var pageIndex = 1; var pageCount; $(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) { GetRecords(); } }); function GetRecords() { pageIndex++; if (pageIndex == 2 || pageIndex <= pageCount) { $("#loader").show(); $.ajax({ type: "POST", url: "Default.aspx/GetPhoto_Services", data: '{pageIndex: ' + pageIndex + '}', contentType: "application/json; charset=utf-8", dataType: "json", success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); } } function OnSuccess(response) {

var xmlDoc = $.parseXML(response.d); var xml = $(xmlDoc); pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text()); var customers = xml.find("Customers"); customers.each(function () { var customer = $(this); var table = $("#dvcontext ul").eq(0).clone(true); $(".tieude", table).html(customer.find("Title").text()); $(".noidung", table).html(customer.find("PotoPath").text()); $("#dvcontext").append(table).append("<br />"); }); $("#loader").hide(); } </script>

Bn ch on
$(window).scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) { GetRecords(); } });

S kim tra thanh scroll bar ca trnh duyt trm y mn hnh chng ta s gi hm GetRecords(); do ta cn vit hm ny bng jquery json load d liu. Hm ny s gi hm GetPhoto_Services nh ti ni trn, Hm ny bn khng nht thit phi vit Default.aspx.cs, nu vit file khc bn cn ch ng ng dn cho n nh. Nu bn cha r vic dng jquery gi v thc thi mt hm trong C# bn c th tham kho bi vit Hng dn s dng jquery gi v thc thi mt hm trong C#