مشکل در استفاده از JQuery

[V0R73X]

سلام خدمت دوستان.
من یه user Control ساختم اینم کل کدشه:


<%@ Control Language="VB" AutoEventWireup="false" CodeFile="WebUserControl.ascx.vb" Inherits="WebUserControl" %>

<asp:ImageButton ID="ImageButton1" runat="server" Height="54px"
ImageUrl="~/Images/Picture1.png" Width="121px" />

<script type="text/javascript" src="JQuery.js">
//$(document.body).ready(function () {
$(document.getElementById("ImageButton1")).hover(function () {
$(document.getElementById("ImageButton1")).attr("ImageUrl", "~/Images/Picture2.png");
}, function () {
$(document.getElementById("ImageButton1")).attr("ImageUrl", "~/Images/Picture1.png");
});
//});
</script>

یه نگاه که بندازید معلومه که چیکار میکنه! این imageButton یه صورت یه دکمه است که موقعی که روش میری تصویر پشتیش طوری عوض میشه که انگار فشرده میشه!
منتها این اتفاق نمیفته!
توی صفحه ای که من این کنترلو استفاده میکنم هرچی موس رو میبرم روش هیچ فرقی نمیکنه!
آیا من جایی رو اشتباه کردم یا جایی اشتباه کردم یا برای استفاده از JQuery کار دیگری رو باید انجام بدم؟
ضمنا دقت کنید VS هیچ اشتباهی رو نشون نمیده پس هم کد JQuery درست تو برنامه Import شده هم اشتباه Syntax مثل باز گذاشتن پرانتز و... وجود نداره!
بدبختی اینجاست که من حتی بدون User Control هم همین روش رو روی یکی از کنترل های صفحه که همین شرایطو داشت اجرا کردم بازم نشد!

[mehrdad201]

به جای ImageButton1 باید از کلاینت ایدیش استفاده کنید. ImageButton1 نام سرور ساید هست. در ضمن نیازی به اینطور فراخوانی نیست. (document.getElementById("ImageButton1"))


$("<% ImageButton1.clientID %>").hover(
function(){$(this).attr('src', '<% ResolveUrl("~/Images/Picture2.png") %>');},
function(){$(this).attr('src', '<% ResolveUrl("~/Images/Picture1.png") %>');}
);

کدهای سرور ساید رو باید درست با کلاینت ساید قاطی کنید.

[Keramatifar]

دوست عزیز
شما باید از Selector های jquery استفاده کنید
بجای getElementById باید از # استفاده کنید.

$('#ImageButton1')

[mehrdad201]

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

منتها ای دی ImageButton1 یک ایدی سرور ساید هست. و احتمالا موقع کمپایل ممکنه کلاینت ای دی با سرور ایدی یکی از اب در نیاد. واسه همین بهتره محض اطمینان از کلاینت ای دی استفاده بشه. (اینطور نیست جناب کرامتی؟)

[ricky22]

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

