Question

我已经实现了像this article这样的Jquery选项卡，因为我想要这个功能。但是我也希望从后面的代码中点击按钮点击（例如“保存”）来更改活动标签当我的记录成功保存时。

如何在服务器上执行此操作，点击类似

的内容

onclick='$("#tabs").tabs("option", "active", 2);'

示例HTML代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  <script src="http://code.jquery.com/jquery-1.10.0.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $('#tabs').tabs({
                activate: function () {
                    var newIdx = $('#tabs').tabs('option', 'active');
                    $('#<%=hidLastTab.ClientID%>').val(newIdx);

                }, heightStyle: "auto",
                active: previouslySelectedTab,
                show: { effect: "fadeIn", duration: 1000 }
            });

        });
 </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:900px; margin:0 auto">
    <div id="tabs" style="margin:0 auto;  margin-bottom:2px;">
    <ul>
        <li><a href="#tabs-1">STATE TRACKING</a></li>
        <li><a href="#tabs-2">ICONS</a></li>
        <li><a href="#tabs-3">Effects</a></li>

    </ul>
    <div id="tabs-1">
    <strong>STATE TRACKING</strong>
        <p>This is first tab.</p>
    </div>
     <div id="tabs-2">
     <strong>ICONS</strong><p>
     Note : Remains on same tab after postback if I check/uncheck checkbox.
    </p>
    <asp:CheckBox ID="CheckBox1" runat="server"  AutoPostBack="true" Text="Hi"/>
    <br />
    <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
    </div>

      <div id="tabs-3">
    <strong> The jQuery UI effects</strong><p>
    This is third tab.
    </p>
    </div>

  </div>
  <asp:HiddenField ID="hidLastTab" Value="0" runat="server" />
  </div>

    </form>
</body>
</html>

我的示例代码背后：

protected void Page_Load(object sender, EventArgs e)
{
    String hiddenFieldValue = hidLastTab.Value;
    StringBuilder js = new StringBuilder();
    js.Append("<script type='text/javascript'>");
    js.Append("var previouslySelectedTab = ");
    js.Append(hiddenFieldValue);
    js.Append(";</script>");
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "acttab", js.ToString());
}

protected void btnSave_Click(object sender, EventArgs e)
{
    // Code goes here for Insert/Update on btnSave_Click()
    // After Insert/Update successfully, I have to select next tab (i.e. 3rd tab)
}

Answer 1

您只需要在客户端运行您正在使用的相同脚本，从服务器端注入它。

要执行此操作，只需使用Page.RegisterStartupScript Method即可。这将在页面完全加载到客户端后执行注入的脚本。

如果您使用的是最新版本的框架，请使用ClientScriptManager.RegisterStartupScript。

正如您在链接的参考页面中看到的，它非常易于使用：只需调用将脚本作为字符串参数传递的方法，它将在客户端执行。

请注意，有些重载可以自动引入<script>标记，还有其他需要输入脚本标记的标记。

例如，如果您在服务器端使用此代码，则会在客户端执行警报（您将在浏览器中看到“Hello World！”对话框）：

string script = "<script type=text/javascript> alert('Hello World!'); <script>");
ClientScriptManager cs = Page.ClientScript;
cs.RegisterStartupScript(cstype, csname1, cstext1.ToString());

注意：cstype和csname用于允许在页面上注册多个脚本。如果您注册多个脚本，则每个脚本的组合应该不同。如果没有，您将覆盖相同的脚本。您可以将此值设置为您想要的任何值，但您通常会这样做：

cstype = this.GeType(); // the type of the current page or user control
csname = "MyKey"; // a key defined by you, specific to this particular script

要使其适合您的cas，只需将'script'var值设置为您希望在客户端运行的tabs脚本，即：

string script = "<script type=text/javascript>$('#tabs').tabs('option', 'active', 2);</script>";

请注意，您可以在javaScript代码上使用单引号，以便更容易将它们包含在服务器端字符串中。

Natyurally，您必须将此代码包含在按钮点击处理程序中btnSave_Click(...)

我可以在后面的代码中点击按钮更改Jquery-ui活动标签吗？

1 个答案: