Question

我的老板想要使用Telerik，我是新手，所以仍然想弄明白。我本来想要做的事情：

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

我可以在没有Telerik的情况下使用ASP实现此目的：UpdatePanels和一个无序的ASP：按钮用于导航栏。我似乎无法弄清楚如何使用Telerik（Telerik UI for ASP.NET）

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

所以我的主要问题基本上是如何使它“在导航选项卡上单击，调用特定功能。”

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

AJAX：

<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>

Telerik：使用RadTabStrip调用部分页面回发的存储过程

0 个答案: