PDA

View Full Version : سوال: تغییر CSS Class سرور کنترل به کمک اسکریپت(Client Side) همراه با PostBack


maryam_vb
شنبه 02 اردیبهشت 1391, 16:14 عصر
سلام

دو Button با نام های Next و Prev دارم میخوام با کلیک شدن روی هر دکمه استایلش رو عوض کنم و استایل دکمه تا کلیک بعدی حفظ شه.مثلا اگر روی Next کلیک شد رنگ دکمه قرمز شه و رنگ دکمه Prev آبی بمونه تا کلیک بعدی. و همین طور میخوام اینکار سمت کلاینت انجام شه.

برای این منظور کد زیر رو نوشتم:


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.default
{
background-color: #3366FF;
color: #FFFFFF;
}
.click
{
color: #FFFF00;
background-color: #CC0099;
}
</style>
<script type="text/javascript">
function changeClass (elementID, newClass) {
var element = document.getElementById(elementID);

element.setAttribute("class", newClass);
if (elementID == "BtnNext")

document.getElementById("BtnPrev").setAttribute("class", "default");
else
document.getElementById("BtnNext").setAttribute("class", "default");
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">

<asp:Button ID="BtnPrev" runat="server" onclick="BtnPrev_Click" OnClientClick="changeClass('BtnPrev','click')" Text="Prev" CssClass="default" />

<asp:Button ID="BtnNext" runat="server" OnClientClick="changeClass('BtnNext','click')"
Text="Next" CssClass="default" />

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


ولی وقتی صفحه از سمت سرور برمیگرده استایل رو نگه نمیداره.

چه کدی رو باید اضافه کنم؟
d_derakhshani
شنبه 02 اردیبهشت 1391, 16:51 عصر
وضعیت رو در یک hiddenfield ذخیره کنید. بعد لود صفحه(postback) وضعیت رو از hiddenfield بخونید و اعمال کنید
maryam_vb
یک شنبه 03 اردیبهشت 1391, 09:15 صبح
وضعیت رو در یک hiddenfield ذخیره کنید. بعد لود صفحه(postback) وضعیت رو از hiddenfield بخونید و اعمال کنید

یعنی در IsPostBack صفحه خصوصیت CssClass دکمه ها رو تنظیم کنم.؟ این کار رو تو رویداد کلیک دکمه هم میتونم انجام بدم،میخواستم کدنویسی سمت سرور نداشته باشم.
d_derakhshani
یک شنبه 03 اردیبهشت 1391, 09:38 صبح
نه دوست عزیز. سمت سرور که اینکار رو نمی کنن(هر چند که میشه) گفتم بعد از پست بک, یعنی وقتی صفحه رو کلاینت(مرورگر) بارگذاری شد hiddenfield رو بخونید(با جاوااسکریپ-JQuery) اگه خالی نبود یعنی وضعیتی از قبل ست شده و اون رو اعمال کنید
maryam_vb
یک شنبه 03 اردیبهشت 1391, 10:06 صبح
بعد از پست بک, یعنی وقتی صفحه رو کلاینت(مرورگر) بارگذاری شد hiddenfield رو بخونید(با جاوااسکریپ-JQuery) اگه خالی نبود یعنی وضعیتی از قبل ست شده و اون رو اعمال کنید

خیلی ممنون از راهنماییتون، گفته شما رو با جاوا اسکریپت انجام دادم.


<script type="text/javascript">
function changeClass (elementID) {
var element = document.getElementById(elementID);
document.getElementById("SaveValue").value = elementID;
winonload();
}

function winonload() {
var value=document.getElementById("SaveValue").value;
if (value == "BtnNext") {
document.getElementById("BtnNext").setAttribute("class", "click");
document.getElementById("BtnPrev").setAttribute("class", "default");
}
else if (value == "BtnPrev") {
document.getElementById("BtnPrev").setAttribute("class", "click");
document.getElementById("BtnNext").setAttribute("class", "default");
}
}
</script>
-------------------
<body onload="winonload();">
-------------------
<input type="hidden" id="SaveValue" value="" runat="server"/>
maryam_vb
یک شنبه 03 اردیبهشت 1391, 11:27 صبح
به مشکل برخوردم:

وقتی از Update Panel تو صفحه استفاده میکنم، اسکریپت اجرا نمیشه.چرا؟ چی کار کنم؟