Question

我想知道在按钮回发事件之后如何保持选项卡打开，我无法使用HiddenFields使它正常工作。在第二个选项卡上单击按钮后，我希望第二个选项卡保持打开状态，但是我的代码将始终刷新到第一个选项卡。

我也尝试过使用更新面板而不是刷新整个页面，但是使用此方法不能正确切换选项卡。

我希望不要在每次单击标签时都回发，因为这会影响用户体验。还有其他代码可以执行此操作而不影响淡入淡出的美观吗？

        $(function () {
            $('.tab-content:first-child').show();

            $('.tab-nav').bind('click', function (e) {
                $this = $(this);
                $tabs = $this.parent().parent().next();
                $target = $($this.data("target"));
                $this.siblings().removeClass('active');
                $target.siblings().css("display", "none");
                $this.addClass('active');
                $target.fadeIn("slow");
            });

            $('.tab-nav:first-child').trigger('click');
        });

<ul class="tabs-nav d-flex" style="padding-left: 35px;">
<li class="tab-nav d-flex justify-content-center align-items-center" data-target="#tab_1">Overview</li>
<li class="tab-nav d-flex justify-content-center align-items-center" data-target="#tab_2">Expenses</li>
</ul>

<div id="tab_1" class="tab-content">
  <p>abc</p>
</div>

<div id="tab_2" class="tab-content">
  <p>abc</p>
  <asp:Button ID="saveexpense" runat="server" Text="Save"/>
</div>

Answer 1

您最好创建一个Web方法并从jQuery调用它，而不是尝试使用更新面板。尤其要考虑更新面板可能导致的性能问题。

您应将保存功能移至这样的网络方法中

[WebMethod]
public static void SaveExpense(string data, string moredata)
{
    //your save code here
}

以及前端的类似内容

<button id="saveexpense">Save</button>

然后您可以像这样调用您的网络方法

$('#saveexpense').click(function () {
    $.ajax({
        type: "POST",
        url: "CurrentPage.aspx/SaveExpense",
        data: JSON.stringify({ data: $("#textbox").val(), moredata: $("#textbox2").val() }) ,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function () {
            console.log("data saved");
        },
        error: function (jXHR, textStatus, err) {
            console.log(err);
        }
    });
});

asp.net按钮事件后如何保持选项卡处于活动状态？

1 个答案: