جی کوئری در ASP.NET

[mehran63]

سلام
چطور میتونم در ASP.NET کد های JQuery رو بنویسم ، میخوام مثل خود ASP.net که اول حرف یک عنوان را که میزنی ادامه آن به صورت خودکار می آید را داشته باشم.
فقط میدونم که تو .NET از قسمت Add New Item میتونیم یک فایل J Script اضافه کنم و اونجا کد بنویسم ولی امکانی که بالا اشاره کردم را ندارد

[hakan648]

سلام

ابتدا باید یک ارجاع به فایل jQuery به صفحه اضافه کنید :

<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>

(توصیه میشه که این ارجاع در انتهای صفحه ، یعنی قبل از تگ </body> اضافه بشه ، که باعث افزایش سرعت بارگذاری صفحه می‌شود - ولی اضافه کردن در قسمت head هم مجاز است)

در مرحله بعد میتونید شروع به کدنویسی کنید . برای این کار باید یک تگ script به صفحه اضافه کنید. (البته میشه که این کدها را در یک فایل خارجی نوشت و مانند قسمت قبل به صفحه اضافه کرد.)

و در نهایت برای کار با کتابخانه ی jQuery ، همونطور که توصیه شده ، کدهارو در رویداد ready می‌نویسید.

<script type="text/javascript">

    $(document).ready(function() {

        $("#mydiv").text("Hello World!");

    });

</script>

در این حالت ، اگر ارجاع به jQuery صحیح باشد ، intellisense ویژوآل استدیو توابع و خصوصیات را در حین کدنویسی نمایش خواهد داد.

برای داشتن ارجاع به jQuery در یک فایل script جداگانه هم ، میتونید خط زیر را که ارجاع به کتابخانه ی jQuery دارد به ابتدای فایل اضافه کنید (بدون این خط ، intellisense توابع و خصوصیات jQuery را ارائه دهد) :

/// <reference path="/Scripts/jquery-1.7.1.min.js" />

البته این رو هم اضافه کنم که این مواردی که عرض کردم ارتباطی با زبان برنامه نویسیتون در پروژه نداره و یک مبحث ClientSide است.

[masudafsar]

jQuery یک زبان سمت کاربر است، پس به پایگاه داده سایت دسترسی ندارد. برای این کار شما باید با استفاده از یک زبان تحت سمت سرور مثل ASP.NET یا PHP با پایگاه داده ارتباط برقرار کرده و رشته ای که کاربر وارد کرده را در آن جستجو کنید و موارد مشابه را برای کاربر لیست کنید. البته برای ارتباط این دو اسکریپت نیز باید از تکنولوژی Ajax استفاده کنید. یعنی با jQuery هربارکه کاربر در textbox مورد نظر یک حرف جدید نوشت ، کل عبارت برای سرور فرستاده شود و در پایگاه داده جستجو شود که چه عباراتی مرتبط با چیزی که کاربر وارد کرده وجود دارد و سپس لیست آنها برای jQuery برگردانده شود تا آن را نمایش دهد.

فک کنم زیاد بالای دیپلم حرف زدم خودم هم نفهمیدم چی گفتم!

در هر صورت یه مثال می تونی تو این لینک ببینی:
http://jqueryui.com/autocomplete/
http://www.devbridge.com/projects/autocomplete/jquery/

[mehran63]

سلام
خب مشکلم با /// <reference path="/Scripts/jquery-1.7.1.min.js" /> در مورد intellisense حل شد
ولی حالا که من دارم در یک فایل جداگانه در خوده Visual Studio برنامه JQuery رو مینویسم به جز همین خط بالا دیگه چه چیزایی رو باید اضافه کنم اصلا این مسئله رو تو یه قطعه کد میگم
فرض کنید من تو صفحه وبم میخوام هر وقت روی یه Button کلیک کردم تمام Div ها مخفی بشن برای این کار میدونم از کد زیر باید استفاده کنم
لطفا بگید برای این که کد کار کنه و در همون صفحه وبم هم اعمال بشه چه کدهای دیگری غیر کد پایین باید به فایل جداگانه my-jquery.js که در VS ایجاد کردم اضافه کنم یا اگر احیانا تغییرات دیگری در جاهای دیگر مثل فایل .aspx باید بدم چه تغییراتی هستن

///<reference path="/scripts/jquery.js" />

$("button").click(function () {

    $("div").hide();

});

[masudafsar]

بهتره تمام کد هات رو در تابع ready قرار بدی تا تمام صفحه لود بشه بعد کد جاوا اجرا بشه یا این که فایل رو قبل از تگ بسته Body به صفحه اضافه کنی.

نحوا استفاده از تابع ready :

$("document").ready(function(){

	// write your code here!

});

