在 jquery 选项卡下按需加载用户控件

Question

我在一个用户控件上有几个 jquery 选项卡，它们在每个选项卡下加载一个单独的用户控件。每个用户控件都是唯一的。现在一切正常，但整体页面响应太慢。为了提高性能，我尝试在这些选项卡下按需加载一些用户控件（即单击选项卡）。可能没有回邮... ajaxish。 谁能指导我？ 我也尝试遵循this 教程和this 之一，但没有任何成功。我附上了父用户控件的代码。

<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

您的用户控件是否依赖回发和视图状态才能正常工作？使用 AJAX 获取要在选项卡中显示的用户控件 HTML 将相对容易，但随后对该控件的回发会将整个数据发送到实际页面（可能未加载用户控件）。所以基本轮廓是

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

Answer 2

如果你用 jquery 稍微调整一下，这应该可以工作：
http://blogs.msdn.com/b/sburke/archive/2007/06/13/how-to-make-tab-control-panels-load-on-demand.aspx

或者您只使用 asp.net 选项卡。

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

你提到的second link 应该可以工作。您无需在标记中定义任何用户控件。

<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 字符串传回。

如果您尝试过此操作并成功地一次渲染一个控件，但仍然看到速度缓慢，那么您在获取数据时遇到了一些后端问题。如果您的控件数据量很大，我建议您进行一些服务器端缓存。

希望这会有所帮助。