منتها ای دی ImageButton1 یک ایدی سرور ساید هست. و احتمالا موقع کمپایل ممکنه کلاینت ای دی با سرور ایدی یکی از اب در نیاد. واسه همین بهتره محض اطمینان از کلاینت ای دی استفاده بشه. (اینطور نیست جناب کرامتی؟)
می تونن برای حل این مشکل ویژگی ClientIDmode (http://www.devcurry.com/2009/08/clientid-mode-in-aspnet-40.html)را استاتیک لحاظ کنند.

[mehrdad201]

اونوقت برای کنترلهایی که مثلا داخل یه ریپیتر هستند. یا داخل یه گرید ویو و به دفعات رندر میشن. مشکل تداخل ای دی پیش نمیاد ؟!؟!

[V0R73X]

به جای ImageButton1 باید از کلاینت ایدیش استفاده کنید. ImageButton1 نام سرور ساید هست. در ضمن نیازی به اینطور فراخوانی نیست. (document.getElementById("ImageButton1"))


$("<% ImageButton1.clientID %>").hover(
function(){$(this).attr('src', '<% ResolveUrl("~/Images/Picture2.png") %>');},
function(){$(this).attr('src', '<% ResolveUrl("~/Images/Picture1.png") %>');}
);
کدهای سرور ساید رو باید درست با کلاینت ساید قاطی کنید.

ممنونم.
1.میشه درباره این ClientID مختصر توضیحی بدین؟
2: فرض کنید ما این User Control رو ساختیم، بعدش اینو تو صفحه که میخوایم بزاریم یه ID دیگه بهش میدیم مثلا image2 حالا بازم اسکریپت ما درست کار میکنه؟
3.برنامه من فعلا به خط اول گیر میده:
$("<% ImageButton1.clientID %>").hover(

[Javad_Darvish_Amiry]

وقتی شما به یه کنترل سروری یه آی دی اختصاص میدید، این آی دی همونی نیست که به کلاینت ارسال میشه (به HTML رندر میشه) بلکه با توجه به درخت کنترل ها، تغییر میکنه (حتما برید دنبال دلیلش، براتون مفیده). حالا با پراپرتی ClientID شما میتونید آی دی نهایی که تو HTML برای کلاینت ارسال میشه رو همون سمت سرور تو زمان اجرا داشته باشید که کاربردش هم کاملا مشخصه، همین نمونه ای که شما الان باهاش سروکار دارید.
خلاصه صحبت های دوستان با رفع اشکالات تایپی (امیدوارم جسارت بنده رو ببخشند) میشه کد زیر:


$('#<%= ImageButton1.ClientID %>').hover(
function(){$(this).attr('src', '<%= ResolveUrl("~/Images/Picture2.png") %>');},
function(){$(this).attr('src', '<%= ResolveUrl("~/Images/Picture1.png") %>');}
);

دلیل خطا که آخر ذکر کردید هم نذاشتن علامت مساوی بود.
موفق باشید.

[V0R73X]

دلیل خطا که آخر ذکر کردید هم نذاشتن علامت مساوی بود.
منظورتون # هست؟

[V0R73X]

آهان مساوی رو دیدم، ببخشید!

[V0R73X]

راستی یه مشکل دیگه روهم اینجا مطرح کنم:
چطوری میشه User Controlی ساخت که ویژگی های کنترل دیگه ای (مثلا ImageButton) رو به ارث ببره؟؟؟؟

[Javad_Darvish_Amiry]

این جا دیگه User Control جواب نمیده، باید یه کلاس بنویسی که از WebControl ارث برده بشه، اگه هم میخوای خاصیت های یه کنترل خاص رو توش داشته باشی، باید از اون کنترل ارث ببره؛ مثلا برای داشتن کنترلی که خاصیت های ImageButton رو ارث ببره، باید کلاس زیر رو داشته باشی:


public class MyImageButton : ImageButton {

}

تو MSDN عبارت WebControl یا How to implement a custom ASP.NET control رو جستجو کن، نمونه کد با توضیحات کامل هست. حتما توضیحات رو بخون برادر من. به کد اکتفا نکن. اگه هم زبانت قوی نیست، از مترجم گوگل (http://translate.google.com/) استفاده کن. کارتو راه میندازه.

[mehrdad201]

عذر میخوام. تقصیر من بود. علامت مساوی رو یادم رفت ... اخه توی نوتپد داشتم مینوشتم از قلم انداختم. ممنون از جناب امیری بخاطر غلط گیریشون.

[V0R73X]

این جا دیگه User Control جواب نمیده، باید یه کلاس بنویسی که از WebControl ارث برده بشه، اگه هم میخوای خاصیت های یه کنترل خاص رو توش داشته باشی، باید از اون کنترل ارث ببره؛ مثلا برای داشتن کنترلی که خاصیت های ImageButton رو ارث ببره، باید کلاس زیر رو داشته باشی:


public class MyImageButton : ImageButton {

}

تو MSDN عبارت WebControl یا How to implement a custom ASP.NET control رو جستجو کن، نمونه کد با توضیحات کامل هست. حتما توضیحات رو بخون برادر من. به کد اکتفا نکن. اگه هم زبانت قوی نیست، از مترجم گوگل (http://translate.google.com/) استفاده کن. کارتو راه میندازه.
ولی در عوض دیگه نمیشه توش از کد HTML استفاده کرد!

[V0R73X]

دوستان نمیدونم چرا کد کار نمیکنه؟

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="JQuery.js" type="text/javascript">
$('#<%= ImageButton1.ClientID %>').hover(
function () { $(this).attr('src', '<%= ResolveUrl("~/Images/Picture2.png") %>'); },
function () { $(this).attr('src', '<%= ResolveUrl("~/Images/Picture1.png") %>'); }
);
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
<asp:ImageButton ID="ImageButton1" runat="server" />
</form>
</body>
</html>

همون کد رو کپی کردم ولی هیچ کاری نمیکنه!
اگه جایی اشتباه کردم بگین!

[mehrdad201]

شما از 2 تا تگ اسکریپت استفده کن. یعنی در تگ اسکریپت اول فایل JQuery.js رو اینکلود کن و بعد یه تگ اسکریپت دیگه ایجاد کن و کدها رو توش بنویس. در ضمن اون فانکشن هاور رو هم بذار توی لودینگ...

ببین اینطوری بازم مشکل هست ؟ در ضمن از وجود فایل JQuery.js اطمینان حاصل کنید.




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script language="javascript" src="JQuery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('#<%= ImageButton1.ClientID %>').hover(
function () { $(this).attr('src', '<%= ResolveUrl("~/Images/Picture2.png") %>'); },
function () { $(this).attr('src', '<%= ResolveUrl("~/Images/Picture1.png") %>'); }
);
});

</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
<asp:ImageButton ID="ImageButton1" runat="server" />
</form>
</body>
</html>

[Javad_Darvish_Amiry]

اینطور که توی این کد پیداست، ظاهرا شما خود کتابخونه جی کوئری رو به صفحه اتون اضافه نکردید؛ درست میگم؟ ضمنا بایند تریگرها باید تو page ready باشه تا بهترین جواب رو بده. اگه درست متوجه شدم، همینجا کد رو میذارم که سریعتر کارتون راه بیفته، اگه هم نه عذرخواهی میکنم.



<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('#<%= ImageButton1.ClientID %>').hover(
function () { $(this).attr('src', '<%= ResolveUrl("~/Images/Picture2.png") %>'); },
function () { $(this).attr('src', '<%= ResolveUrl("~/Images/Picture1.png") %>'); }
);
});
</script>