[mehran63]

سلام
بر طبق گفته های شما برای مخفی کردن تگ های div پس از کلیک بر روی یک button کد زیر را در یک فایل جداگانه در Visual Studio نوشتم ولی پس از اجرا و کلیک بر روی button هیچ عکس العملی اتفاق نمی افتد آیا در فایل aspx هم باید تغییری بدم لطفا کامل راهنماییی کنید

///<reference path="/scripts/jquery.js" />

$("document").ready(function () {

    $("button").click(function () {

        $("div").hide();

    });

});

[Sirwan Afifi]

شما قبل از هر چیز ابتدا برید jQuery رو مطالعه کنید.

[masudafsar]

سلام
بر طبق گفته های شما برای مخفی کردن تگ های div پس از کلیک بر روی یک button کد زیر را در یک فایل جداگانه در Visual Studio نوشتم ولی پس از اجرا و کلیک بر روی button هیچ عکس العملی اتفاق نمی افتد آیا در فایل aspx هم باید تغییری بدم لطفا کامل راهنماییی کنید

///<reference path="/scripts/jquery.js" />

$("document").ready(function () {

    $("button").click(function () {

        $("div").hide();

    });

});

در Html تگی بنام button نداریم پس یا شما یا یک input از نوع button داری یا مقدار id آن برابر button است، پس باید از یکی دو روش زیر رویداد کلیک رو چک کنی.

1- یک input از نوع button

$("document").ready(function () {

    $("input:button").click(function () {

        $("div").hide();

    });

});

2- مقدار id آن برابر button

$("document").ready(function () {

    $("#button").click(function () {

        $("div").hide();

    });

});

[mehran63]

باز عکس العملی نشون نمیده

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

<!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">
    <title>Untitled Page</title>
    <script src="scripts/my-JScript.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:DropDownList ID="DropDownList1" runat="server" 
            onselectedindexchanged="DropDownList1_SelectedIndexChanged" AutoPostBack="true">
            <asp:ListItem>esfehan</asp:ListItem>
            <asp:ListItem>tehran</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <br />
        <asp:DropDownList ID="DropDownList2" runat="server">
        </asp:DropDownList>
        <br />
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    <p>Hellooooo</p>
    </div>
    </form>
</body>
</html>

کد مربوط به فایلی به اسم my-JScript.js

///<reference path="/scripts/jquery.js" />

$("document").ready(function () {

    $("#Button1").click(function () {

        $("div").hide();

    });

});

[masudafsar]

کد اصلی jQuery رو پس چرا اضافه نکردی؟
اول از سایتش دانلودش کن

بعد دستور زیر رو به بعد از title قرار بده

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

[mehran63]

این کار اهم انجام دادم باز هم عکس العملی نشون نمیده

[masudafsar]

شما یک بار از دکمه های استاندارد html استفاده کن ببین جواب میده؟

به جای این کد :

<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />

بنویس :

<input id="Button1" type="button" />

[mehran63]

بله با کد Html کار کرد ولی با کد asp کا نمیکنه
اگه دلیلش رو بگید و برلی رفعش راهنمایی کنید ممنون میشم

[masudafsar]

کنترل های ASP.Net بعد از اجرا مقدار id شان تغییر میکنئ مثلا من برای من وقتی id را برابر Button1 قرار دادم آن را به MainContent_Button1 تبدیل کرد.

حال کد را به شکل زیر تغییر دادم و کار کرد :

///<reference path="/scripts/jquery.js" />

$("document").ready(function () {

    $("#MainContent_Button1").click(function () {

        $("div").hide();

    });

});

شما هم باید بعد اجرای برنامه asp.net خود در مرورگر source فایل رو باز کنید و ببینید که id دکمه شما چه مقداری گرفته است.

[mehran63]

متشکرم از لطفی که میفرمایید و راهنمای میکنید
چرا این مشکل به وجود میاد مگه این روش که کدهای JQuery رو تو یه فایل جداگانه بنویسیم یک کار اصولی نیست، اگه هست راهی اصولی هم باید برای رفع این مشکل وجود داشته باشه

[masudafsar]

اتفاقا خیلی هم اصولیه ولی چون ASP.NET خودش مقدار id و کلاس ها تغییر میده باید هنگام استفاده از jQuery ، تو انتخاب سلکتور ها بیشتر دقت کنید.

[aslan]

سلام
اسم فایل شما اینه my-JScript.js
یا این my-jquery.js
؟

[mehran63]

سلام
اسم فایل شما اینه my-JScript.js
یا این my-jquery.js
؟

یک اشتباه تایپی تو تایپیک اول بود
اسم فایل my-JScript.js است که تو برنامه (سورس) من اسم فایل رو درست نوشتم همانطوری که تو سورس تایپیک اول میبینید پس درسته و مشکل از این اسم فایل نیست

