在jquery选项卡下按需加载usercontrols

Question

我在usercontrol上有几个jquery选项卡,在每个选项卡下加载一个单独的用户控件.每个用户控件都是唯一的.一切正常,但整体页面响应太慢.为了提高性能,我尝试按需在这些选项卡下加载少量用户控件(即单击选项卡).可能没有回帖...... ajaxish.谁能指导我？我试图按照本教程和这一个太多,但没有取得任何结果.我已附加父usercontrol的代码.

<ul id="tabs">
<li class="active">Rewards</li>
<li id="liCoupons">Coupons</li>
<li id="liLibrary">Library</li>
<li id="liProducts">Favorite</li>
<li id="liPreferences">Preferences</li></ul><ul id="tabPanes" class="rewardsTabs">
<li>
    <div class="wrapper active">
        <uc:Rewards ID="wellness" runat="server" />

    </div>
</li>
<li id="liCoupons">
    <div class="wrapper">
        <uc:Coupon runat="server" />
    </div>
</li><li id="liLibrary">
    <div class="wrapper">
        <uc:Library runat="server" />
    </div>
</li><li id="liProducts">
    <div class="wrapper">
        <uc:Products runat="server" />
    </div>
</li>
<li>
    <div class="wrapper">
        <div class="preferences">
            <uc:Preferences runat="server"/>
        </div>

    </div>
</li>

Answer 1

你提到的第二个链接应该有效.您无需在标记中定义任何用户控件.

<ul id="tabs">
    <li class="active">Rewards</li>
    <li id="liCoupons">Coupons</li>
    <li id="liLibrary">Library</li>
    <li id="liProducts">Favorite</li>
    <li id="liPreferences">Preferences</li>
</ul>
<div id="results" class="wrapper"></div>

每个标签点击都会进行ajax调用

$.ajax({
       type: "POST",
       url: "Default.aspx/WebMetodToCall", 
       data: data, // I wouldn't prefer passing webmethod name here
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (msg) {
           $('#result').html(msg.d);
       },
       failure: function (msg) 
           //error
       }
   });

到网络方法.

[WebMethod]
   public static string Rewards()
   {
       return RenderControl("~/controls/rewardsControl.ascx");
   }

[WebMethod]
   public static string Coupons()
   {
       return RenderControl("~/controls/couponsControl.ascx");
   }    
...

每种方法都只渲染请求的控件.同样在您的方法中,您可以根据需要保留或提取视图状态.渲染后,webmethod应该传回html字符串以注入占位符.

如果您尝试了这个并且一次成功渲染一个控件但仍然看到缓慢,那么在获取数据时会遇到一些后端问题.如果您的控件数据量很大,我建议您进行一些服务器端缓存.

希望这可以帮助.

Answer 2

您的用户控件是否依赖于后备和视图状态才能正常工作？使用AJAX获取要在选项卡中显示的用户控件HTML相对容易,但是然后在该控件上回发将整个数据发送到实际页面(可能没有加载用户控件).所以基本的纲要是

1. 使用隐藏变量或视图状态跟踪活动选项卡.
2. 在早期页面循环中基于活动选项卡加载用户控件.最好的选择是初始阶段(不是视图状态在这里不可用,所以你必须在隐藏变量中存储活动选项卡并通过Request.Forms集合访问它).
3. 为每个用户控件提供一个ID,它应该与tab到tab不同.ID对于加载视图状态非常重要.
4. 如果在切换选项卡时出现视图状态错误,那么您需要首先加载上一个选项卡的用户控件,然后再加载到页面的后一阶段(比如加载/预渲染),卸载它并为活动选项卡加载新的用户控件.
5. 您可以在每个选项卡窗格中使用占位符或面板控件将用户控件加载到正确的位置.
6. 不用说,在更改jquery选项卡时,您需要使用post-back脚本提交表单.每次回发后,您都需要有一个脚本来重新初始化选项卡并选择活动选项卡.
7. 为了获得更好的用户体验,请将整个内容放入UpdatePanel中.

Answer 3

也许使用指向下面定义的服务的锚点.例如,

<li><a href="...webservices/ControlServce.svc/Content?cType=Rewards" class="wrapper active"></a></li> 

/// <summary>
/// Service used by ajax for loading social media content
/// </summary>
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class ControlService
{
    /// <summary>
    /// Streams html content
    /// </summary>
    /// <param name="type">type of control</param>
    /// <returns>html stream of content</returns>
    [OperationContract]
    [WebGet(UriTemplate = "Content?cType={cType}")]
    public Stream GetContent(string cType)
    {
        var tw = new StringWriter();
        var writer = new Html32TextWriter(tw);

        var page = new Page();
        var control = page.LoadControl(cType);

        control.RenderControl(writer);

        writer.Close();

        var stream = new MemoryStream(Encoding.UTF8.GetBytes(tw.ToString()));

        WebOperationContext.Current.OutgoingResponse.ContentType = "text/html";
        WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "no-cache");
        return stream;
    }
}

Answer 4

您需要进行Ajax调用才能实现此目的.现在您可以选择调用AJAX:

1 - 通过SOAP Web服务调用(每个Web方法都需要ASP AjaxScriptManager引用).

2-通过WCF服务呼叫作为上一个答案.

3 - 通过休息服务致电.

4-通过Jquery ajax方法调用,但请求必须转到外部页面,如"Actions.aspx",因此当您调用方法时,HTTPRequest将进入Actions页面,然后它将在其响应中返回返回的数据. $.Ajax(url,data,action,successMethod); // this is the fastest way I tried them all.

以下是您应该做的事情:1-在更改选项卡上,通过使用上述选项中的相应Ajax调用方法调用您的方法.

成功方法中的2-使用返回的数据,但最好使用eval(数据)作为DataTime对象.

这里有一些例子解释了如何进行此调用:

var helper = {
callAjax: function(sentData, successFun) {
        jQuery.ajax({
            url: "/Actions.aspx",
            type: "Get",
            data: sentData,
            cache: true,
            dataType: "json",
            success: successFun
        });
    }
};

helper.callAjax('request=getCities&countryID=' + countryID, function (args) {
   var result = eval(args); // this object will contain the returned data
var htmlData = '';
    for (var i=0;i<result.length;i++){
    // write your HTML code by jQuery like this
    htmlData  += '<div>' +  result[i].title + '</div>';
}
$('#tab3').html(htmlData);
});

现在在Actions.ASPX代码中使用以下代码:

 protected void Page_Load(object sender, EventArgs e)
    {
        object _return = new
        {
            error = "",
            status = true
        };
        JavaScriptSerializer _serializer = new JavaScriptSerializer();
        if (!Page.IsPostBack)
        {
            string str = Request.QueryString["request"].ToString();
            switch (str.ToLower())
            {
case "getcities":
                    int countryID = Convert.ToInt32(Request.QueryString["countryID"].ToString());
                    _return = JQueryJson.Core.City.getAllCitiesByCountry(countryID).Select(_city => new
                    {
                        id = _city.ID,
                        title = _city.Name
                    });
                    _serializer = new JavaScriptSerializer();
                    Response.ClearContent();
                    Response.ClearHeaders();
                    Response.ContentType = "text/json";
                    Response.Write(_serializer.Serialize(_return));
                    break;
}
// etc........
}