Asp. NET imitation Sina Weibo dropdown load more data Waterfall Flow effect _ practical tips

Nothing to do, thinking about writing something. Seemingly page drop load data, waterfall flow effect is very hot, each website can see a variety of display effect, the principle is similar. As a result, decided to write their own writing this effect, I hope to give more than my vegetables rookie a little reference value.
Before you begin, tell me the basics of implementation. When the night down to the bottom of the time, JS can determine the position of the scroll bar, to reach the bottom trigger JS method, the implementation of jquery Ajax method, to the background of the general processing program Night ASHX file request data source, get JSON format data source. Then, iterate through the JSON data source, stitching an LI tag, and then filling it up on the page.
First, let's make a simple HTML page. The page needs to introduce the jquery library, and then use the jquery Ajax method to request the background program, that is, the General Processing program page. Later, I will write the method in the General Processing program page ASHX file, return the news list data source that the front page needs. The format of the data source, the JSON format I used.

<! DOCTYPE html>  

Next, we'll create the database, connect the database, and read the data. This is too much trouble and I'm going to use the custom list data to do the demo. I usually used to create an entity class for each table in the database, which insinuate the database tables, fields. Here we create a Newsinfo entity class, which is the class in model inside the usual three-tier architecture program. At the same time, we customize some data to him, this as our data source. Under the real development environment, this is all in the Dal inside to connect the database, read the data. I just use it as a demo, I hope you understand. I defined a method with a parameter named GETLISTBYPN in the entity class. This parameter int type of PN parameter, you can understand the number of times you drop the page. For example, when you first pull to the bottom of the page, this parameter is 1, then we read the first n data, when you pull down to the bottom of the page the second time, this parameter is 2, then we read the nth to 2N between the n data, this is the principle of paging the stored procedure. In this way, I returned a list of types that are newsinfo, which is the data source we pass to the front-end page.

Using System;
Using System.Collections.Generic;
Using System.Linq;
 
