PDA

View Full Version : ماندن در یک تب با updatepanle



sg.programmer
دوشنبه 26 بهمن 1394, 18:16 عصر
سلام من در یک فرمم از tab bootstarp ای استفاده می کنم که با استفاده از modal صفحه را مقدار دهی میکنم.
زمانی که داخل تبی هستم حتی با وجود قرارد دادن updatepanle که صفحه رفرش نشه باز اکتیو تب به تب ابتدایی انتقال پیدا میکنه که میخوام در همون تبی که هستم بمونم. چیکار باید انجام بدم.

malloc
سه شنبه 27 بهمن 1394, 03:24 صبح
شما همیشه مقدار تب فعال رو داخل یک asp:hiddenfield قرار بده و توی تابع document.ready بگو که اون تب فعال بشه

sg.programmer
سه شنبه 27 بهمن 1394, 09:22 صبح
میشه بیشتر توضیح بدید چطور باید اینکار را بکنم زیاد با این تگ ها آشنا نیستم.

malloc
سه شنبه 27 بهمن 1394, 09:51 صبح
شما اول کدهای اون تب رو بزار اینجا ببینم چطور زدی تا بشه برسی کرد

sg.programmer
سه شنبه 27 بهمن 1394, 12:44 عصر
تشکر مهندس - با بوت استرپ هست




<!-- Page tabs -->
<div id="dvTab" class="tabbable page-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab0" data-toggle="tab"><i class="icon-paragraph-justify2"></i> لیست پرونده ها </a></li>
<li><a href="#tab1" data-toggle="tab"><i class="icon-stack"></i> ثبت پرونده</a></li>
</ul>

<div class="tab-content">

<!-- First tab -->
<div class="tab-pane active fade in" id="tab0">

تب اولی



</div>
<!-- /first tab -->

<!-- Second tab -->
<div class="tab-pane fade" id="tab1">

تب دومی



</div>
<!-- /second tab -->

</div>
</div>
<!-- /page tabs -->

sg.programmer
سه شنبه 27 بهمن 1394, 14:38 عصر
آقای malloc نگاه میندازید

malloc
سه شنبه 27 بهمن 1394, 15:47 عصر
خوب دوست عزیز من خودمم دقیق بلد نبودم الان داشتم روش کار میکردم .... شما یه صفحه که به مستر پیج وصل نیست درست کن و کد زیر رو توش بریز




<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Bootstrap/bootstrap-theme.css" rel="stylesheet" />
<link href="Bootstrap/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Bootstrap/bootstrap.js"></script>
<script src="Bootstrap/bootstrap.min.js"></script>
<script>
function SetVal() {
for (var i = 1; i <= 2; i++) {
try {
document.getElementById("tabHead" + i).className = "";
document.getElementById("tabBody" + i).className = "tab-pane fade";
} catch (e) {
}
}
document.getElementById("tabHead" + document.getElementById("hidTabID").value).className = "active";
document.getElementById("tabBody" + document.getElementById("hidTabID").value).className = "tab-pane fade active in";
}

function GetVal(val) {
document.getElementById("hidTabID").value = val;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:HiddenField ID="hidTabID" Value="1" runat="server" />
<!-- Page tabs -->
<div id="dvTab" class="tabbable page-tabs">
<ul class="nav nav-tabs">
<li onclick="GetVal(1);" class="active" id="tabHead1"><a href="#tabBody1" data-toggle="tab"><i class="icon-paragraph-justify2"></i>لیست پرونده ها </a></li>
<li onclick="GetVal(2);" id="tabHead2"><a href="#tabBody2" data-toggle="tab"><i class="icon-stack"></i>ثبت پرونده</a></li>
</ul>
<div class="tab-content">
<!-- First tab -->
<div class="tab-pane active fade in" id="tabBody1">
تب اولی
</div>
<!-- /first tab -->
<!-- Second tab -->
<div class="tab-pane fade" id="tabBody2">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
تب دومی
</div>
<!-- /second tab -->
</div>
</div>
<!-- /page tabs -->
</ContentTemplate>
</asp:UpdatePanel>

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




بعد توی کد سی شارپ کد زیر رو بزن

protected void Page_Load(object sender, EventArgs e)
{

}

protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "sdfsdfsdfsdfsdfs sd sdfssfsdsd fsdfs dfsssdf";
ScriptManager.RegisterStartupScript(this, typeof(Page), UniqueID, "SetVal()", true);
}


این الان جواب میده فقط باید یکم اعداد و ارقامشو درست کنی و ببریش زیر مجموعه مستر پیج

sg.programmer
سه شنبه 27 بهمن 1394, 16:19 عصر
تشکر مهندس - اعمال میشه ولی هردو تب هاید میشه و روی تب کلیک میکنم باز میشه؟

malloc
سه شنبه 27 بهمن 1394, 16:28 عصر
متوجه نشدم ماجرا چیه ؟

sg.programmer
سه شنبه 27 بهمن 1394, 16:36 عصر
باز هم تشکر. وقتی روی دکمه کلیک میکنم (محتوا هاید میشه). فقط هدر های تب نمایش داده میشن

داخل تب هام این قسمت ها هم هستن ربطی داره؟




<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>

چند دیو دیگر هم اینجاست


<asp:HiddenField ID="hidTabID" Value="1" runat="server" />