حالا شما با توجه به اسم فایل جی کوئری که داری استفاده میکنی و مسیری که اون فایل ذخیره شده، خاصیت src رو توی تگ اول اصلاح کن.

[Javad_Darvish_Amiry]

ولی در عوض دیگه نمیشه توش از کد HTML استفاده کرد!
نه دیگه به اون شکلی که شما بخوای راحت HTML بنویسی نداری؛ باید از رشته ها یا HtmlGenericControl یا کنترل های ارث برده شده از HtmlControl و HtmlGenericControl استفاده کنی. -اونجا شما کد HTML و ASPX ت رو مینویسی و موقع کامپایل، کد مورد نیاز برای همچین کنترلی اتوماتیک ایجاد میشه، اینجا داری خودت اون کد رو مینویسی، طبیعتا اونجا راحت تر با امکانات محدودتر، اینجا پیچیده تر با امکانات و قدرت مانور بیشتر، میتونی اینطوری هم به قضیه نگاه کنی- (اسم کلاس ها یادم نبود، اگه اشتباه نوشتم اساتید متذکر بشن).

[V0R73X]

اینطور که توی این کد پیداست، ظاهرا شما خود کتابخونه جی کوئری رو به صفحه اتون اضافه نکردید؛ درست میگم؟ ضمنا بایند تریگرها باید تو page ready باشه تا بهترین جواب رو بده. اگه درست متوجه شدم، همینجا کد رو میذارم که سریعتر کارتون راه بیفته، اگه هم نه عذرخواهی میکنم.



<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('#<%= ImageButton1.ClientID %>').hover(
function () { $(this).attr('src', '<%= ResolveUrl("~/Images/Picture2.png") %>'); },
function () { $(this).attr('src', '<%= ResolveUrl("~/Images/Picture1.png") %>'); }
);
});
</script>

حالا شما با توجه به اسم فایل جی کوئری که داری استفاده میکنی و مسیری که اون فایل ذخیره شده، خاصیت src رو توی تگ اول اصلاح کن.

