Atlas-使用无刷新的tab页

最近在写人力资源数据库，想使用TabStrip，即属性页。在网上搜索了一下，找到了这个http://blogs.vertigosoftware.com/alanl/archive/2006/08/14/Atlas_TabStrip.aspx
（上面有代码和效果演示）
http://blogs.vertigosoftware.com/files/alan/atlastabstrip2.zip 代码下载
做出来效果不错，因为是英文，并且有一点bug，我边翻译边指出问题。

注：他使用的是atlas版本比较早，现在下载下来的atlas可能代码稍稍不同，不影响使用和说名（如：他的代码<atlas:ScriptManager ID="ScriptManager1" ，现在新版本atlas是<asp:scriptmanager/></scriptmanager />

第一步：创建ScriptManager，直接拖过控件来，或者写代码
        <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
            <Scripts>
                <atlas:ScriptReference Path="scripts.js" />//脚本的路径
            </Scripts>
        </atlas:ScriptManager>

第二步：创建UpdatePanel，直接拖过控件来，或者写代码
<atlas:UpdatePanel ID="TabsUpdatePanel" runat="server" Mode="Conditional">
</atlas:UpdatePanel>

第三步：编辑内容模版
  <ContentTemplate>
                <div id="Tabs" runat="server">
                    <asp:LinkButton ID="FirstTab" CommandArgument="0" runat="server" Text="First Tab"
                        OnClick="Tab_Click" OnClientClick="selectTab(this)" />
                    <asp:LinkButton ID="SecondTab" CommandArgument="1" runat="server" Text="Second Tab"
                        OnClick="Tab_Click" OnClientClick="selectTab(this)" />
                    <asp:LinkButton ID="ThirdTab" CommandArgument="2" runat="server" Text="Third Tab"
                        OnClick="Tab_Click" OnClientClick="selectTab(this)" />
                    <asp:LinkButton ID="FourthTab" CommandArgument="3" runat="server" Text="Fourth Tab"
                        OnClick="Tab_Click" OnClientClick="selectTab(this)" />
                </div>
            </ContentTemplate>
Tab_Click是后台处理点击的函数。selectTab(this)" 是第一步中脚本中的函数，功能是改变tab表签的样式

第四步：创建UpdatePanel，直接拖过控件来，或者写代码

<atlas:UpdatePanel ID="TabsUpdatePane2" runat="server" Mode="Conditional">
</atlas:UpdatePanel>

第五步：使用MultiView，代码如下
          <ContentTemplate>
                <div class="tabpane">
                    <atlas:UpdateProgress ID="UpdateProgress1" runat="server">
                        <ProgressTemplate>
                            <div id="updateprogress">
                                loading...
                                <img src="loader.gif" />
                            </div>
                        </ProgressTemplate>
                    </atlas:UpdateProgress>
                    <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                        <asp:View ID="View1" runat="server">
                                若干文字！！
                        </asp:View>
                        <asp:View ID="View2" runat="server">
                                                      若干文字！！
                        </asp:View>
                        <asp:View ID="View3" runat="server">
若干文字！！
                        </asp:View>
                        <asp:View ID="View4" runat="server">
                            <h3>View 4</h3>
                        </asp:View>
                    </asp:MultiView>
                </div>
            </ContentTemplate>

第六步：写后台代码
   protected void Page_Load(object sender, EventArgs e)
    {
        //create server load time for update progress.
        //TODO: Remove! This is for testing purposes only.
        if (ScriptManager1.IsInPartialRenderingMode)
        {
            System.Threading.Thread.Sleep(400);//可以看到progress效果，就是个时间延迟
        }
    }

    protected void Tab_Click(object sender, EventArgs e)
    {
        LinkButton linkbutton = (LinkButton)sender;//传入被点击的linkbutton
        MultiView1.ActiveViewIndex = int.Parse(linkbutton.CommandArgument);//切换视图
        SetSelectedStyle(linkbutton);//改变视图样式
    }

    private void SetSelectedStyle(LinkButton selected)//改变视图样式
    {
        //clear the selected style for all the tabs
        foreach (Control control in Tabs.Controls)
        {
            if (control is LinkButton)
                ((LinkButton)control).Attributes.Remove("class");
        }
        selected.Attributes.Add("class", "selected");
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = ((Button)sender).ID + " clicked.  You've typed " + TextBox1.Text;
    }

