Partial page loading using ajax or jquery

Question

I am working on a video portal website, I have completed it almost, but I have some performance issues, ie it takes to much time to load the whole content of the page.

I want to load the header of page immediately and load remaining content using ajax, here is live link to my website. enter link description here

Here is code that I am using to load the page

public partial class Index : System.Web.UI.Page
    {
        PlayListBLL _playList = new PlayListBLL();

        protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (!IsPostBack)
                {
                    bindRepeaters();
                }
            }
            catch (Exception) { }
        }

        private void bindRepeaters() //get news of all categoeries.
        {
            rp_top_story.DataSource = _playList.GetData(_playList._topStory).Take(8);
            rp_top_story.DataBind();

            rp_national.DataSource = _playList.GetData(_playList._national).Take(8);
            rp_national.DataBind();

            rp_sports.DataSource = _playList.GetData(_playList._sports).Take(8);
            rp_sports.DataBind();

            rp_entertainment.DataSource = _playList.GetData(_playList._entertainment).Take(8);
            rp_entertainment.DataBind();

            rp_international.DataSource = _playList.GetData(_playList._international).Take(8);
            rp_international.DataBind();

            rp_science_technology.DataSource = _playList.GetData(_playList._scienceTechnology).Take(8);
            rp_science_technology.DataBind();

            rp_smash_hit.DataSource = _playList.GetData(_playList._smashHits).Take(8);
            rp_smash_hit.DataBind();

            rp_food_life_style.DataSource = _playList.GetData(_playList._foodLifeStyle).Take(8);
            rp_food_life_style.DataBind();

            rp_capital_eye.DataSource = _playList.GetData(_playList._capitalEye).Take(8);
            rp_capital_eye.DataBind();
        }
    }

Actually I load header of the page before repeater binding, and repeater should be binds on ajax call.

Answer 1

i think you want this code.

but i think you must use loading image. ( this code dose not contains )

and you must use for statement as many as your repeater count.

because your data loading speed is very slow.

.aspx

$.ajax({
    type: "POST",
    url: "/Default.aspx/RequestControlString",
    data: { },
    contentType: "application/json; charset=utf-8",
    dataType : "json",
    success: function (data) {
        $("div").append(decodeURIComponent(data.d));
    }
});

.cs

[System.Web.Services.WebMethod]
public static string RequestControlString()
{
    TextWriter stringWriter = new StringWriter();
    HtmlTextWriter htmlWriter = new HtmlTextWriter(stringWriter);
    var dt = new List<string>() { "1", "2", "3", "4" };
    var gridview = new GridView() { DataSource = dt };
    // you can replace this grid to usercontrol or repeater. 
    // i recommend usercontrol.
    // because you have a style.
    gridview.DataBind();
    gridview.RenderControl(htmlWriter);
    string html = stringWriter.ToString();
    return html;
}