PDA

View Full Version : سوال: لود محتوای تب در هنگام کلیک



Z.Abdollahi
پنج شنبه 30 تیر 1390, 09:03 صبح
با سلام به همه دوستان
من تو صفحه ام تعداد زیادی تب دارم که عنوان و محتوای اونها از طریق یک متد کلاس تولید میشه. محتوای هر تب در یک iframe قرار داره و محتوا عبارت هست از یک صفحه Aspx.
مسئله اینه که محتوای تب ها خیلی زیاد هستن و به علت وجود تعداد زیاد تب ها لود صفحه بسیییییییییییار طول می کشه. می خوام بدونم راهی هست که در لود اولیه صفحه فقط محتوای تب اول لود بشه و محتوای باقی تب ها تنها در صورت کلیک روی اونها لود بشن؟
کد صفحه aspx:

<script language="javascript" type="text/javascript">
$(function () {
$("#tabs ul li").css("float", "right");
$("#tabs").tabs().find(".ui-tabs-nav").sortable({ axis: "x" });
});
</script>
و محل نمایش تب:

<asp:Literal ID="LtrTabs" runat="server"></asp:Literal>

کد کلاس:

public string Build(int ServiceId)
{

string title = " <div class='demo'><div id='tabs'><ul>\n";
string content = "";

DataTable select = new DataTable();
ServicesBLL ser = new ServicesBLL();
select = ser.FormsSelTabs(ServiceId);

int i = 1;

foreach (DataRow row in select.Rows)
{
title += createTitle(row["LinkName"].ToString(), i);
content += createContent(row["LinkHref"].ToString(), i);
i++;
}
title += "</ul>\n";
content += "</div></div>";

return title + content;
}

private string createTitle(string title, int i)
{
string htm = "<li><a href='#tabs-{0}'>{1}</a></li>\n";
htm = string.Format(htm, i, title);
return htm;
}

private string createContent(string content, int i)
{
string htm = "<div id='tabs-{0}'><iframe dir='rtl' frameborder='0' height='100%' width='100%' src='{1}'></iframe></div>\n";
htm = string.Format(htm, i, content);
return htm;
}
و کد cs صفحه aspx:

TabBuilder tab = new TabBuilder();
LtrTabs.Text = tab.Build(1);

من یه چیزایی search کردم ولی تو همه جستجوها تب ها دستی ایجاد می شدن بنابراین به راحتی میشد واسشون یه رویداد onclick گذاشت ولی من نمی دونم چطور باید تو رویداد onclick از متد کلاسم استفاده کنم یا حتی همون متد رو دوباره تعریف کنم.
ممنون از وقتی که میگذارید.

Arsess
پنج شنبه 30 تیر 1390, 11:52 صبح
از آژاکس استفاده کن

Z.Abdollahi
پنج شنبه 30 تیر 1390, 15:43 عصر
ممنون از پاسختون. می خوام بدون راه دیگه ای هم به غیر ای جکس هست؟ من زیاد به ای جکس وارد نیستم ولی می خوام این کار رو انجام بدم که لود صفحه سریعتر بشه. سرعت ای جکس زیاد خوب نیست.

mehdi.mousavi
پنج شنبه 30 تیر 1390, 15:49 عصر
سلام.
شما می تونید src هر iframe رو فقط هنگامی set کنید (به اون aspx خودتون) که کاربر روی Tab مورد مربوطه Click کرده باشه.
در حالت لود اولیه، source اون فریم ها رو about:blank بذارید.

موفق باشید.

Z.Abdollahi
پنج شنبه 30 تیر 1390, 20:49 عصر
جناب موسوی ممنون از جوابتون. من می دونم که باید این کار رو انجام بدم اما مسئله اینجاست که چه جوری؟ :لبخندساده:
من نمی دونم چطور باید تو رویداد onclick از متد کلاسم استفاده کنم یا حتی همون متد رو دوباره تعریف کنم. یعنی تو کد جاوا اسکریپتم.

mehdi.mousavi
جمعه 31 تیر 1390, 10:31 صبح
سلام.
می تونید بدین شکل عمل کنید:

$("#tabs ul li").css("float", "right");
$("#tabs").tabs({ show: function (event, ui) {
$('#tabs #tabs-' + (ui.index + 1)+ ' iframe').attr('src', 'http://google.com');
}
}).find(".ui-tabs-nav").sortable({ axis: "x" });


در کد فوق، دارم میگم هر وقت روی هر tab ای زده شد، index اونو بگیر و div مربوطه به اونو پیدا کن (تا به iframe اش برسم). بعدش هم iframe رو به URL مورد نظر set میکنم. (اینجا من همه رو به google.com ست کرده ام).

موفق باشید.

Z.Abdollahi
شنبه 01 مرداد 1390, 11:35 صبح
بازم ممنون از جوابتون. ببینید تو این خط از کد:

$('#tabs #tabs-' + (ui.index + 1)+ ' iframe').attr('src', 'http://google.com (http://google.com/)');
من می خوام این رویداد رو فراخوانی کنم:

tab.Build(i);
سئوالم اینه که چطور این دستور Asp رو در جاوا اسکریپت به کار ببرم. تو بررسی هایی که کردم یه جا خوندم که می تونم یه دکمه hidden بگذارم تو صفحه تو رویداد کلیک اون کد asp موردنظرم رو بنویسم. بعد با کلیک روی تب کدی نوشته بشه که دکمه کلیک بشه.
من کدهای زیادی برای اجرای رویداد کلیک دکمه از طریق جاوااسکریپت پیدا کردم ولی متاسفانه هیچ کدوم جواب نمی دن. مثلا این :

document.getElementById('<%=btnTest.ClientID%>').onclick();
که اصلا خطا داره
موقعی هم که اینجوری تغییرش می دم:

document.getElementById('<% =btnTest.ClientID %>').onclick();
بازم خطا داره. اگر = رو بردارم دیگه خطا نمی ده اما اتفاقی هم نمی افته.
ممنون می شم اگر راهنمایی کنید.

mehdi.mousavi
یک شنبه 02 مرداد 1390, 15:08 عصر
بازم ممنون از جوابتون. ببینید تو این خط از کد:

$('#tabs #tabs-' + (ui.index + 1)+ ' iframe').attr('src', 'http://google.com (http://google.com/)');
من می خوام این رویداد رو فراخوانی کنم:

tab.Build(i);
سئوالم اینه که چطور این دستور Asp رو در جاوا اسکریپت به کار ببرم.

سلام.
چرا می خواهید همچین کاری رو انجام بدید؟ شما سمت سرور می دونید چه Tab هایی دارید و هر یک به چه URL ای اشاره می کنن، چه دلیلی داره با چند Round-Trip اضافی از Client به Server بخواهید به همون اطلاعات برسید؟ اگر این Tab ها Dynamic هستن، اونوقت باید از AJAX استفاده کنید...


تو بررسی هایی که کردم یه جا خوندم که می تونم یه دکمه hidden بگذارم تو صفحه تو رویداد کلیک اون کد asp موردنظرم رو بنویسم. بعد با کلیک روی تب کدی نوشته بشه که دکمه کلیک بشه.
چند روش در ASP.NET برای Call کردن یک متود سمت سرور وجود داره، اما اکیدا توصیه می کنم دلیل خوبی برای استفاده از اون داشته باشید. در سناریوی فعلی، من دلیلی برای اینکار نمی بینم (مگر اینکه شما مساله رو کامل توضیح نداده باشید). در هر حال، Client Callback (http://msdn.microsoft.com/en-us/magazine/cc163941.aspx) ها، مکانیزمی هستش که به شما اجازه Call کردن یک متود سمت سرور رو میده (در ASP.NET). روش دیگه استفاده از Page Method (http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/) هاست و اگر قراره از jQuery استفاده کنید، می تونید از یکی از توابع، get، post، getJSON و ... استفاده کنید (که در لینک قبل مثالی از این روش نیز زده شده).


من کدهای زیادی برای اجرای رویداد کلیک دکمه از طریق جاوااسکریپت پیدا کردم ولی متاسفانه هیچ کدوم جواب نمی دن. مثلا این :

document.getElementById('<%=btnTest.ClientID%>').onclick();
که اصلا خطا داره
موقعی هم که اینجوری تغییرش می دم:

document.getElementById('<% =btnTest.ClientID %>').onclick();
بازم خطا داره. اگر = رو بردارم دیگه خطا نمی ده اما اتفاقی هم نمی افته.
ممنون می شم اگر راهنمایی کنید.

از اونجاییکه از jQuery استفاده می کنید، جای document.getElementById می تونید از $ استفاده کنید:

$('#<%=btnTest.ClientID%>')

خط فوق المنت btnTest رو بصورت یک jQuery Object بهتون برمیگردونه. (به علامت # دقت کنید، چون داریم المنت رو با ID ی اون آدرس میکنیم، باید حتما از # استفاده کنیم).
پس از گرفتن Object مورد نظر، میتونیم متود click اونو Call کنیم. بنابراین:

$('#<%=btnTest.ClientID%>').click();

باعث میشه تا btnTest_Click سمت سرور (در صورتیکه اونو در ASPX تعریف کرده باشید) فراخوانی بشه.

البته روشهای دیگه ای هم هست، بطور مثال،

__doPostBack($('#<%=btnTest.ClientID%>').attr('id'), '');

همون کار خط قبلی رو میکنه، اما از متود __doPostBack از ASP.NET سود میبره...

موفق باشید.