ok!,属性页制作好了！下面说说缺点。

在使用master（母版）页面中会出现错误！我分析一下原因，避免各位劳费心神

first!。。第一步：javascript错误

function pageLoad(){
    selectTab($('FirstTab'));
}

function selectTab(sender){
    var tabsElement = $('Tabs');
    var childElement;
   
    //clear styles for exisiting tabs
    for (var i = 0; i < tabsElement.childNodes.length; i++){
        childElement = tabsElement.childNodes[i];
        if (childElement.id) {childElement.className = "";}
    }
    sender.className = "selected";
}
这是js代码，作用是当页面加载时默认讲第一个firsttab样式改成被选择的样式；当linkbutton被
点击时改变被点击linkbutton的样式。不过我们知道，如果使用母版页，所有内容中的控件名称
会进行前缀的变化，当然我们可是使用this.control.ClientID得到真实的ID名称，不过java功底太
浅，始终不能让selectTab正常工作！

来
我们来look look
    protected void Tab_Click(object sender, EventArgs e)
    {
        LinkButton linkbutton = (LinkButton)sender;//传入被点击的linkbutton
        MultiView1.ActiveViewIndex = int.Parse(linkbutton.CommandArgument);//切换视图
        SetSelectedStyle(linkbutton);//改变视图样式
    }
刚才说过这个是linkbuton响应点击的事件，很奇怪原作者在这里也写函数SetSelectedStyle功能和js中
一样，在母版中也不会出现问题。我们当然使用这个，而把js代码删掉。

这样tab页面在master中不会出现js错误了!,不过你肯定会发现，css中定义页面样式根本不起作用，
好假，好丑陋的tabSheet。

既然css不起作用，我们看看样式表怎么定义的,
/* Tabs */
div#Tabs a {
display:inline;
float:left;
position:relative;
width:100px;
margin:0;
margin-right: 10px;
padding:3px 3px 3px 5px;
background-color:#ece9d8;
border-right:solid 1px #000;
border-top:solid 1px #000;
border-left:solid 1px #000;
text-decoration:none;
font-weight:700;
color: #000;
}
div#Tabs a:hover {
text-decoration:none;
background-color:#fdfae9;
}
div#Tabs a.selected, div#Tabs a:active {
background-color:#FFF;
border-bottom: solid 1px #fff;
border-left: solid 1px #000;
z-index: 200;
}
.tabpane {
border:solid 1px #000;
clear:both;
overflow:auto;
position:relative;
width:588px;
height:300px;
top:-1px;
padding:10px 20px 10px 10px;
}
很明显，使用ID定义样式表在母版中行不通，为什么？没看我上面分析么。
解决办法把div#去掉,改称.Tab自己定义。ok!aspx中代码也需要修改！
  <ContentTemplate>
                <div id="Tabs" runat="server" class="tabs">
                    <asp:LinkButton ID="FirstTab" CommandArgument="0" runat="server" Text="First Tab"
                        OnClick="Tab_Click" />
                    <asp:LinkButton ID="SecondTab" CommandArgument="1" runat="server" Text="Second Tab"
                        OnClick="Tab_Click" />
                    <asp:LinkButton ID="ThirdTab" CommandArgument="2" runat="server" Text="Third Tab"
                        OnClick="Tab_Click" />
                    <asp:LinkButton ID="FourthTab" CommandArgument="3" runat="server" Text="Fourth Tab"
                        OnClick="Tab_Click" />
                </div>
            </ContentTemplate>
code中也要做修改
    protected void Page_Load(object sender, EventArgs e)
    {

        SetSelectedStyle(Firsttab);
        //create server load time for update progress.
        //TODO: Remove! This is for testing purposes only.
        if (ScriptManager1.IsInPartialRenderingMode)
        {
            System.Threading.Thread.Sleep(400);
        }
    }
至此谢幕！