使用ajax或jquery進行部分頁面加載

Question

我正在視頻門戶網站上工作，我幾乎完成了工作，但是我遇到了一些性能問題，即加載頁面的全部內容需要花費很多時間。

我想立即加載頁面標題並使用ajax加載剩余內容，這是指向我的網站的實時鏈接。 在此處輸入鏈接說明

這是我用來加載頁面的代碼

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();
        }
    }

實際上，我在中繼器綁定之前加載頁面的頁眉，並且中繼器應該在ajax調用中進行綁定。

Answer 1

我想你想要這個代碼。

但我認為您必須使用加載圖像。 （此代碼不包含）

並且您必須使用for語句作為中繼器數量。

因為您的數據加載速度非常慢。

.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;
}