اتفاقا خیلی هم اصولیه ولی چون ASP.NET خودش مقدار id و کلاس ها تغییر میده باید هنگام استفاده از jQuery ، تو انتخاب سلکتور ها بیشتر دقت کنید.

مسئله دیگه ای که هست و من متوجه نمیشم اینه که آیا تمام کسایی که با ASP.NET کار میکنن با این مشکل دست و پنجه نرم میکنن و ID مربوطه رو درحین اجرا برمیدارن و استفاده میکنن. به نظر معقولانه نیست و احتمالا راهی برای این مسئله باید وجود داشته باشه
از دوستانی که تجربه استفاده JQuery در ASP.NET رو دارند میخوام راهنمایی کنند

[hakan648]

چرا این مشکل به وجود میاد مگه این روش که کدهای JQuery رو تو یه فایل جداگانه بنویسیم یک کار اصولی نیست، اگه هست راهی اصولی هم باید برای رفع این مشکل وجود داشته باشه

چون کدی که شما نوشتید مستقیم با برنامه تعامل داره ، یعنی ID ها مستقیم در سورس برنامه وجود دارند ( و این IDها در ASP.NET Webform متغییر هستند ) ، پس قطعا نمیشه کدهارو در یک فایل دیگر قرار داد.
برای این مورد ، باید کدهاتون رو کپسوله کنید و فقط در صفحه ای که لود شده ، از توابع اون استفاده کنید.

مسئله دیگه ای که هست و من متوجه نمیشم اینه که آیا تمام کسایی که با ASP.NET کار میکنن با این مشکل دست و پنجه نرم میکنن و ID مربوطه رو درحین اجرا برمیدارن و استفاده میکنن. به نظر معقولانه نیست و احتمالا راهی برای این مسئله باید وجود داشته باشه

بله ، روش کار به همین صورت هست ، چون ID کنترل های سمت سرور در کلاینت بصورت متفاوتی رندر میشه ، و در شرایط متفاوت این ID متفاوت هست.
البته میشه حالت های مختلفی برای تولید ID مشخص کرد که مثلا همون ID سمت سرور رو در کلاینت هم استفاده کنه ، اما روش خیلی مناسبی نیست. مثلا در یک گرید ویو ، نمیشه برای چندین کنترل که تکرار میشن ، یک ID تولید کرد.
البته بهتره که بگیم ASP.NET Webform ، چون ASP.NET MVC این مشکلات رو نداره و خیلی هم با جاوا اسکریپت هماهنگ و سازگار هست.

راه حل این مشکل استفاده از مقدار ClientID از کنترل سمت سرور است و همونطوری که در بالا گفتم ، گرفتن این مقدار از سورس صفحه کار صحیحی نیست.

$("document").ready(function () {

    $("#<%= ServerControlID.ClientID %>").click(function () {

        $("div").hide();

    });

});

اگر هم مایل به قرار دادن کدها در یک فایل خارجی هستید ، میتونید به این شکل عمل کنید:

در فایل .js :

function buttonClick(id){

    $("#" + id).click(function () {

        $("div").hide();

    });

}

در صفحه .aspx :

buttonClick("<%= ServerControlID.ClientID %>");

البته این یک مثال کوچیک هست ، اگر عملیات بیشتری قرار باشه انجام بشن ، جداسازی و قرار دادن توابع اصلی برنامه در یک فایل خروجی خیلی بهتر هست.

[mehran63]

دوست عزیز از پاسختان متشکرم
ولی زیاد متوجه نشدم برای رفع این مشکل چه باید کرد. در یک جا فرمودید گرفتن این مقدار از سورس صفحه کار صحیحی نیست.
1-1 حدسم اینه که منظورتون در خود فایل Aspx باشه؟
1-2 وقتی این سورس را در Aspx قرار میدهم ServerControlID.ClientID را خطا میگیرد کد را به شکل زیر نوشتم

<script type="text/javascript">

            $("document").ready(function () {

                $("#<%= ServerControlID.ClientID %>").click(function () {

                     $("div").hide();

                });

            });

        </script>

2- در بخش دوم که گفتید برای قرار دادن کدها در یک فایل خارجی است، اگه امکان داره شکل کامل سورس را بگذارید (هم بخش مربوط به JS و هم بخش مربوط به aspx) من تازه کار هستم

3- در اینجا من از ID در بخش Selector استفاده کردم که به قول شما در زمان اجرا به مشکل بر میخوره. آیا به جای ID چیز دیگری وجود دارد تا برای تگ های مربوط به ASP.NET از آن در بخش Selector استفاده کرد؟