<!-- Page tabs -->
<div id="dvTab" class="tabbable page-tabs">
<ul class="nav nav-tabs">
<li onclick="GetVal(1);" class="active" id="tabHead1"><a href="#tabBody1" data-toggle="tab"><i class="icon-paragraph-justify2"></i> لیست پرونده ها </a></li>
<li onclick="GetVal(2);" id="tabHead2"><a href="#tabBody2" data-toggle="tab"><i class="icon-stack"></i> ثبت پرونده</a></li>
</ul>

<div class="tab-content">

<!-- First tab -->
<div class="tab-pane active fade in" id="tabBody1">

<!-- Tasks table -->
<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title"><i class="icon-paragraph-justify2"></i>لیست پرونده ها</h6>
<span class="pull-right label label-danger">126</span>
</div>
<div class="datatable-tasks">

firdt tab

</div>
</div>
<!-- /tasks table -->

</div>
<!-- /first tab -->


<!-- Second tab -->
<div class="tab-pane fade" id="tabBody2">

<!-- Tasks table -->
<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title"><i class="icon-paragraph-justify2"></i>پرونده جدید</h6>
<span class="pull-right label label-danger">126</span>
</div>
<div class="datatable-tasks">

<div class="modal-body with-padding">
<div class="block-inner text-danger">
<h6 class="heading-hr">مرحله 1 : ثبت پرونده <small class="display-block">لطفا مشخصات پرونده را وارد نمایید.</small></h6>
</div>

<asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />



</div>
</div>
</div>
<!-- /tasks table -->

</div>
<!-- /second tab -->

</div>
</div>
<!-- /page tabs -->

</ContentTemplate>

</asp:UpdatePanel>

malloc
سه شنبه 27 بهمن 1394, 17:15 عصر
داداش شما توی کلیک اون دکمه وقتی میره سمت سرور باید انتهای خط کد های سی شارپ کد زیر رو هم بنویسی


ScriptManager.RegisterStartupScript(this, typeof(Page), UniqueID, "SetVal()", true);


یعنی با این دستور بعد از اجرای سی شارپ تابع SetVal فراخونی میشه و درستش میکنه ..... فقط اگه داری کدهاتو توی مستر پیج استفاده میکنی آی دی اون hidTabID رو درست بدی

sg.programmer
سه شنبه 27 بهمن 1394, 17:20 عصر
تشکر.این کد را قرار داده بودم.


ScriptManager.RegisterStartupScript(this, typeof(Page), UniqueID, "SetVal()", true);





آره از مسترپیج دارم استفاده میکنم. آی دی را چطور بدم؟؟؟

malloc
سه شنبه 27 بهمن 1394, 17:54 عصر
کد زیر و جایگزین کن


<script>
function SetVal() {

var val = document.getElementById("<%= hidTabID.ClientID %>").value;

for (var i = 1; i <= 2; i++) {
try {
document.getElementById("tabHead" + i).className = "";
document.getElementById("tabBody" + i).className = "tab-pane fade";
} catch (e) {
}
}
document.getElementById("tabHead" + val).className = "active";
document.getElementById("tabBody" + val).className = "tab-pane fade active in";
}

function GetVal(val) {
document.getElementById("<%= hidTabID.ClientID %>").value = val;
}
</script>

sg.programmer
سه شنبه 27 بهمن 1394, 18:11 عصر
مهندس خیلی تشکر - واقعا دستتون درد نکنه بابت کمک و تجربیاتی که در اختیار بنده قرار دادید. درست شد

sg.programmer
چهارشنبه 28 بهمن 1394, 09:50 صبح
تشکر مهندس - ببخشید برای منو هم میشه از این روش استفاده کرد؟




<!-- Main navigation -->
<ul class="navigation">
<li class="active"><a href="Default.aspx"><span>صفحه اصلی</span> <i class="icon-screen2"></i></a></li>
<li>
<a href="#"><span>اجزای صفحه</span> <i class="icon-paragraph-justify2"></i></a>
<ul>
<li><a href="form_components.html">Form components</a></li>
<li><a href="form_layouts.html">Form layouts</a></li>
<li><a href="form_grid.html">Inputs grid</a></li>
</ul>
</li>
<li>
<a href="#"><span>مدیریت کاربران</span> <i class="icon-grid"></i></a>
<ul>
<li><a href="visuals.html">Visuals &amp; notifications</a></li>
<li><a href="navs.html">Navs</a></li>
</ul>
</li>
<li><a href="charts.html"><span>Charts</span> <i class="icon-bars"></i></a></li>
<li>
<a href="#"><span>Task manager</span> <i class="icon-numbered-list"></i></a>
<ul>
<li><a href="task_grid.html">Task grid</a></li>
<li><a href="task_detailed.html">Task detailed</a></li>
</ul>
</li>
<li><a href="charts.html"><span>Charts</span> <i class="icon-bars"></i></a></li>
<li>
</ul>


و برای اعمال روی Accordin ها چگونه باید باشه (دیو های تو در تو)



<div class="row"><div class="col-md-6">
<div class="panel-group block">
<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title panel-trigger active">
<a href="#question1" data-toggle="collapse" class="">1. Morbi a nulla quis enim porttitor hasellus rutrum tincidunt lacus?</a>


</h6>


</div>

<div id="question1" class="panel-collapse collapse in" style="height: auto;">
<div class="panel-body">
<p class="alert alert-success fade in text-center">

<hr>

<p>

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

</div>


</div>


</div>

<div class="panel panel-default">
<div class="panel-heading">

<div id="question2" class="panel-collapse collapse" style="height: 0px;">


</div>

<div class="panel panel-default">

<div class="panel panel-default">