我可以从后面的代码中更改按钮单击时的Jquery-ui活动选项卡吗？

Question

I have implemented Jquery tab like this article as I want this functionality. 我已经实现了类似于本文的 Jquery标签，因为我需要此功能。 But I also want to change active tab on button click (say 'save') from code behind when my records are saved successfully. 但是，当记录成功保存后，我还想更改按钮单击（例如“保存”）上的活动选项卡。

How can i do this on server click something like, 我该如何在服务器上单击类似的内容，

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

Sample HTML Code : 示例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>

My Sample Code behind : 我后面的示例代码：

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

You simply need to run the same script you're using on client side, injecting it from server side. 您只需要运行在客户端使用的相同脚本，并将其从服务器端注入即可。

To do this, simply use Page.RegisterStartupScript Method . 为此，只需使用Page.RegisterStartupScript方法。 This will execute the injected script after the page has been completely loaded in client side. 页面完全加载到客户端后，这将执行注入的脚本。

If you're using a recent version of the framework, use ClientScriptManager.RegisterStartupScript . 如果您使用的是最新版本的框架，请使用ClientScriptManager.RegisterStartupScript 。

As you can see in the linked reference pages, it's very easy to use: simply call the method passing the script as an string parameter, and it will be executed on the client side. 正如您在链接的参考页中所看到的那样，它非常易于使用：只需调用将脚本作为字符串参数传递的方法，它将在客户端执行。

Please, note that there are overloads that allow to introduce the <script> tags automatically, and others where you need to type the script tags. 请注意，有些重载允许自动引入<script>标记，而其他一些则需要键入脚本标记。

For example, if you use this code on server side, the alert will be executed on the client side (you'll see the "Hello World!" dialog on your browser): 例如，如果您在服务器端使用此代码，则警报将在客户端执行（您将在浏览器中看到“ Hello World！”对话框）：

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

NOTE: cstype and csname are used to allow to register more than one script on the page. 注意： cstype和csname用于允许在页面上注册多个脚本。 If you register more than one script the combination of both should be different for each script. 如果注册多个脚本，则每个脚本的两者组合应不同。 If not, you'll overwrite the same script. 如果没有，您将覆盖相同的脚本。 You can set this values to whatever you want, but you'll usualy do this: 您可以将此值设置为所需的任何值，但是通常会这样做：

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

To adapt it for your cas, simply set the 'script' var value to the tabs script that you want to run on the client side, ie: 为了使其适合您的cas，只需将“ script” var值设置为要在客户端上运行的tabs脚本，即：

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

Note that you can use single quotes on the javaScript code to make it easier to include them in the server side string. 请注意，您可以在javaScript代码上使用单引号，以使其更容易在服务器端字符串中包含它们。

Natyurally, you'll have to include this code in your button clicked handler btnSave_Click(...) 自然地，您必须在单击按钮的处理程序btnSave_Click(...)包含此代码btnSave_Click(...)

我可以从后面的代码中更改按钮单击时的Jquery-ui活动选项卡吗？

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-12-02 09:31:12

我可以从后面的代码中更改按钮单击时的Jquery-ui活动选项卡吗？

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-12-02 09:31:12

解决方案1
1 已采纳 2013-12-02 09:31:12