4- در پایین سورس رو در حال اجرا گذاشتم همانطور که میبینید ID مربوط به Button تغییر نکرده است و میتوان گفت ID هیچ کنترلی تغییر نکرده

<!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><title>
	Untitled Page
</title>
    <script src="scripts/jQuery.js" type="text/javascript"></script>
    <script src="scripts/my-JScript.js" type="text/javascript"></script>
</head>
<body>
    <form method="post" action="Default4.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTY5MzEwNzM4Ng9kFgICAw9kFgICAQ8QZGQWAWZkZEq4G94efbN2Yz0MXFKDg4XfL09xNghKYDp5jZ+9zHUV" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBQKMhfSsAwKd5I/lCgKA4Lu0CwLu+5HYBAKM54rGBlEVFJaaNICC9cZJme6tuD86kidav5mSB9HbcDLCaEN/" />
</div>
    <div>
    
        <select name="DropDownList1" onchange="javascript:setTimeout(&#39;__doPostBack(\&#39;DropDownList1\&#39;,\&#39;\&#39;)&#39;, 0)" id="DropDownList1">
	<option selected="selected" value="Esfahan">Esfahan</option>
	<option value="tehran">tehran</option>

</select>
        <br />
        <br />
        <br />
        <select name="DropDownList2" id="DropDownList2">

</select>
        <br />
        <br />
        <br />
        <input type="submit" name="Button1" value="Button" id="Button1" />
        
    <p>Hellooooo</p>
    </div>
    </form>
</body>
</html>

[hakan648]

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

منظورم روشی بود که دوستمون فرمودند ، یعنی اینکه بیایم برنامه رو اجرا کنیم بعد بریم تو سورس صفحه ببینیم چه ID گرفته صحیح نیست .

1-2 وقتی این سورس را در Aspx قرار میدهم ServerControlID.ClientID را خطا میگیرد کد را به شکل زیر نوشتم

ServerControlID ، آی‌دی یک کنترل سمت سرور هست ( مثلا lblMyLabel ) و خاصیت ClientID ، آی‌دی ای هست که در نهایت رندر میشه و در سورس صفحه مشاهده می‌کنید.
پس ServerControlID رو باید به نام کنترل سمت سرور مورد نظرتون تغییر نام بدید. ( مثلا Button1 که در کدهاتون نوشتید. )

2- در بخش دوم که گفتید برای قرار دادن کدها در یک فایل خارجی است، اگه امکان داره شکل کامل سورس را بگذارید (هم بخش مربوط به JS و هم بخش مربوط به aspx) من تازه کار هستم

Default.aspx :

<%@ Page Language="C#‎‎" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ASP.NET_Webform.Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Using ASP.NET Control's ID in Client Side</title>
    <script type="text/javascript" src="Scripts/myjs.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button runat="server" ID="btnMyButton" />
    </form>
    <script type="text/javascript">
        buttonClick("<%= btnMyButton.ClientID %>");
    </script>
</body>
</html>

myjs.js :

function buttonClick(id){

    $("#" + id).click(function () {

        $("div").hide();

    });

}

3- در اینجا من از ID در بخش Selector استفاده کردم که به قول شما در زمان اجرا به مشکل بر میخوره. آیا به جای ID چیز دیگری وجود دارد تا برای تگ های مربوط به ASP.NET از آن در بخش Selector استفاده کرد؟

بله! حالت های مختلفی وجود داره ، مثلا اصلا میشه رویداد هارو در خود تگ ( یا کنترل سمت سرور ) تعریف کرد

<asp:Button runat="server" ID="btnMyButton" OnClientClick="someFunc(this)" />

یا میشه با Css Selector با عناصر صفحه ارتباط داشت ( مثل استایل دهی که توسط Css انجام میدیم )

$(".someClass #mytag sometag").click(function() { });

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

4- در پایین سورس رو در حال اجرا گذاشتم همانطور که میبینید ID مربوط به Button تغییر نکرده است و میتوان گفت ID هیچ کنترلی تغییر نکرده

صحیح! قبلا عرض کردم که این هم ممکن هست ، اما در ایجا صحیح نیست.
اگر زمانی ID کنترل سمت سرور رو تغییر بدید ، ID هایی که با مراجعه به سورس صفحه و بصورت ثابت تعریف کردید ، غیر معتبر خواهند شد و شما بسادگی متوجه این ناهمخوانی نخواهید شد.
در صورتی که اگه از روشی که ارائه شد استفاده کنید ، هم خود Visual Studio در نوشتن IDها به شما کمک خواهد کرد و هم زمان توسعه و هم زمان اجرای برنامه ، در صورت اشتباه بودن مقدار ID ارور خواهد داد.