1

我的老板想使用 Telerik，而我是新手，所以仍在尝试解决。我本质上想做的是：

  • 在页面加载期间，仅加载最少的数据
  • 有一个导航选项卡。
  • 单击选项卡时，调用特定于该选项卡的存储过程。应该进行部分回发，以便仅加载相关数据。

我可以在没有 Telerik 的情况下使用 ASP:UpdatePanels 和无序列表的 ASP:Buttons 来完成此操作。我似乎无法弄清楚如何使用 Telerik (Telerik UI for ASP.NET)

我想我需要将 RadAjaxManager 与 RadTabStrip 结合起来（注意：在 ViewPages 中，我嵌套了另一个 RadTabStrip 来查看每个导航栏项目的当前/过去数据。我不确定这是否会使事情复杂化。）

所以我的主要问题基本上是如何做到这一点，以便“在导航选项卡上单击，调用特定函数”。

这是我正在使用的一些示例代码：

阿贾克斯： 

<telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" Skin="MetroTouch">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" EnablePageHeadUpdate="true"  EnableAJAX="true">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadTabStripAccount">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadTabStripAccount" ></telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="RadMultiPageAccount" LoadingPanelID="LoadingPanel1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

我可以在没有 AJAX 的情况下完成以下工作。所有数据将立即加载，您可以在选项卡之间无缝单击。但是，我只想一次加载一个选项卡的信息，并且仅在选择不同的选项卡时才检索新数据。

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <div class="demo-container no-bg size-narrow">
            <div class="demo-content" style="width: 900px;">
                <telerik:RadTabStrip runat="server" ID="RadTabStripAccount" Orientation="VerticalLeft" AutoPostBack="false" 
                    SelectedIndex="0" MultiPageID="RadMultiPageAccount" Style="display: inline-block;
                    float: left; margin-right: 2em;" Skin="Default">
                    <Tabs>
                        <telerik:RadTab Text="Registration Applications"   Style="margin-top: 4em;"   >
                        </telerik:RadTab>
                        <telerik:RadTab Text="Role">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
                <telerik:RadMultiPage runat="server" ID="RadMultiPageAccount" SelectedIndex="0" CssClass="multiPage" Style="display: inline-block; width: 600px; height: 550px; overflow-y: auto;">
                    <telerik:RadPageView runat="server" ID="RadPageViewRegApp">
                        <telerik:RadTabStrip runat="server" ID="RadTabStripRegApp" MultiPageID="RadMultiPageRegApp"
                            Orientation="HorizontalTop" Skin="Simple" SelectedIndex="0" Style="display: inline-block;">
                            <Tabs>
                                <telerik:RadTab Text="Current" Height="30px">
                                </telerik:RadTab>
                                <telerik:RadTab Text="Past" Height="30px">
                                </telerik:RadTab>
                            </Tabs>
                        </telerik:RadTabStrip>
                        <telerik:RadMultiPage runat="server" ID="RadMultiPageRegApp" SelectedIndex="0" CssClass="innerMultiPage"
                            Style="padding: 15px; ">
                            <telerik:RadPageView runat="server" ID="RadPageViewRegAppCurrent">
                                Applications - Current:<br />
                                <asp:Label ID="testerson" runat="server" Text="Testerson"></asp:Label>
                                <div style="width: 100%; height: 100%; border: 1px solid black;">
                                <table class="table table-striped table-hover" >
                                    <asp:PlaceHolder runat="server" ID="PlaceHolder2"></asp:PlaceHolder>
                                </table>
                                </div>
                            </telerik:RadPageView>
                            <telerik:RadPageView runat="server" ID="RadPageViewRegAppPast">
                                Applications - Past:<br />
                                <div style="width: 100%; height: 100%; border: 1px solid black;">
                                <table class="table table-striped table-hover">
                                    <asp:PlaceHolder runat="server" ID="PlaceHolder_RegAppPast"></asp:PlaceHolder>
                                </table>
                                </div>
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>
                    </telerik:RadPageView>
                    <telerik:RadPageView runat="server" ID="RadPageViewRole">
                        <telerik:RadTabStrip runat="server" ID="RadTabStripRole" MultiPageID="RadMultiPageRole"
                            Orientation="HorizontalTop" Skin="Simple" SelectedIndex="0" Style="display: inline-block;">
                            <Tabs>
                                <telerik:RadTab Text="Current" Height="30px" >
                                </telerik:RadTab>
                                <telerik:RadTab Text="Past" Height="30px">
                                </telerik:RadTab>
                            </Tabs>
                        </telerik:RadTabStrip>
                        <telerik:RadMultiPage RenderSelectedPageOnly="true"  runat="server" ID="RadMultiPageRole" SelectedIndex="0" CssClass="innerMultiPage"
                            Style="padding: 15px;">
                            <telerik:RadPageView runat="server" ID="RadPageViewRoleCurrent">
                                Role - Current:</br>
                                <table class="table table-striped table-hover" style="border: 1px solid black;">
                                    <asp:PlaceHolder runat="server" ID="PlaceHolder3"></asp:PlaceHolder>
                                </table>
                            </telerik:RadPageView>
                            <telerik:RadPageView runat="server" ID="RadPageViewRolePast">
                                Role - Past:<br />
                                <table class="table table-striped table-hover" style="border: 1px solid black;">
                                    <asp:PlaceHolder runat="server" ID="PlaceHolder_MbrPast"></asp:PlaceHolder>
                                </table>
                            </telerik:RadPageView>
                        </telerik:RadMultiPage>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </div>
        </div>
    </telerik:RadAjaxPanel>
4

0 回答 0