Using System.Web; <summary>///newsinfo Summary description///</summary> public class Newsinfo {public Newsinfo () {///
  TODO: Add constructor logic//} public int Num {get; set;
 
  public string Ntitle {get; set;} <summary>///get data based on page number///</summary>///<param name= "pn" ></param>///&LT;RETURNS&G t;</returns> public static list<newsinfo> getlistbypn (int pn) {list<newsinfo> newlist = new Lis
    T<newsinfo> ();
    Newlist.add (new Newsinfo {Num = 0, Ntitle = "Hua mi technology announces 35 million dollar B-round financing valuation over 300 million USD"}); Newlist.add (new Newsinfo {Num = 1, Ntitle = "Obsolete captcha!
    Google push Improved version captcha verification "}); Newlist.add (new Newsinfo {Num = 2, Ntitle = "How can a friend circle be so hated?"
    Buy fakes also brush screen "});
    Newlist.add (new Newsinfo {Num = 3, Ntitle = "The future trend of social news aggregation website"});
    Newlist.add (new Newsinfo {Num = 4, Ntitle = "Lei June will drop 1 billion dollars for cloud computing in the next 3-5 Years"}); Newlist.add (new Newsinfo {Num = 5, Ntitle = "Oculus CEO: How I Met Zuckerberg"});
    Newlist.add (new Newsinfo {Num = 6, Ntitle = "actual combat: An introduction to the financing process of the stock-raising Industry"});
    Newlist.add (new Newsinfo {Num = 7, Ntitle = "Financial fan invited to join the Zhongguancun internet Financial Industry Association"}); Newlist.add (new Newsinfo {Num = 8, Ntitle = "The wool of the Peer-to-peer platform" can you continue to masturbate?
    Addicted to Injury "});
    Newlist.add (new Newsinfo {Num = 9, Ntitle = "U.S. Deputy secretary of State: The United States are all victims of cyber attacks"});
    Newlist.add (new Newsinfo {Num = ten, Ntitle = "Google will push the children's version of YouTube and the Chrome Browser"});
    Newlist.add (new Newsinfo {Num = one, Ntitle = "Goldman" free "for Uber taxi financing hundreds of millions of dollars"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Observation: Alipay A-share listed also need to walk a few threshold"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Youku potato Liu Dele: Multi-screen integration extends audiovisual industry"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Goldman" free "for Uber taxi financing hundreds of millions of dollars"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Interested in the installment of the 100 million U.S. dollars C-round financing of the white-collar crowd"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Youku potato Liu Dele: Multi-screen integration extends audiovisual industry"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "The future trend of social news aggregation website"}); Newlist.add (new Newsinfo {Num = Ntitle= "Every day NET Chairman Ching: Beauty Makeup Platform also has the market Space"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Hundred car bao Xu Xiaoping auto field investment First"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "U.S. Deputy Secretary of State: Beauty is the victim of cyber attack"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "The video website continues to exert the hardware box is still the fragrant pastry"});
    Newlist.add (new Newsinfo {Num = Ntitle = "Google launches network robot recognition Tool Recaptchas"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Financial fan invited to join the Zhongguancun internet Financial Industry Association"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Jiangnan style" video playback scale: Google forced to upgrade "});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Observation: Alipay A-share listed also need to walk a few threshold"});
    Newlist.add (new Newsinfo {num =, Ntitle = "The next week to the United States listed on Alibaba counter attack micro-letter"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "The same way to kill the cattle to upgrade: Donkey mother halfway together with cattle"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "The Internet age more to respect the original and Dream"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Pre-Skype employee launches mobile instant messaging Application Wire"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Inventory: 2014 Q3 US major Internet Enterprise earnings Summary"}); Newlist.add (new Newsinfo {Num =, Ntitle = "Inventory: WestA review of party social media and social capital Research "});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Mo will be in the IPO at the same time to Alibaba and 58 with the city to issue new Shares"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "from the O2O closed loop to the promotion of the general public comments mobile Advertising Innovation"});
    Newlist.add (new Newsinfo {Num = Ntitle = "The Foshan luxury car collided with Maserati on the flower base Porsche"});
    Newlist.add (new Newsinfo {Num = km, Ntitle = "FAW Mazda efficient maintenance service to enhance brand value"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "FAW Volkswagen post-suspension fracture event continuous case information Collection"});
    Newlist.add (new Newsinfo {Num = Notoginseng, Ntitle = "Residents spontaneous organization" car tube will "protect rights and interests to resolve parking difficulties"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Power vehicle: Enhanced charging Facility entry threshold"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Hu Runhao vehicle report is not yet ripe for Chinese car Culture"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "725 quick-teng owners to sue FAW Volkswagen manufacturers to hold a pocket communication Meeting"}); Newlist.add (new Newsinfo {Num = Ntitle = "Tesla Pk BYD who is the big winner of the new energy car?"
    " });
    Newlist.add (new Newsinfo {Num =, Ntitle = "Shenzhen Honda Fit enjoy 3,000 discount to send 5000 gift package"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Country Release electric vehicle qualification: Who will stand on the" Tuyere "}); Newlist.add (new Newsinfo {Num = Ntitle = "TeslaCan we break the development dilemma of Chinese electric vehicle?
    " });
    Newlist.add (new Newsinfo {Num =, Ntitle = "People's Daily express their opinions: Why does the tram not plug in the Electricity"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Comments:" Parking lot chaos "The disadvantages of Multiple Management"});
    Newlist.add (new Newsinfo {Num = $, Ntitle = "Current events illustrated: parking fees to whom"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Comment: Parking charges are not just about to become a mystery"}); Newlist.add (new Newsinfo {Num =, Ntitle = "comments:" Huge parking fees "where exactly?)
    " });
    Newlist.add (new Newsinfo {Num =, Ntitle = "Faw recalls part of Pentium B50 sedan"});
    Newlist.add (new Newsinfo {Num = Wuyi, Ntitle = "Our country imports the average monthly 110,000 SUV is the absolute main vehicle model"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "MPV 50% growth eye-catching household trend to pull commercial vehicle enterprises across the boundary"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Buick will push the All-new convertible model or name \" Velite\ "});
    Newlist.add (new Newsinfo {Num = Wu, Ntitle = "[Shenzhen] this Tian Feng fan comprehensive discount 26,000 yuan is sufficient"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Insiders: Car dealers will not sacrifice dealer benefits"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "November Dealer Inventory index again High"}); Newlist.add (new Newsinfo {Num =, Ntitle = "whole-car enterprise hand-held car rental company whole industry chain cooperation mining consumption growth."" });
    Newlist.add (new Newsinfo {Num = Ntitle = "Car tips: Extend the life of the car 10 coup"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Warm winter care continuation of Changhe car warm Legend"}); Newlist.add (new Newsinfo {Num =, Ntitle = "Why does the landlord and the Industry committee have a grudge"?
    Legal supervision Deposit Blank "});
    Newlist.add (new Newsinfo {Num = Ntitle = "Financial Court interview: Interest rate cut positive real estate price still Bullish"});
    Newlist.add (new Newsinfo {Num = Ntitle = "Wang Zhengyi at the 2014 China Ocean Economic Exposition Forum);
    Newlist.add (new Newsinfo {Num =, Ntitle = "floor homogenization requires industry to work together"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Real estate permanent property rights become a reality after the 9 big guess, you Understand"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Shimao Media line: Shimao is how to be good at the villa to achieve the ultimate"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "comments: Small waist Huge loss is the pay for you and Me"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Housing permanent property rights" triggered a hot discussion "old house" but more box-office);
    Newlist.add (new Newsinfo {Num =, Ntitle = "Why cannot water be poured on electrical fire"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "Jia Kang: Real estate tax legislation will meet substantive arrangements"});
    Newlist.add (new Newsinfo {Num =, Ntitle = "bus reducing traffic to clarify rumors more to read the popular" "Great Wall Commentary"});Newlist.add (new Newsinfo {Num =, Ntitle = "comments: Who solve the" lighting engineering painting Building "amorous feelings?
 
    " }); ienumerable<newsinfo> query = from N in newlist where (n.num >= * pn && N.num < ten * (PN + 1)) SE
    Lect N;  List<newsinfo> listquery = (from N in NewList where (n.num >=-pn && N.num < ten * (PN + 1)) Select N).
    ToList ();
  return listquery;
 }
}

    Now we have the data source, but we haven't returned the data source to the front-end page yet. How do you get back? This is done using a generic handler, which is a file with a suffix named ashx. Next, we create a new generic handler page. In which to receive the front-end page passed over the parameter PN, is just said the number of times you drop the page. The list data source is then deserialized into a JSON string and returned to the front-end page. Here we need to define a way to deserialize the list structure's data into a JSON-formatted string. This method, I also found in Baidu. Also, when I return the data source to the front page, the thread pauses for 5 seconds. Because the amount of data is less, a second does not need to be able to load the 10 data, but you do not write this pause, this is to say to some "copy party", you understand, ignore it.
   

<%@ WebHandler language= "C #" class= "Handler"%> using System;
Using System.Web;
Using System.Collections.Generic;
Using System.Threading;
Using System.Runtime.Serialization.Json;
Using System.IO;
 
Using System.Text; public class Handler:ihttphandler {public void ProcessRequest (HttpContext context) {context.
    Response.ContentType = "Text/plain";
    int pn = 0; if (context. request.querystring["Pagenum"]!= null) {if (context). request.querystring["Pagenum"]. ToString (). Trim ()!= string. Empty) {if (int. TryParse (context. request.querystring["Pagenum"]. ToString (). Trim (), out PN)) {pn = Int. Parse (context. request.querystring["Pagenum"]. ToString ().
        Trim ());
    }} list<newsinfo> Listquery = NEWSINFO.GETLISTBYPN (PN);
    String Resultjson = "[{\ num\": -1,\ "ntitle\": \ "temporarily no data \"}];
    if (Listquery.count > 1) {Resultjson = obj2json<list<newsinfo>> (listquery); } thread.sleep(5000)//Because the amount of data is relatively small, here the thread pauses for 5 seconds, so that the page appears the effect of data loading wait context.
  Response.Write (Resultjson); ///<summary>///list goto json///</summary>///<typeparam name= "T" ></typeparam>///
  <param name= "T" ></param>///<returns></returns> public static string obj2json<t> (t)
      {try {DataContractJsonSerializer serializer = new DataContractJsonSerializer (T.gettype ()); using (MemoryStream ms = new MemoryStream ()) {serializer.
        WriteObject (MS, T); Return Encoding.UTF8.GetString (Ms.
      ToArray ());
    catch {return null;
    } public bool IsReusable {get {false;
 }
  }
}

That's what the code is, and now it's going to take a look at the page.

Well, the effect of this simple pull-down load of more data is done. Although there is no such tall Sina Weibo, but basically can cope with the day-to-day needs of the effect. The most important thing is that, through this, let everyone understand the rationale.

The above is the entire content of this article, I hope you can understand, for everyone to help.