[英]How to keep a tab active after asp.net button event?
I would like to know how to keep a tab open after a button postback event, I could not get it to work using HiddenFields.我想知道如何在按钮回发事件后保持选项卡打开,但我无法使用 HiddenFields 使其正常工作。 I would like the second tab to stay open after a button click on the second tab however my code would always refresh to the first tab.
我希望第二个选项卡在第二个选项卡上单击按钮后保持打开状态,但是我的代码将始终刷新到第一个选项卡。
I have also tried to use an update panel instead of refreshing the entire page however the tabs would not toggle properly using this method.我还尝试使用更新面板而不是刷新整个页面,但是使用此方法无法正确切换选项卡。
I would prefer to not postback on every tab click as it affects the user experience.我不希望每次点击标签时都回发,因为它会影响用户体验。 Is there any other codes to do this without affecting the fade aesthetics?
有没有其他代码可以在不影响褪色美感的情况下做到这一点?
$(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>
You may be better off creating a web method and calling that from your jQuery instead of trying something with update panels.您最好创建一个 Web 方法并从您的 jQuery 调用它,而不是尝试使用更新面板进行某些操作。 Especially considering the performance problems update panels can cause.
特别是考虑到更新面板可能导致的性能问题。
You would move your save functionality into a web method like this您可以将保存功能移动到这样的网络方法中
[WebMethod]
public static void SaveExpense(string data, string moredata)
{
//your save code here
}
and something like this in your front end在你的前端有类似的东西
<button id="saveexpense">Save</button>
Then you can call your webmethod like this然后你可以像这样调用你的 webmethod
$('#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);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.