نه من کتابخونه رو درست اضافه کردم چون موقع رویداد Page.ready با یه Alert تستش کردم کار کرد, وگرنه VS به این علامت $ گیر میداد!
با این حل هنوز کد رو امتحان نکردم بزودی نتیجه رو بهتون میگم. ولی‌ هنوز چند سوال برام مونده: 1.این علامت تگ درصد واسه چیه؟ <% %>
2.برای چی‌ از ResolveUrl استفاده کردین؟
3.چرا بجای ImageUrl از src استفاده کردین؟

[Javad_Darvish_Amiry]

.این علامت تگ درصد واسه چیه؟ <% %>
خوب مفسر، وقتی داره یه صفحه aspx رو تفسیر میکنه برای تولید کد مناسب و کامپایل اون کد با سه تا چیز برخورد میکنه:
1- تگ های HTML که نیاز به پردازشی نداشته و مستقیما باید تو خروجی نوشته شوند. این جا 2 تا وضعیت پیش میاد: بعضی مواقع (خیلی کم) به شکل یه رشته وارد کد نهایی میشن، اکثر اوقات هم به عنوان کنترل های HtmlControl یا HtmlGenericControl در نظر گرفته میشن و به عنوان فیلدهایی به کلاس صفحه اضافه میشن.
2- تگ هایی که نمایانگر کنترل های سمت سرور هستن (و از جمله تگ های HTML که بهشون صفت runat=server اضافه شده) دیگه فقط حالت دوم بالا براشون اتفاق میفته؛ یعنی فیلد هایی از کلاس صفحه.
3- اون قسمت هایی که بین اون دو علامت هستن، دیگه هیچکدوم از اتفاقات بالا براشون نمیفته؛ بلکه به عنوان کد سی شارپ (بسته به زبون صفحه) تفسیر میشن که در واقع هم همینطور هستن. (البته موضوع بایندینگ رو فعلا در نظر نگرفتم؛ اساتید ببخشند اما فکر کنم این مرحله نیاز نیست). اون علامت مساوی که میذارم موقع متد رندر به کار میاد. یعنی همه ی اون فیلد هایی که بالا صحبتش رو کردیم، خروجی های مناسبی رو تولید میکنند، هر جا که مساوی باشه، به جاش اون کد سی شارپ اجرا و خروجی تو اون قسمت نوشته میشه.
سعی کردم خیلی خلاصه و ساده و مفید باشه، از این بیشتر از دستم برنمیومد، شرمنده.

2.برای چی‌ از ResolveUrl استفاده کردین؟

شما وقتی آدرس رو مطلق بدید، وقتی مسیر اجرای کدتون تغییر کنه، اون آدرس دیگه معتبر نبوده و مثلا اگه عکس باشه، دیگه لود نمیشه (وطبیعتا نمایش هم داده نمیشه). این متود، با توجه به مسیر نسبی که نسبت به ریشه سایت بهش میدیم (با علامت ~ داریم میگیم که مسیر نسبت به ریشه است) و این که کد فعلی تو کدوم مسیر در حال حاضر داره اجرا میشه، مسیر درست رو پیدا کرده و نسبت میده. اینطوری مشکلی که گفتیم بالا، حل میشه.

چرا بجای ImageUrl از src استفاده کردین؟
خوب دوست من، ImageUrl یه صفتیه برای کنترل های سمت سرور، و HTML و به تبعش مرورگر هیچ درکی ازش ندارن؛ هر چیزی که تو ASP.NET مینویسیم، در نهایت باید به تگ ها و صفات HTML تبدیل بشه و برای مرورگر ارسال بشه. (طبق همون فرمولی که بالا گفتیم). تصاویر برای آدرسشون یه صفتی دارن به اسم src (مخفف source) که عکس رو از اون آدرس میخونن.
امیدورام تونسته باشم کمکی کرده باشم. اگه ناراحت نمیشید، پیشنهاد میکنم رو مفاهیم پایه که فعلا مهمترینش HTML هست بیشتر کار کنید. - بهترین کار گرفتن یه کتاب HTML و کار کردن از روی اونه - بعدش هم مسائل سمت سرور رو سعی کنید عمیقتر بررسی کنید. موفق باشید.

[V0R73X]

حل شد! بالاخره کار کرد!
ممنون از کمک شما. ببینید من روی asp.net تحت VB کار میکنم. واسه همین اون تگ ها رو نمیشناختم.
موضوع Binding رو هم بلد هستم متوجه حرف های شما شدم.
ممنون از کمک شما بابت آموزش ها و...