私の上司は Telerik を使いたがっていますが、私はこれが初めてなので、まだ理解しようとしています。私が本質的にやろうとしていること：
- ページの読み込み中は、最小限のデータのみを読み込みます
- ナビゲーションタブがあります。
- タブをクリックすると、そのタブに固有のストアド プロシージャが呼び出されます。関連するデータのみがロードされるように、部分的なポストバックが発生する必要があります。
ASP:UpdatePanels とナビゲーション バーの ASP:Buttons の順序付けられていないリストを使用して、Telerik なしでこれを実現できます。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なしで以下を動作させることができます。すべてのデータが一度に読み込まれ、タブ間をシームレスにクリックできます。ただし、一度に 1 つのタブの情報のみを読み込み、別のタブが選択されたときにのみ新しいデータを取得したいと考えています。
<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>