按需加载Ajax选项卡

Question

I have three tabs. I want load then on demand except first tab. If i click the 2nd tab it will load the second tab. My problem is If i load 2nd tab and go to 3rd tab and when i come back to the 2nd tab it is loading again. That should not happen. once the tab is loaded it should not load again. How to achieve this? here is my sample code....

<cc1:TabContainer ID="tabEditTskContainer" OnActiveTabChanged="tabEditTskContainer_TabChanged"
OnClientActiveTabChanged="tabChanged" AutoPostBack="true" runat="server" Height="300px"
Width="100%" ActiveTabIndex="0">
<cc1:TabPanel runat="server" ID="tabEditTskPnl" Enabled="true" HeaderText="Current Balance History"
    Width="99%">
    <HeaderTemplate>
        Edit Task
    </HeaderTemplate>
    <ContentTemplate>
        <br />
    </ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="tabAttach" runat="server" Height="100%" Enabled="true" Width="99%">
    <HeaderTemplate>
        Attachments
    </HeaderTemplate>
    <ContentTemplate>
    </ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="tabAddNotes" Height="100%" runat="server" Enabled="true" Width="99%">
    <HeaderTemplate>
        Notes
    </HeaderTemplate>
    <ContentTemplate>
    </ContentTemplate>
</cc1:TabPanel>

<input type="hidden" runat="server" id="hdnTabAttach" />
        <input type="hidden" runat="server" id="hdntabAddNotes" />


function tabChanged(sender, args) {
        var tabIndex = sender.get_activeTabIndex();
        if (tabIndex == "1") {
            if (document.getElementById('hdnTabAttach').value == "0") {
                return true;
            }
            else
                return false;
        }
    }


protected void tabEditTskContainer_TabChanged(object sender, EventArgs e)
{
    try
    {
        int intTabIndex = tabEditTskContainer.ActiveTabIndex;

        if (intTabIndex == 1 && hdnTabAttach.Value != "1")
        {
            hdnTabAttach.Value = "1";
        }

        if (intTabIndex == 2)
        {

            DBLayer obj = new DBLayer();
            SqlCommand cmd = new SqlCommand();
            SqlParameter param = new SqlParameter("@fOrderID", SqlDbType.NVarChar, 255);
            param.Value = Session["selorderID"].ToString();
            param.Direction = ParameterDirection.Input;
            cmd.Parameters.Add(param);
            param = new SqlParameter("@fncatid", SqlDbType.NVarChar, 25);
            param.Value = "1";
            param.Direction = ParameterDirection.Input;
            cmd.Parameters.Add(param);
            DataSet dsGetNotes = obj.ExecuteDatasetSql("[usp_GetNotes]", cmd);
            Session["GvNotes"] = dsGetNotes;
            gvNotes.DataSource = dsGetNotes;
            gvNotes.DataBind();

        }

    }
    catch (Exception ex)
    {

    }

}

Answer 1

Quick and easy -- add a hidden form field to your aspx page and append on the tab name to its value. Then, before you actually load a tab, make sure that value isn't included in the hidden form fields value.

I believe this should work, but the problem is that you are using the built-in ajax stuff from .Net, which I find difficult to work around. Normally, client-side, I'd make a global variable that tells me what tabs have been loaded, and only load a tab if it hadn't been done before, otherwise, I'd just show the already loaded tab.