如何在不使用AJAX Toolkit的情况下使用ASP.NET和C#创建网页'；s选项卡容器

本文关键字：创建 网页 选项 NET AJAX Toolkit ASP 情况下 | 更新日期: 2023-09-27 18:01:03

我有一个使用AJAX Toolkit的选项卡容器和选项卡面板开发的web工具(脚本文件生成器(。

以下是网络工具的作用：

  1. 选项卡1:从用户获取一个ID，并通过连接到数据库
  2. 选项卡2：提示用户上传文件并检查格式
  3. 选项卡3：允许用户选择项目列表
  4. 选项卡4：基于所选项目创建脚本文件，并允许用户编辑该文件
  5. 选项卡5：允许用户下载脚本文件

在使用AJAX的标签容器之前，我还有什么其他选择？我不喜欢这个，因为：

  1. 当我使用DefaultButton属性时，切换Tab变得越来越困难(我将DefaultButton属性绑定到一个按钮，并且我能够从相应的自动生成的类中增加ActiveTabIndex，但当我使用DefaultButton属性时就不能了(
  2. 用户界面不美观，很难进行更改

如何在不使用AJAX Toolkit的情况下使用ASP.NET和C#创建网页'；s选项卡容器

目前，在网页中显示选项卡控件的最流行方式之一是使用Twitter Bootstrap选项卡，下面是一个完整的示例来帮助您入门：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript">
    $(function () {
        $('#tabs').tab();
        $("#btnGoToTab2").click(function () {
            $('#tabs a[href="#tabTwo"]').tab('show')
        });
        $("#btnGoToTab1").click(function () {
            $('#tabs a[href="#tabOne"]').tab('show')
        });
    });
</script>
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li><a href="#tabOne" data-toggle="tab">Tab One</a></li>
        <li><a href="#tabTwo" data-toggle="tab">Tab Two</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="tabOne">
            <h1>Tab One</h1>
            <input id="btnGoToTab2" type="button" value="Go To Tab 2" />
        </div>
        <div class="tab-pane" id="tabTwo">
            <h1>Tab Two</h1>
            <input id="btnGoToTab1" type="button" value="Back To Tab 1" />
        </div>
    </div>
</div>
相关文章：